mirrors/homebox
1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2025-07-25 20:10:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

style updates

Browse source
This commit is contained in:
Hayden 2022-09-03 01:17:57 -08:00
parent f4f7123073
commit 6bbe62823d
19 changed files with 337 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

82
frontend/pages/home.vue
View file

@ -17,33 +17,85 @@
const { data } = await api.labels.getAll();
return data.items;
});
const { data: items } = useAsyncData('items', async () => {
const { data } = await api.items.getAll();
return data.items;
});
const totalItems = computed(() => items.value?.length || 0);
const totalLocations = computed(() => locations.value?.length || 0);
const totalLabels = computed(() => labels.value?.length || 0);
const stats = [
{
label: 'Locations',
value: totalLocations,
},
{
label: 'Items',
value: totalItems,
},
{
label: 'Labels',
value: totalLabels,
},
];
</script>
<template>
<BaseContainer class="space-y-16">
<section aria-labelledby="profile-overview-title" class="mt-8">
<div class="overflow-hidden rounded-lg bg-white shadow">
<h2 class="sr-only" id="profile-overview-title">Profile Overview</h2>
<div class="bg-white p-6">
<div class="sm:flex sm:items-center sm:justify-between">
<div class="sm:flex sm:space-x-5">
<div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
<p class="text-sm font-medium text-gray-600">Welcome back,</p>
<p class="text-xl font-bold text-gray-900 sm:text-2xl">Hayden Kotelman</p>
<p class="text-sm font-medium text-gray-600">User</p>
</div>
</div>
<div class="mt-5 flex justify-center sm:mt-0">
<a
href="#"
class="flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
>View profile</a
>
</div>
</div>
</div>
<div
class="grid grid-cols-1 divide-y divide-gray-200 border-t border-gray-200 bg-gray-50 sm:grid-cols-3 sm:divide-y-0 sm:divide-x"
>
<div v-for="stat in stats" :key="stat.label" class="px-6 py-5 text-center text-sm font-medium">
<span class="text-gray-900">{{ stat.value.value }}</span>
{{ ' ' }}
<span class="text-gray-600">{{ stat.label }}</span>
</div>
</div>
</div>
</section>
<section>
<BaseSectionHeader class="mb-5"> Storage Locations </BaseSectionHeader>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<NuxtLink
:to="`/location/${l.id}`"
class="card bg-primary text-primary-content hover:-translate-y-1 focus:-translate-y-1 transition duration-300"
v-for="l in locations"
>
<div class="card-body p-4">
<h2 class="flex items-center gap-2">
<Icon name="heroicons-map-pin" class="h-5 w-5 text-white" height="25" />
{{ l.name }}
<!-- <span class="badge badge-accent badge-lg ml-auto text-accent-content text-lg">0</span> -->
</h2>
</div>
</NuxtLink>
<div class="grid grid-cols-1 sm:grid-cols-2 card md:grid-cols-3 gap-4">
<LocationCard v-for="location in locations" :location="location" />
</div>
</section>
<section>
<BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>
<div class="grid sm:grid-cols-2 gap-4">
<ItemCard v-for="item in items" :item="item" />
</div>
</section>
<section>
<BaseSectionHeader class="mb-5"> Labels </BaseSectionHeader>
<div class="flex gap-2">
<LabelChip v-for="label in labels" :label="label" />
<LabelChip v-for="label in labels" size="lg" :label="label" />
</div>
</section>
</BaseContainer>