99 lines
4.2 KiB
TypeScript
99 lines
4.2 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import Object from "./Object";
|
|
import { MonitorSmartphone } from "lucide-react";
|
|
import { ALL_ITEMS_UPDATED_EVENT } from "../utils/fetchData";
|
|
|
|
const Sidebar: React.FC = () => {
|
|
const [items, setItems] = useState<any[]>(
|
|
JSON.parse(localStorage.getItem("allItems") || "[]")
|
|
);
|
|
|
|
useEffect(() => {
|
|
const handler = () => {
|
|
const next = JSON.parse(localStorage.getItem("allItems") || "[]");
|
|
setItems(next);
|
|
};
|
|
handler();
|
|
window.addEventListener(ALL_ITEMS_UPDATED_EVENT, handler);
|
|
return () => window.removeEventListener(ALL_ITEMS_UPDATED_EVENT, handler);
|
|
}, []);
|
|
|
|
const outCount = items.reduce((n, it) => n + (it.inSafe ? 0 : 1), 0);
|
|
const sorted = [...items].sort((a, b) => Number(a.inSafe) - Number(b.inSafe));
|
|
|
|
return (
|
|
<aside className="w-full md:w-72 md:h-full flex flex-col rounded-2xl pt-0 px-3 pb-3 sm:pt-0 sm:px-4 sm:pb-4 bg-gradient-to-b from-white to-slate-50 ring-1 ring-slate-200/70 shadow-md overflow-hidden">
|
|
<div className="sticky top-0 z-10 -mx-3 sm:-mx-4 px-3 sm:px-4 py-2.5 bg-white/85 backdrop-blur supports-[backdrop-filter]:backdrop-blur border-b border-slate-200/70 text-lg sm:text-xl font-bold mb-3 text-slate-900 tracking-tight flex items-center justify-between gap-2 rounded-t-2xl">
|
|
<span className="flex items-center gap-2 min-w-0 flex-1 truncate">
|
|
<MonitorSmartphone className="w-5 h-5 text-slate-700 shrink-0" />
|
|
<span className="truncate">Geräte</span>
|
|
</span>
|
|
{outCount > 0 && (
|
|
<span className="inline-flex items-center gap-1 whitespace-nowrap tabular-nums text-[10px] sm:text-xs px-2.5 py-1 rounded-full bg-amber-50 text-amber-700 ring-1 ring-amber-200/70 shadow-sm font-medium">
|
|
{outCount} außerhalb
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Scroll area */}
|
|
<div className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden">
|
|
<div className="flex flex-col gap-3 md:space-y-3">
|
|
{sorted.map((item: any) => (
|
|
<div
|
|
key={item.item_name}
|
|
className={`group relative w-full bg-white rounded-xl p-3 sm:p-4 ring-1 ring-slate-200/70 duration-200 hover:shadow-md focus-within:ring-slate-300 ${
|
|
item.inSafe
|
|
? "border-l-4 border-emerald-400"
|
|
: "border-l-4 border-red-400 ring-red-200/60 bg-red-50/40"
|
|
}`}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<span
|
|
className="relative mt-0.5 inline-flex"
|
|
aria-hidden="true"
|
|
>
|
|
{!item.inSafe && (
|
|
<span className="absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75 animate-ping"></span>
|
|
)}
|
|
<span
|
|
className={`inline-block w-3 h-3 rounded-full ring-2 ring-white ${
|
|
item.inSafe ? "bg-emerald-500" : "bg-red-500"
|
|
}`}
|
|
title={
|
|
item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
|
|
}
|
|
aria-label={
|
|
item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
|
|
}
|
|
/>
|
|
</span>
|
|
<Object
|
|
title={item.item_name}
|
|
description={
|
|
item.inSafe
|
|
? "Aktuell im Schließfach"
|
|
: "Aktuell nicht im Schließfach"
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-4 pt-3 border-t border-slate-200/70 text-[10px] sm:text-xs text-slate-500 items-center gap-4 hidden md:flex">
|
|
<span className="inline-flex items-center gap-1">
|
|
<span className="inline-block w-3 h-3 bg-emerald-500 rounded-full ring-2 ring-white shadow-sm"></span>
|
|
Im Schließfach
|
|
</span>
|
|
<span className="inline-flex items-center gap-1">
|
|
<span className="inline-block w-3 h-3 bg-red-500 rounded-full ring-2 ring-white shadow-sm"></span>
|
|
Außerhalb des Schließfachs
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|