hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add disclosure to widgets

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-09-23 00:41:37 +10:00
parent 2e79fcda99
commit 41ad0c00c0
7 changed files with 137 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Widgets/PositionWidget.tsx
+9 -9
View File
@@ -3,6 +3,7 @@ import type React from "react";
import { MapPinIcon } from "@heroicons/react/24/outline";
import { Card } from "../Card.js";
import { Dropdown } from "../Dropdown.js";
export interface PositionWidgetProps {
grid: string;
@@ -10,16 +11,15 @@ export interface PositionWidgetProps {
export const PositionWidget = ({ grid }: PositionWidgetProps): JSX.Element => {
return (
<Card>
<div className="flex w-20 bg-teal-600 p-3">
<MapPinIcon className="m-auto h-12 text-white" />
</div>
<div className="flex w-full flex-col">
<div className="flex h-8 bg-slate-100">
<span className="m-auto text-lg font-medium">Position</span>
<Card className="flex-col">
<Dropdown title="Position" icon={<MapPinIcon className="h-4" />}>
<div className="flex">
<div className="flex w-20 bg-teal-600 p-3">
<MapPinIcon className="m-auto h-12 text-white" />
</div>
<span className="m-auto text-lg">{grid}</span>
</div>
<span className="m-auto text-lg">{grid}</span>
</div>
</Dropdown>
</Card>
);
};