ui: ui for dashboard widgets

This commit is contained in:
Eirene 2024-01-28 14:57:47 +08:00
parent 3c3d76c33c
commit e726997708
4 changed files with 98 additions and 29 deletions

View File

@ -14,6 +14,7 @@
"format": "prettier --write ."
},
"dependencies": {
"pnpm": "^8.15.0"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0",

View File

@ -4,6 +4,11 @@ settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
dependencies:
pnpm:
specifier: ^8.15.0
version: 8.15.0
devDependencies:
'@sveltejs/adapter-auto':
specifier: ^3.0.0
@ -2065,6 +2070,12 @@ packages:
pathe: 1.1.2
dev: true
/pnpm@8.15.0:
resolution: {integrity: sha512-6kVRfVKF0SPqwCw3k1Bfof1tqQovxg0ejZ4MHpKSiG7Pr/UT8GK50cyAIbuGFQM7GsW+o7LuP8FlptcDS75rAw==}
engines: {node: '>=16.14'}
hasBin: true
dev: false
/postcss-import@15.1.0(postcss@8.4.33):
resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
engines: {node: '>=14.0.0'}

View File

@ -77,8 +77,9 @@
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4 ring-1 ring-white/10">
<div class="flex h-16 shrink-0 items-center">
<div class="flex gap-4 h-16 shrink-0 items-center">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
<h3 class="text-white">JB Lux</h3>
</div>
<nav class="flex flex-1 flex-col">
<ul role="list" class="flex flex-1 flex-col gap-y-7">
@ -180,8 +181,9 @@
<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4">
<div class="flex h-16 shrink-0 items-center">
<div class="flex gap-4 h-16 shrink-0 items-center">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
<h3 class="text-white">JB Lux</h3>
</div>
<nav class="flex flex-1 flex-col">
<ul role="list" class="flex flex-1 flex-col gap-y-7">

View File

@ -3,38 +3,93 @@
</script>
<!-- Pinned projects -->
<div class="">
<ul role="list" class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 xl:grid-cols-4">
<li class="relative col-span-1 flex rounded-md shadow-sm">
<div class="flex w-16 flex-shrink-0 items-center justify-center bg-green-500 rounded-l-md text-sm font-medium text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
<ul role="list" class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
<li class="overflow-hidden rounded-xl border border-gray-200 bg-white">
<div class="flex items-center gap-2 bg-gray-50 p-5">
<span class="text-gray-800">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Zm.75-12h9v9h-9v-9Z" />
</svg>
</span>
<div class="text-sm font-medium leading-6 text-gray-900">Devices</div>
</div>
<dl class="divide-y divide-gray-100 px-6 py-px text-sm leading-6">
<div class="flex justify-between gap-x-4 py-3">
<dt class="flex items-center gap-x-2">
<span class="h-2 w-2 rounded-full bg-green-600"></span>
<span class="text-gray-500">On</span>
</dt>
<dd class="text-gray-700"><time datetime="2022-12-13">123</time></dd>
</div>
<div class="flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white">
<div class="flex-1 truncate px-4 py-2 text-sm">
<a href="#" class="font-medium text-gray-900 hover:text-gray-600">Total devices</a>
<p class="text-gray-500">863</p>
</div>
<div class="flex justify-between gap-x-4 py-3">
<dt class="flex items-center gap-x-2">
<span class="h-2 w-2 rounded-full bg-red-600"></span>
<span class="text-gray-500">Faulty</span>
</dt>
<dd class="text-gray-700"><time datetime="2022-12-13">12</time></dd>
</div>
</li>
<li class="relative col-span-1 flex rounded-md shadow-sm">
<div class="flex w-16 flex-shrink-0 items-center justify-center bg-pink-600 rounded-l-md text-sm font-medium text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
<div class="flex justify-between gap-x-4 py-3">
<dt class="text-gray-500">Total</dt>
<dd class="text-gray-700"><time datetime="2022-12-13">135</time></dd>
</div>
</dl>
</li>
<li class="overflow-hidden rounded-xl border border-gray-200 bg-white">
<div class="flex items-center gap-2 bg-gray-50 p-5">
<span class="text-gray-800">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z" />
</svg>
</div>
<div class="flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white">
<div class="flex-1 truncate px-4 py-2 text-sm">
<a href="#" class="font-medium text-gray-900 hover:text-gray-600">Failed lamps</a>
<p class="text-gray-500">12 items</p>
</div>
</div>
</li>
</span>
</ul>
</div>
<div class="text-sm font-medium leading-6 text-gray-900">Zones</div>
</div>
<dl class="divide-y divide-gray-100 px-6 py-px text-sm leading-6">
<div class="flex justify-between gap-x-4 py-3">
<dt class="flex items-center gap-x-2">
<span class="h-2 w-2 rounded-full bg-green-600"></span>
<span class="text-gray-500">On</span>
</dt>
<dd class="text-gray-700"><time datetime="2022-12-13">12</time></dd>
</div>
<div class="flex justify-between gap-x-4 py-3">
<dt class="flex items-center gap-x-2">
<span class="h-2 w-2 rounded-full bg-gray-400"></span>
<span class="text-gray-500">Off</span>
</dt>
<dd class="text-gray-700"><time datetime="2022-12-13">0</time></dd>
</div>
<div class="flex justify-between gap-x-4 py-3">
<dt class="text-gray-500">Total</dt>
<dd class="text-gray-700"><time datetime="2022-12-13">12</time></dd>
</div>
</dl>
</li>
<li class="overflow-hidden rounded-xl border border-gray-200 bg-white">
<div class="flex items-center gap-2 bg-gray-50 p-5">
<span class="text-gray-800">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
</svg>
</span>
<div class="text-sm font-medium leading-6 text-gray-900">Guests detected</div>
</div>
<dl class="divide-y divide-gray-100 px-6 py-px text-sm leading-6">
<div class="flex justify-between gap-x-4 py-3">
<dt class="text-gray-500">Now</dt>
<dd class="text-gray-700"><time datetime="2022-12-13">12</time></dd>
</div>
<div class="flex justify-between gap-x-4 py-3">
<dt class="text-gray-500">Max Today</dt>
<dd class="text-gray-700"><time datetime="2022-12-13">120</time></dd>
</div>
<div class="flex justify-between gap-x-4 py-3">
<dt class="text-gray-500">30-Day Daily Average</dt>
<dd class="text-gray-700"><time datetime="2022-12-13">70</time></dd>
</div>
</dl>
</li>
</ul>
<div class="mt-10">
<Table/>