mirror of
https://github.com/meshtastic/meshtastic.git
synced 2025-01-29 23:00:46 -08:00
Add svg expand
This commit is contained in:
Sacha Weatherstone
parent
8cac60be83
commit
0ea954ba9f
|
|
@ -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 {
|
||||
VictoryChart,
|
||||
VictoryLine,
|
||||
|
|
@ -26,33 +26,54 @@ export const HardwareModal = ({
|
|||
close,
|
||||
}: HardwareModal): JSX.Element => {
|
||||
const colors = ['#428517', '#77D200', '#D6D305', '#EC8E19', '#C92B05'];
|
||||
const [hideDetails, setHideDetails] = useState(false);
|
||||
|
||||
return (
|
||||
<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="flex flex-col md:flex-row">
|
||||
<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
|
||||
src={device.misc.ImagePath}
|
||||
alt=""
|
||||
className="pointer-events-none m-auto object-cover p-2 group-hover:opacity-75"
|
||||
/>
|
||||
<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 && (
|
||||
<div className="flex h-min gap-1 rounded-md bg-blue-500 px-1 text-white shadow-md">
|
||||
<FiBluetooth className="m-auto" />
|
||||
<span>Bluetooth</span>
|
||||
</div>
|
||||
)}
|
||||
{device.features.WiFi && (
|
||||
<div className="m-auto flex h-min gap-1 rounded-md bg-orange-500 px-1 text-white shadow-md">
|
||||
<FiWifi className="m-auto" />
|
||||
<span>WiFi</span>
|
||||
</div>
|
||||
)}
|
||||
<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">
|
||||
{device.features.BLE && (
|
||||
<div className="flex h-min gap-1 rounded-md bg-blue-500 px-1 text-white shadow-md">
|
||||
<FiBluetooth className="m-auto" />
|
||||
<span>Bluetooth</span>
|
||||
</div>
|
||||
)}
|
||||
{device.features.WiFi && (
|
||||
<div className="m-auto flex h-min gap-1 rounded-md bg-orange-500 px-1 text-white shadow-md">
|
||||
<FiWifi className="m-auto" />
|
||||
<span>WiFi</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
@ -61,81 +82,85 @@ export const HardwareModal = ({
|
|||
>
|
||||
<FiX className="m-auto" />
|
||||
</div>
|
||||
<div className="md: w-full">
|
||||
<div className="flex shadow-md md:pb-2">
|
||||
<VariantSelectButton options={device.variants} />
|
||||
</div>
|
||||
<div className="bg-base p-2 md:p-4">
|
||||
<Tab.Group as="div" className="rounded-2xl bg-primary p-2">
|
||||
<Tab.List className="flex gap-2">
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-1/3 rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
|
||||
selected ? 'bg-secondary shadow-md' : ''
|
||||
}`
|
||||
}
|
||||
>
|
||||
Info
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-1/3 rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
|
||||
selected ? 'bg-secondary shadow-md' : ''
|
||||
}`
|
||||
}
|
||||
>
|
||||
Power
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-1/3 rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
|
||||
selected ? 'bg-secondary shadow-md' : ''
|
||||
}`
|
||||
}
|
||||
>
|
||||
Pinout
|
||||
</Tab>
|
||||
</Tab.List>
|
||||
<Tab.Panels as="div" className="">
|
||||
<Tab.Panel className="h-32">Content 1</Tab.Panel>
|
||||
<Tab.Panel className="h-96">
|
||||
<VictoryChart
|
||||
polar
|
||||
theme={VictoryTheme.material}
|
||||
domain={{ y: [0, 10] }}
|
||||
{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">
|
||||
<VariantSelectButton options={device.variants} />
|
||||
</div>
|
||||
<div className="bg-base p-2 md:p-4">
|
||||
<Tab.Group as="div" className="rounded-2xl bg-primary p-2">
|
||||
<Tab.List className="flex gap-2">
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
|
||||
selected ? 'bg-secondary shadow-md' : ''
|
||||
}`
|
||||
}
|
||||
>
|
||||
<VictoryPolarAxis
|
||||
dependentAxis
|
||||
style={{ axis: { stroke: 'none' } }}
|
||||
tickFormat={() => ''}
|
||||
/>
|
||||
<VictoryPolarAxis
|
||||
tickValues={[
|
||||
0,
|
||||
Math.PI / 2,
|
||||
Math.PI,
|
||||
(3 * Math.PI) / 2,
|
||||
]}
|
||||
tickFormat={['2π', 'π/2', 'π', '3π/2']}
|
||||
labelPlacement="vertical"
|
||||
/>
|
||||
{[5, 4, 3, 2, 1].map((val, i) => {
|
||||
return (
|
||||
<VictoryLine
|
||||
key={i}
|
||||
samples={100}
|
||||
style={{ data: { stroke: colors[i] } }}
|
||||
y={(d) => val * (1 - Math.cos(d.x))}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</VictoryChart>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>Content 3</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
Info
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
|
||||
selected ? 'bg-secondary shadow-md' : ''
|
||||
}`
|
||||
}
|
||||
>
|
||||
Power
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
|
||||
selected ? 'bg-secondary shadow-md' : ''
|
||||
}`
|
||||
}
|
||||
>
|
||||
Pinout
|
||||
</Tab>
|
||||
</Tab.List>
|
||||
<Tab.Panels as="div" className="">
|
||||
<Tab.Panel className="h-32">Content 1</Tab.Panel>
|
||||
<Tab.Panel className="h-96">
|
||||
<VictoryChart
|
||||
polar
|
||||
theme={VictoryTheme.material}
|
||||
domain={{ y: [0, 10] }}
|
||||
>
|
||||
<VictoryPolarAxis
|
||||
dependentAxis
|
||||
style={{ axis: { stroke: 'none' } }}
|
||||
tickFormat={() => ''}
|
||||
/>
|
||||
<VictoryPolarAxis
|
||||
tickValues={[
|
||||
0,
|
||||
Math.PI / 2,
|
||||
Math.PI,
|
||||
(3 * Math.PI) / 2,
|
||||
]}
|
||||
tickFormat={['2π', 'π/2', 'π', '3π/2']}
|
||||
labelPlacement="vertical"
|
||||
/>
|
||||
{[5, 4, 3, 2, 1].map((val, i) => {
|
||||
return (
|
||||
<VictoryLine
|
||||
key={i}
|
||||
samples={100}
|
||||
style={{ data: { stroke: colors[i] } }}
|
||||
y={(d) => val * (1 - Math.cos(d.x))}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</VictoryChart>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>Content 3</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
Loading…
Reference in a new issue