Template and Card fixes
This commit is contained in:
Sacha Weatherstone
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
|
||||
type DefaultDivProps = JSX.IntrinsicElements['div'];
|
||||
|
||||
interface CardProps extends DefaultDivProps {
|
||||
title: string;
|
||||
description: string;
|
||||
buttons?: JSX.Element;
|
||||
lgPlaceholder?: JSX.Element;
|
||||
}
|
||||
|
||||
export const Card = ({
|
||||
title,
|
||||
description,
|
||||
buttons,
|
||||
children,
|
||||
className,
|
||||
lgPlaceholder,
|
||||
...props
|
||||
}: CardProps): JSX.Element => {
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col flex-auto text-white border shadow-md select-none dark:bg-primaryDark dark:border-transparent rounded-3xl ${className}`}
|
||||
{...props}
|
||||
>
|
||||
<div className="flex items-center justify-between mx-10 mt-10">
|
||||
<div className="flex flex-col">
|
||||
<div className="mr-4 text-2xl font-semibold leading-7 tracking-tight text-black md:text-3xl dark:text-white">
|
||||
{title}
|
||||
</div>
|
||||
<div className="font-medium text-gray-400">{description}</div>
|
||||
</div>
|
||||
{buttons}
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className={`${lgPlaceholder ? 'w-full xl:w-2/3' : 'w-full'}`}>
|
||||
{children}
|
||||
</div>
|
||||
{lgPlaceholder && (
|
||||
<div className="hidden w-1/3 xl:flex">{lgPlaceholder}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+108
-111
@@ -3,6 +3,7 @@ import React from 'react';
|
||||
import ApexChart from 'react-apexcharts';
|
||||
|
||||
import { Button } from './Button';
|
||||
import { Card } from './Card';
|
||||
|
||||
type DefaultDivProps = JSX.IntrinsicElements['div'];
|
||||
|
||||
@@ -30,129 +31,125 @@ export const Chart = ({
|
||||
}: ChartProps): JSX.Element => {
|
||||
const [activeSeries, setActiveSeries] = React.useState<ISeries>(series[0]);
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col flex-auto text-white shadow-md dark bg-primaryDark rounded-3xl"
|
||||
{...props}
|
||||
>
|
||||
<div className="flex items-center justify-between mx-10 mt-10">
|
||||
<div className="flex flex-col">
|
||||
<div className="mr-4 text-2xl font-semibold leading-7 tracking-tight md:text-3xl">
|
||||
{title}
|
||||
</div>
|
||||
<div className="font-medium text-gray-400">{description}</div>
|
||||
</div>
|
||||
{hasMultipleSeries && (
|
||||
<div className="flex space-x-2">
|
||||
{series.map((data, index) => (
|
||||
<Button
|
||||
active={data.name === activeSeries.name}
|
||||
key={index}
|
||||
className="font-medium"
|
||||
onClick={(): void => {
|
||||
setActiveSeries(series[index]);
|
||||
}}
|
||||
>
|
||||
{data.name}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="h-80">
|
||||
<ApexChart
|
||||
height="96%"
|
||||
type="area"
|
||||
options={{
|
||||
chart: {
|
||||
animations: {
|
||||
speed: 400,
|
||||
animateGradually: {
|
||||
<div className="dark" {...props}>
|
||||
<Card
|
||||
title={title}
|
||||
description={description}
|
||||
buttons={
|
||||
hasMultipleSeries ? (
|
||||
<div className="flex space-x-2">
|
||||
{series.map((data, index) => (
|
||||
<Button
|
||||
active={data.name === activeSeries.name}
|
||||
key={index}
|
||||
className="font-medium"
|
||||
onClick={(): void => {
|
||||
setActiveSeries(series[index]);
|
||||
}}
|
||||
>
|
||||
{data.name}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
) : undefined
|
||||
}
|
||||
>
|
||||
<div className="h-80">
|
||||
<ApexChart
|
||||
height="96%"
|
||||
type="area"
|
||||
options={{
|
||||
chart: {
|
||||
animations: {
|
||||
speed: 400,
|
||||
animateGradually: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
colors: ['#818CF8'],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
colors: ['#818CF8'],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
colors: ['#312E81'],
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: 10,
|
||||
left: 0,
|
||||
right: 0,
|
||||
fill: {
|
||||
colors: ['#312E81'],
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: 10,
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
stroke: {
|
||||
width: 2,
|
||||
},
|
||||
tooltip: {
|
||||
followCursor: true,
|
||||
theme: 'dark',
|
||||
x: {
|
||||
format: 'MMM dd, yyyy',
|
||||
},
|
||||
y: {
|
||||
formatter: (value: number): string => `${value}`,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
crosshairs: {
|
||||
stroke: {
|
||||
color: '#475569',
|
||||
dashArray: 0,
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: '#CBD5E1',
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
followCursor: true,
|
||||
theme: 'dark',
|
||||
x: {
|
||||
format: 'MMM dd, yyyy',
|
||||
},
|
||||
y: {
|
||||
formatter: (value: number): string => `${value}`,
|
||||
},
|
||||
},
|
||||
type: 'datetime',
|
||||
},
|
||||
yaxis: {
|
||||
axisTicks: {
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
crosshairs: {
|
||||
stroke: {
|
||||
color: '#475569',
|
||||
dashArray: 0,
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: '#CBD5E1',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
type: 'datetime',
|
||||
},
|
||||
yaxis: {
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
show: false,
|
||||
},
|
||||
}}
|
||||
series={[activeSeries]}
|
||||
/>
|
||||
</div>
|
||||
}}
|
||||
series={[activeSeries]}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -26,7 +26,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
<div className="w-full">
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="block text-sm font-medium dark:text-white"
|
||||
className="block text-sm font-medium text-black dark:text-white"
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
|
||||
@@ -28,7 +28,10 @@ export const Select = ({
|
||||
}: SelectProps): JSX.Element => {
|
||||
return (
|
||||
<div className="w-full">
|
||||
<label htmlFor={id} className="block text-sm font-medium dark:text-white">
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="block text-sm font-medium text-black dark:text-white"
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
|
||||
|
||||
@@ -20,18 +20,21 @@ export const Toggle = ({
|
||||
const [enabled, setEnabled] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<label htmlFor={id} className="block text-sm font-medium dark:text-white">
|
||||
<div className="flex flex-col w-full">
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="block text-sm font-medium text-black dark:text-white"
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
<div className="float-right">
|
||||
<div className="ml-auto">
|
||||
<Switch
|
||||
id={id}
|
||||
{...props}
|
||||
checked={enabled}
|
||||
onChange={setEnabled}
|
||||
className={`${
|
||||
enabled ? 'bg-primary' : 'bg-gray-200 dark:bg-primaryDark'
|
||||
enabled ? 'bg-primary' : 'bg-gray-200 dark:bg-secondaryDark'
|
||||
}
|
||||
relative inline-flex flex-shrink-0 h-[38px] w-[74px] border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`}
|
||||
>
|
||||
|
||||
@@ -16,7 +16,7 @@ export const PrimaryTemplate = ({
|
||||
footer,
|
||||
}: PrimaryTemplateProps): JSX.Element => {
|
||||
return (
|
||||
<div className="flex flex-col flex-auto min-w-0">
|
||||
<div className="flex flex-col flex-auto h-full min-w-0">
|
||||
<div className="flex p-4 bg-white border-b md:flex-row flex-0 md:items-center md:justify-between md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
|
||||
{button && <div className="pr-2 m-auto md:hidden">{button}</div>}
|
||||
<div className="flex-1 min-w-0">
|
||||
@@ -32,7 +32,7 @@ export const PrimaryTemplate = ({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-auto flex-grow p-6 bg-white md:p-10 dark:bg-secondaryDark overflow-y-auto">
|
||||
<div className="flex-auto flex-grow p-6 overflow-y-auto bg-white md:p-10 dark:bg-secondaryDark">
|
||||
{children}
|
||||
</div>
|
||||
{footer && (
|
||||
|
||||
@@ -89,9 +89,9 @@ export const Nodes = (): JSX.Element => {
|
||||
</Tab.List>
|
||||
</Drawer>
|
||||
<div className="w-full">
|
||||
<Tab.Panels>
|
||||
<Tab.Panels className="h-full">
|
||||
{nodes.map((node) => (
|
||||
<Tab.Panel key={node.num}>
|
||||
<Tab.Panel className="h-full" key={node.num}>
|
||||
<Node navOpen={navOpen} setNavOpen={setNavOpen} node={node} />
|
||||
</Tab.Panel>
|
||||
))}
|
||||
|
||||
@@ -2,10 +2,13 @@ import React from 'react';
|
||||
|
||||
import moment from 'moment';
|
||||
|
||||
import { Card } from '@app/components/generic/Card';
|
||||
import { Chart } from '@app/components/generic/Chart';
|
||||
import { Input } from '@app/components/generic/Input';
|
||||
import { Toggle } from '@app/components/generic/Toggle';
|
||||
import { Button } from '@components/generic/Button';
|
||||
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
|
||||
import { MenuIcon } from '@heroicons/react/outline';
|
||||
import { MenuIcon, PuzzleIcon } from '@heroicons/react/outline';
|
||||
import type { Protobuf } from '@meshtastic/meshtasticjs';
|
||||
|
||||
export interface NodeProps {
|
||||
@@ -29,7 +32,7 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div className="w-full space-y-2">
|
||||
<div className="w-full space-y-4">
|
||||
<Chart
|
||||
title="Visitors Overview"
|
||||
description="Number of unique visitors"
|
||||
@@ -143,6 +146,24 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<Card
|
||||
title="Settings"
|
||||
description="Remote node settings"
|
||||
lgPlaceholder={
|
||||
<div className="w-full h-full text-black dark:text-white">
|
||||
<PuzzleIcon className="w-24 h-24 m-auto" />
|
||||
<div className="text-center">Placeholder</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="p-10">
|
||||
<form className="space-y-4">
|
||||
<Input label={'Device Name'} />
|
||||
<Input label={'Short Name'} maxLength={3} />
|
||||
<Toggle label="Licenced Operator?" />
|
||||
</form>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</PrimaryTemplate>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user