mirror of
https://github.com/blakeblackshear/frigate.git
synced 2024-11-21 19:07:46 +01:00
1757f4cb04
* use prettier-plugin-tailwindcss to keep class names organized * use prettierrc file to ensure formatting on save works with vscode * classname reorder with prettier-plugin-tailwindcss
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
type LiveIconProps = {
|
|
layout?: "list" | "grid";
|
|
};
|
|
|
|
export function LiveGridIcon({ layout }: LiveIconProps) {
|
|
return (
|
|
<div className="flex size-full flex-col gap-0.5 overflow-hidden rounded-md">
|
|
<div
|
|
className={`h-1 w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
|
|
/>
|
|
<div className="flex h-1 w-full gap-0.5">
|
|
<div
|
|
className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
|
|
/>
|
|
<div
|
|
className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
|
|
/>
|
|
</div>
|
|
<div className="flex h-1 w-full gap-0.5">
|
|
<div
|
|
className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
|
|
/>
|
|
<div
|
|
className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function LiveListIcon({ layout }: LiveIconProps) {
|
|
return (
|
|
<div className="flex size-full flex-col gap-0.5 overflow-hidden rounded-md">
|
|
<div
|
|
className={`size-full ${layout == "list" ? "bg-selected" : "bg-secondary-foreground"}`}
|
|
/>
|
|
<div
|
|
className={`size-full ${layout == "list" ? "bg-selected" : "bg-secondary-foreground"}`}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|