mirror of
https://github.com/sysadminsmedia/homebox.git
synced 2025-12-21 21:33:02 +01:00
d4e28e6f3b
* feat: begin upgrading deps, still very buggy * feat: progress * feat: sort all type issues * fix: sort type issues * fix: import sonner styles * fix: nuxt is the enemy * fix: try sorting issue with workflows * fix: update vitest config for dynamic import of path and defineConfig * fix: add missing import * fix: add time out to try and fix issues * fix: add ui:ci:preview task for frontend build in CI mode * fix: i was silly * feat: add go:ci:with-frontend task for CI mode and remove ui:ci:preview from e2e workflow * fix: update baseURL in Playwright config for local testing to use port 7745 * fix: update E2E_BASE_URL and remove wait for timeout in login test for smoother execution
46 lines
1.8 KiB
Vue
46 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { themes } from "~~/lib/data/themes";
|
|
import { useTheme } from "~/composables/use-theme";
|
|
|
|
const { setTheme } = useTheme();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="homebox grid grid-cols-1 gap-4 font-sans sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
|
|
<div
|
|
v-for="theme in themes"
|
|
:key="theme.value"
|
|
:class="'theme-' + theme.value"
|
|
class="overflow-hidden rounded-lg border outline-2 outline-offset-2"
|
|
:data-theme="theme.value"
|
|
:data-set-theme="theme.value"
|
|
data-act-class="outline"
|
|
@click="setTheme(theme.value)"
|
|
>
|
|
<div :data-theme="theme.value" class="w-full cursor-pointer bg-background-accent text-foreground">
|
|
<div class="grid grid-cols-5 grid-rows-3">
|
|
<div class="col-start-1 row-start-1 bg-background" />
|
|
<div class="col-start-1 row-start-2 bg-sidebar" />
|
|
<div class="col-start-1 row-start-3 bg-background-accent" />
|
|
<div class="col-span-4 col-start-2 row-span-3 row-start-1 flex flex-col gap-1 bg-background p-2">
|
|
<div class="font-bold">{{ theme.label }}</div>
|
|
<div class="flex flex-wrap gap-1">
|
|
<div class="flex size-5 items-center justify-center rounded bg-primary lg:size-6">
|
|
<div class="text-sm font-bold text-primary-foreground">A</div>
|
|
</div>
|
|
<div class="flex size-5 items-center justify-center rounded bg-secondary lg:size-6">
|
|
<div class="text-sm font-bold text-secondary-foreground">A</div>
|
|
</div>
|
|
<div class="flex size-5 items-center justify-center rounded bg-accent lg:size-6">
|
|
<div class="text-sm font-bold text-accent-foreground">A</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|