feat(public): implement dark mode
This commit is contained in:
No files matched your search
@@ -113,7 +113,7 @@ onMounted(() => {
|
||||
<div class="mt-4 flex flex-wrap items-center justify-between gap-2">
|
||||
<h2 class="text-2xl font-bold tracking-tight">Dashboard SIMRS</h2>
|
||||
<div class="flex items-center gap-4 space-x-2">
|
||||
<div class="bg-primary rounded-xl border p-1 text-white">Status: Aktif</div>
|
||||
<div class="rounded-xl border bg-primary p-1 text-white">Status: Aktif</div>
|
||||
<Button class="bg-primary p-2 text-white" size="lg">
|
||||
<Icon name="i-lucide-refresh-ccw" class="h-6 w-6" />
|
||||
Sinkronisasi
|
||||
@@ -143,7 +143,7 @@ onMounted(() => {
|
||||
<p class="text-sm font-medium leading-none">
|
||||
{{ recentSales.name }}
|
||||
</p>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ recentSales.email }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -156,19 +156,19 @@ onMounted(() => {
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<Icon name="i-lucide-activity" class="text-primary me-2 h-6 w-6" />
|
||||
<Icon name="i-lucide-activity" class="me-2 h-6 w-6 text-primary" />
|
||||
<h2 class="text-xl font-semibold tracking-tight">Aksi Cepat</h2>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent class="grid cursor-pointer gap-8 md:grid-cols-4 md:gap-8">
|
||||
<Card
|
||||
v-for="item in linkItems"
|
||||
:key="item.title"
|
||||
class="border-primary hover:bg-primary my-2 h-32 border transition-colors duration-200 hover:bg-gray-200"
|
||||
>
|
||||
v-for="item in linkItems"
|
||||
:key="item.title"
|
||||
class="my-2 h-32 border border-primary transition-colors duration-200 hover:bg-gray-200 hover:bg-primary"
|
||||
>
|
||||
<NuxtLink :to="item.link">
|
||||
<CardContent class="my-2 grid h-full grid-rows-2 place-items-center">
|
||||
<Icon :name="item.icon" class="text-primary h-9 w-[60px]" />
|
||||
<Icon :name="item.icon" class="h-9 w-[60px] text-primary" />
|
||||
<h1>{{ item.title }}</h1>
|
||||
</CardContent>
|
||||
</NuxtLink>
|
||||
|
||||
@@ -6,10 +6,10 @@ const { theme, toggleTheme } = useTheme()
|
||||
<template>
|
||||
<button
|
||||
@click="toggleTheme"
|
||||
class="ml-2 flex items-center rounded border px-2 py-1"
|
||||
class="ml-2 rounded border px-2 py-1 text-sm"
|
||||
:title="theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'"
|
||||
>
|
||||
<span v-if="theme === 'dark'"><Icon name="i-lucide-moon" class="h-4 w-4" /></span>
|
||||
<span v-else><Icon name="i-lucide-sun" class="h-4 w-4" /></span>
|
||||
<span v-if="theme === 'dark'"><Icon name="i-lucide-moon" class="h-4 w-4 mt-1" /></span>
|
||||
<span v-else><Icon name="i-lucide-sun" class="h-4 w-4 mt-1" /></span>
|
||||
</button>
|
||||
</template>
|
||||
Reference in New Issue
Block a user