mudhorn/meshtastic
1
0
Fork 0
mirror of https://github.com/meshtastic/meshtastic.git synced 2025-02-02 08:42:11 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add svg expand

Browse source
This commit is contained in:
Sacha Weatherstone 2022-04-03 01:51:42 +11:00
parent 8cac60be83
commit 0ea954ba9f
1 changed files with 114 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/components/hardware/HardwareModal.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'; import React, { useState } from 'react';
import { FiBluetooth, FiWifi, FiX } from 'react-icons/fi'; import { FiBluetooth, FiChevronRight, FiWifi, FiX } from 'react-icons/fi';
import { import {
VictoryChart, VictoryChart,
VictoryLine, VictoryLine,
@ -26,19 +26,39 @@ export const HardwareModal = ({
close, close,
}: HardwareModal): JSX.Element => { }: HardwareModal): JSX.Element => {
const colors = ['#428517', '#77D200', '#D6D305', '#EC8E19', '#C92B05']; const colors = ['#428517', '#77D200', '#D6D305', '#EC8E19', '#C92B05'];
const [hideDetails, setHideDetails] = useState(false);
return ( return (
<Modal open={open} onClose={close}> <Modal open={open} onClose={close}>
<div className="inline-block w-full max-w-md transform overflow-hidden rounded-2xl bg-base text-left align-middle transition-all md:max-w-2xl md:bg-primary lg:max-w-4xl xl:max-w-6xl"> <div className="inline-block w-full max-w-md transform overflow-hidden rounded-2xl bg-base text-left align-middle transition-all md:max-w-2xl md:bg-primary lg:max-w-4xl xl:max-w-6xl">
<div className="flex flex-col md:flex-row"> <div className="flex flex-col md:flex-row">
<div <div
className={`relative flex aspect-[2/1] rounded-t-2xl bg-gradient-to-r md:rounded-l-2xl md:rounded-tr-none ${device.misc.Gradient}`} className={`relative flex aspect-[2/1] rounded-t-2xl bg-gradient-to-r md:rounded-l-2xl md:rounded-tr-none ${
device.misc.Gradient
} ${hideDetails ? 'w-full' : ''}`}
> >
<img <img
src={device.misc.ImagePath} src={device.misc.ImagePath}
alt="" alt=""
className="pointer-events-none m-auto object-cover p-2 group-hover:opacity-75" className="pointer-events-none m-auto object-cover p-2 group-hover:opacity-75"
/> />
<div className="absolute -bottom-4 flex w-full md:bottom-auto md:-right-4 md:h-full md:w-auto ">
<div
onClick={() => {
setHideDetails(!hideDetails);
}}
className="m-auto flex cursor-pointer rounded-full bg-secondary p-2 shadow-md hover:bg-tertiary"
>
<FiChevronRight
className={`m-auto ${
hideDetails
? 'rotate-90 md:rotate-180'
: '-rotate-90 md:rotate-0'
}`}
/>
</div>
</div>
{!hideDetails && (
<div className="absolute -bottom-3 right-0 m-auto mr-2 ml-auto flex gap-2 md:bottom-2 md:mr-14 md:mt-2"> <div className="absolute -bottom-3 right-0 m-auto mr-2 ml-auto flex gap-2 md:bottom-2 md:mr-14 md:mt-2">
{device.features.BLE && ( {device.features.BLE && (
<div className="flex h-min gap-1 rounded-md bg-blue-500 px-1 text-white shadow-md"> <div className="flex h-min gap-1 rounded-md bg-blue-500 px-1 text-white shadow-md">
@ -53,6 +73,7 @@ export const HardwareModal = ({
</div> </div>
)} )}
</div> </div>
)}
</div> </div>
<div <div
@ -61,7 +82,10 @@ export const HardwareModal = ({
> >
<FiX className="m-auto" /> <FiX className="m-auto" />
</div> </div>
<div className="md: w-full"> {hideDetails ? (
<div className="h-7 bg-base md:h-auto md:w-7"></div>
) : (
<div className="w-full">
<div className="flex shadow-md md:pb-2"> <div className="flex shadow-md md:pb-2">
<VariantSelectButton options={device.variants} /> <VariantSelectButton options={device.variants} />
</div> </div>
@ -70,7 +94,7 @@ export const HardwareModal = ({
<Tab.List className="flex gap-2"> <Tab.List className="flex gap-2">
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`w-1/3 rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${ `w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
selected ? 'bg-secondary shadow-md' : '' selected ? 'bg-secondary shadow-md' : ''
}` }`
} }
@ -79,7 +103,7 @@ export const HardwareModal = ({
</Tab> </Tab>
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`w-1/3 rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${ `w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
selected ? 'bg-secondary shadow-md' : '' selected ? 'bg-secondary shadow-md' : ''
}` }`
} }
@ -88,7 +112,7 @@ export const HardwareModal = ({
</Tab> </Tab>
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`w-1/3 rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${ `w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
selected ? 'bg-secondary shadow-md' : '' selected ? 'bg-secondary shadow-md' : ''
}` }`
} }
@ -136,6 +160,7 @@ export const HardwareModal = ({
</Tab.Group> </Tab.Group>
</div> </div>
</div> </div>
)}
</div> </div>
</div> </div>
</Modal> </Modal>