mirror of
https://github.com/meshtastic/meshtastic.git
synced 2025-02-02 08:42:11 -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 {
|
import {
|
||||||
VictoryChart,
|
VictoryChart,
|
||||||
VictoryLine,
|
VictoryLine,
|
||||||
|
|
@ -26,33 +26,54 @@ 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-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-4 flex w-full md:bottom-auto md:-right-4 md:h-full md:w-auto ">
|
||||||
{device.features.BLE && (
|
<div
|
||||||
<div className="flex h-min gap-1 rounded-md bg-blue-500 px-1 text-white shadow-md">
|
onClick={() => {
|
||||||
<FiBluetooth className="m-auto" />
|
setHideDetails(!hideDetails);
|
||||||
<span>Bluetooth</span>
|
}}
|
||||||
</div>
|
className="m-auto flex cursor-pointer rounded-full bg-secondary p-2 shadow-md hover:bg-tertiary"
|
||||||
)}
|
>
|
||||||
{device.features.WiFi && (
|
<FiChevronRight
|
||||||
<div className="m-auto flex h-min gap-1 rounded-md bg-orange-500 px-1 text-white shadow-md">
|
className={`m-auto ${
|
||||||
<FiWifi className="m-auto" />
|
hideDetails
|
||||||
<span>WiFi</span>
|
? 'rotate-90 md:rotate-180'
|
||||||
</div>
|
: '-rotate-90 md:rotate-0'
|
||||||
)}
|
}`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</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>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|
@ -61,81 +82,85 @@ export const HardwareModal = ({
|
||||||
>
|
>
|
||||||
<FiX className="m-auto" />
|
<FiX className="m-auto" />
|
||||||
</div>
|
</div>
|
||||||
<div className="md: w-full">
|
{hideDetails ? (
|
||||||
<div className="flex shadow-md md:pb-2">
|
<div className="h-7 bg-base md:h-auto md:w-7"></div>
|
||||||
<VariantSelectButton options={device.variants} />
|
) : (
|
||||||
</div>
|
<div className="w-full">
|
||||||
<div className="bg-base p-2 md:p-4">
|
<div className="flex shadow-md md:pb-2">
|
||||||
<Tab.Group as="div" className="rounded-2xl bg-primary p-2">
|
<VariantSelectButton options={device.variants} />
|
||||||
<Tab.List className="flex gap-2">
|
</div>
|
||||||
<Tab
|
<div className="bg-base p-2 md:p-4">
|
||||||
className={({ selected }) =>
|
<Tab.Group as="div" className="rounded-2xl bg-primary p-2">
|
||||||
`w-1/3 rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
|
<Tab.List className="flex gap-2">
|
||||||
selected ? 'bg-secondary shadow-md' : ''
|
<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' : ''
|
||||||
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] }}
|
|
||||||
>
|
>
|
||||||
<VictoryPolarAxis
|
Info
|
||||||
dependentAxis
|
</Tab>
|
||||||
style={{ axis: { stroke: 'none' } }}
|
<Tab
|
||||||
tickFormat={() => ''}
|
className={({ selected }) =>
|
||||||
/>
|
`w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
|
||||||
<VictoryPolarAxis
|
selected ? 'bg-secondary shadow-md' : ''
|
||||||
tickValues={[
|
}`
|
||||||
0,
|
}
|
||||||
Math.PI / 2,
|
>
|
||||||
Math.PI,
|
Power
|
||||||
(3 * Math.PI) / 2,
|
</Tab>
|
||||||
]}
|
<Tab
|
||||||
tickFormat={['2π', 'π/2', 'π', '3π/2']}
|
className={({ selected }) =>
|
||||||
labelPlacement="vertical"
|
`w-1/3 truncate rounded-md px-3 py-2 text-sm font-medium hover:bg-tertiary ${
|
||||||
/>
|
selected ? 'bg-secondary shadow-md' : ''
|
||||||
{[5, 4, 3, 2, 1].map((val, i) => {
|
}`
|
||||||
return (
|
}
|
||||||
<VictoryLine
|
>
|
||||||
key={i}
|
Pinout
|
||||||
samples={100}
|
</Tab>
|
||||||
style={{ data: { stroke: colors[i] } }}
|
</Tab.List>
|
||||||
y={(d) => val * (1 - Math.cos(d.x))}
|
<Tab.Panels as="div" className="">
|
||||||
/>
|
<Tab.Panel className="h-32">Content 1</Tab.Panel>
|
||||||
);
|
<Tab.Panel className="h-96">
|
||||||
})}
|
<VictoryChart
|
||||||
</VictoryChart>
|
polar
|
||||||
</Tab.Panel>
|
theme={VictoryTheme.material}
|
||||||
<Tab.Panel>Content 3</Tab.Panel>
|
domain={{ y: [0, 10] }}
|
||||||
</Tab.Panels>
|
>
|
||||||
</Tab.Group>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue