mudhorn/meshtastic
1
0
Fork 0
mirror of https://github.com/meshtastic/meshtastic.git synced 2024-11-09 23:24:10 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Hardware page improvements

Browse source
This commit is contained in:
Sacha Weatherstone 2022-04-03 00:57:31 +11:00
parent 79c4547835
commit 8cac60be83
10 changed files with 51 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Modal.tsx
View file

@ -19,10 +19,10 @@ export const Modal = ({ open, onClose, children }: ModalProps): JSX.Element => {
<div className="min-h-screen px-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enter="ease-out duration-100"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leave="ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
@ -38,7 +38,7 @@ export const Modal = ({ open, onClose, children }: ModalProps): JSX.Element => {
</span>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enter="ease-out duration-100"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"

40
src/components/hardware/HardwareCard.tsx
View file

@ -1,9 +1,6 @@
import React, { useState } from 'react';
import { FiExternalLink } from 'react-icons/fi';
import { IoEllipsisHorizontalSharp } from 'react-icons/io5';
import { IDevice } from '@site/src/data/device.js';
import { IDevice, Stability } from '@site/src/data/device';
import { HardwareModal } from './HardwareModal';
@ -22,7 +19,7 @@ export const HardwareCard = ({ device }: HardwareCard): JSX.Element => {
setOpen(true);
}}
>
<div className="aspect-w-10 aspect-h-7 block w-full overflow-hidden rounded-lg bg-gray-100">
<div className="overflow-hidden rounded-lg">
<div
className={`flex aspect-[4/3] overflow-hidden bg-gradient-to-r ${device.misc.Gradient}`}
>
@ -33,32 +30,29 @@ export const HardwareCard = ({ device }: HardwareCard): JSX.Element => {
/>
</div>
<button type="button" className="absolute inset-0 focus:outline-none">
<span className="sr-only">View details for {name}</span>
<span className="sr-only">View details for {device.name}</span>
</button>
</div>
<div className="flex">
<div>
<p className="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">
<p className="pointer-events-none mt-2 block truncate text-sm font-medium text-primaryInv">
{device.name}
</p>
<p className="pointer-events-none block text-sm font-medium text-gray-500">
{device.specifications.LoRa}
<p className="pointer-events-none flex gap-1 text-sm font-medium text-mute">
<div
className={`my-auto h-3 w-3 rounded-full ${
device.misc.Stability === Stability.Broken
? 'bg-red-500'
: device.misc.Stability === Stability.Unstable
? 'bg-orange-500'
: device.misc.Stability === Stability.Semi
? 'bg-cyan-500'
: 'bg-green-500'
}`}
/>
<div className="my-auto">{Stability[device.misc.Stability]}</div>
</p>
</div>
<div className="z-10 ml-auto flex gap-2 p-2 opacity-0 transition-opacity duration-100 ease-in-out group-hover:opacity-100">
<a
href="#"
className="flex rounded-lg border-2 py-1 px-2 hover:border-accent"
>
<FiExternalLink className="m-auto" />
</a>
<a
href="#"
className="flex rounded-lg border-2 py-1 px-2 hover:border-accent"
>
<IoEllipsisHorizontalSharp className="m-auto" />
</a>
</div>
</div>
</li>
<HardwareModal

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

@ -63,7 +63,7 @@ export const HardwareModal = ({
</div>
<div className="md: w-full">
<div className="flex shadow-md md:pb-2">
<VariantSelectButton options={[]} />
<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">

19
src/components/hardware/VariantSelectButton.tsx
View file

@ -4,21 +4,16 @@ import { FiCheck } from 'react-icons/fi';
import { HiSelector } from 'react-icons/hi';
import { Listbox, Transition } from '@headlessui/react';
const people = [
{ id: 1, name: 'T-Beam 1.1' },
{ id: 2, name: 'T-Beam 1.0' },
{ id: 3, name: 'T-Beam 0.7' },
];
import type { Variant } from '@site/src/data/device.js';
export interface VariantSelectButtonProps {
options: any[];
options: Variant[];
}
export const VariantSelectButton = ({
options,
}: VariantSelectButtonProps): JSX.Element => {
const [selected, setSelected] = useState(people[0]);
const [selected, setSelected] = useState(options[options.length - 1]);
return (
<Listbox value={selected} onChange={setSelected}>
@ -43,15 +38,15 @@ export const VariantSelectButton = ({
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-primary py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
{people.map((person) => (
{options.map((variant, index) => (
<Listbox.Option
key={person.id}
key={index}
className={({ active }) =>
`relative cursor-default select-none py-2 pl-3 pr-9 ${
active ? 'bg-indigo-600' : ''
}`
}
value={person}
value={variant.name}
>
{({ selected, active }) => (
<>
@ -60,7 +55,7 @@ export const VariantSelectButton = ({
selected ? 'font-semibold' : 'font-normal'
}`}
>
{person.name}
{variant.name}
</span>
{selected ? (

8
src/css/custom.css
View file

@ -18,6 +18,10 @@
--primary: #ffffff;
--secondary: #e5e7eb;
--tertiary: #d1d5db;
--mute: #6b7280;
--primaryInv: #242526;
--secondaryInv: #18191a;
--tertiaryInv: #4C4E50;
}
[data-theme="dark"] {
@ -25,6 +29,10 @@
--primary: #242526;
--secondary: #18191a;
--tertiary: #4C4E50;
--mute: #9ca3af;
--primaryInv: #ffffff;
--secondaryInv: #e5e7eb;
--tertiaryInv: #d1d5db;
}
.docusaurus-highlight-code-line {

4
src/data/device.ts
View file

@ -26,6 +26,8 @@ export type GNSSModule = 'NEO-6M' | 'NEO-8M';
export type LORAModule = 'SX1276' | 'SX1262';
export type Variant = DeepPartial<Omit<IDevice, 'variants'>> & { name: string };
export enum Stability {
Stable,
Semi,
@ -68,5 +70,5 @@ export interface IDevice {
PSRAM: number;
RAM?: number;
};
variants: (DeepPartial<Omit<IDevice, 'variants'>> & { name: string })[];
variants: Variant[];
}

2
src/data/devices/heltec.ts
View file

@ -3,7 +3,7 @@ import { IDevice, Stability, UseCase } from '../device';
export const heltec: IDevice = {
name: 'Heltec',
misc: {
Stability: Stability.Stable,
Stability: Stability.Unstable,
SuggestedUse: [UseCase.Portable],
ImagePath: '/img/hardware/heltec-v2.png',
Gradient: 'from-pink-300 via-purple-300 to-indigo-400',

2
src/data/devices/techo.ts
View file

@ -3,7 +3,7 @@ import { IDevice, Stability, UseCase } from '../device';
export const techo: IDevice = {
name: 'T-Echo',
misc: {
Stability: Stability.Stable,
Stability: Stability.Semi,
SuggestedUse: [UseCase.Portable],
ImagePath: '/img/hardware/t-echo-lilygo.jpg',
Gradient: 'from-gray-700 via-gray-900 to-black',

17
src/pages/hardware/index.tsx
View file

@ -20,16 +20,11 @@ const Hardware = (): JSX.Element => {
rak19003,
rak19003,
rak19003,
rak19003,
rak19003,
rak19003,
rak19003,
rak19003,
];
return (
<PageLayout title="Hardware" description="Supported hardware">
<div className="border-b border-gray-200 p-4">
<div className="border-b border-tertiary p-4">
<div className="sm:flex sm:items-baseline">
<h3 className="text-lg font-medium leading-6 text-gray-900">
Issues
@ -62,19 +57,19 @@ const Hardware = (): JSX.Element => {
{hardware.map((device, index) => (
<HardwareCard key={index} device={device} />
))}
<li className="relative">
<li className="group relative">
<a
href="https://github.com/meshtastic/Meshtastic-device/issues/new?assignees=&labels=enhancement%2Ctriage&template=New+Board.yml&title=%5BBoard%5D%3A+"
className="flex aspect-[4/3] rounded-lg border-2 border-dashed border-gray-300 hover:border-gray-400"
className="flex aspect-[4/3] rounded-lg border-2 border-dashed border-mute group-hover:border-tertiaryInv"
target="_blank"
rel="noreferrer"
>
<FiPlus className="m-auto h-12 w-12 text-gray-400" />
<FiPlus className="m-auto h-12 w-12 text-mute group-hover:text-tertiaryInv" />
</a>
<p className="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">
<p className="pointer-events-none mt-2 block truncate text-sm font-medium text-primaryInv">
New Board
</p>
<p className="pointer-events-none block text-sm font-medium text-gray-500">
<p className="pointer-events-none block text-sm font-medium text-mute">
Want to support a board?
</p>
</li>

4
tailwind.config.cjs
View file

@ -9,6 +9,10 @@ module.exports = {
primary: 'var(--primary)',
secondary: 'var(--secondary)',
tertiary: 'var(--tertiary)',
mute: 'var(--mute)',
primaryInv: 'var(--primaryInv)',
secondaryInv: 'var(--secondaryInv)',
tertiaryInv: 'var(--tertiaryInv)',
},
},
},