Feat/initial layout (#4)

implement the initial layout (colors, fonts, header, footer and pages:
explore, search and about)

components.json

@@ -0,0 +1,17 @@
+{
+	"$schema": "https://shadcn-vue.com/schema.json",
+	"style": "new-york",
+	"typescript": true,
+	"tsConfigPath": "./.nuxt/tsconfig.json",
+	"tailwind": {
+		"config": "tailwind.config.ts",
+		"css": "styles/shadcn-ui.css",
+		"baseColor": "neutral",
+		"cssVariables": true
+	},
+	"framework": "nuxt",
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/utils/styles"
+	}
+}

components/app-footer.vue

@@ -12,9 +12,9 @@ const links = computed(() => {
 
 <template>
 	<footer class="border-t">
-		<div class="container flex items-center justify-between gap-4 py-8">
+		<div class="container flex items-center justify-between gap-4 py-4">
 			<nav :aria-label="t('AppFooter.navigation-secondary')">
-				<ul class="flex items-center gap-4" role="list">
+				<ul class="flex items-center gap-4 text-sm" role="list">
 					<li v-for="(link, key) of links" :key="key">
 						<NavLink :href="link.href">
 							{{ link.label }}

components/app-header.vue

@@ -1,32 +1,56 @@
 <script lang="ts" setup>
 import type { NavLinkProps } from "@/components/nav-link.vue";
+import { Separator } from "@/components/ui/separator";
 
 const t = useTranslations();
-
+const route = useRoute();
+const homeLink = { href: { path: "/" } };
 const links = computed(() => {
 	return {
-		home: { href: { path: "/" }, label: t("AppHeader.links.home") },
+		search: { href: { path: "/search" }, label: "SUCHE" },
+		explore: { href: { path: "/explore" }, label: "ENTDECKEN" },
+		about: { href: { path: "/about" }, label: "ÜBER DAS PROJEKT" },
 	} satisfies Record<string, { href: NavLinkProps["href"]; label: string }>;
 });
 </script>
 
 <template>
-	<header class="border-b">
-		<div class="container flex items-center justify-between gap-4 py-8">
+	<header class="border-b bg-frisch-marine">
+		<div class="w-full pb-4 pt-12">
 			<nav :aria-label="t('AppHeader.navigation-main')">
-				<ul class="flex items-center gap-4" role="list">
-					<li v-for="(link, key) of links" :key="key">
-						<NavLink :href="link.href">
-							{{ link.label }}
+				<ul class="container grid grid-cols-2 items-end" role="list">
+					<div class="text-4xl font-semibold text-frisch-orange">
+						<NavLink :href="homeLink.href">
+							Digitales Archiv
+							<br aria-hidden="true" />
+							Barbara Frischmuth
 						</NavLink>
-					</li>
+					</div>
+					<div
+						:class="
+							route.path !== '/'
+								? 'opacity-100 translate-y-0'
+								: 'opacity-0 translate-y-5 pointer-events-none'
+						"
+						class="ml-auto flex gap-x-4 font-semibold transition"
+					>
+						<li
+							v-for="(link, key, index) of links"
+							:key="key"
+							class="flex shrink-0 gap-x-4 text-xl"
+						>
+							<Separator v-if="index > 0" class="h-full w-0.5 bg-frisch-orange" />
+							<NavLink
+								:href="link.href"
+								:class="route.path === `/${key}` ? 'text-frisch-indigo' : 'text-frisch-orange'"
+								class="hover:text-frisch-indigo"
+							>
+								{{ link.label }}
+							</NavLink>
+						</li>
+					</div>
 				</ul>
 			</nav>
-
-			<div class="flex items-center gap-4">
-				<ColorSchemeSwitcher />
-				<LocaleSwitcher />
-			</div>
 		</div>
 	</header>
 </template>

components/search-data-table/data-table.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { type ColumnDef, FlexRender, getCoreRowModel, useVueTable } from "@tanstack/vue-table";
+
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import type { SearchResults } from "@/types/api.ts";
+
+const props = defineProps<{
+	data: SearchResults["results"];
+}>();
+
+const columns: Array<ColumnDef<SearchResults["results"][number]>> = [
+	{
+		accessorKey: "title",
+		header: () => h("div", "Titel"),
+		cell: ({ row }) => {
+			return h("div", row.getValue("title"));
+		},
+	},
+];
+
+const table = useVueTable({
+	get data() {
+		return props.data;
+	},
+	get columns() {
+		return columns;
+	},
+	getCoreRowModel: getCoreRowModel(),
+});
+</script>
+
+<template>
+	<div class="font-semibold text-frisch-indigo">Suchergebnisse ({{ table.getRowCount() }})</div>
+	<div class="rounded-md border">
+		<Table>
+			<TableHeader>
+				<TableCaption class="sr-only">
+					<span>Suchergebnisse</span>
+				</TableCaption>
+				<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+					<TableHead v-for="header in headerGroup.headers" :key="header.id">
+						<FlexRender
+							v-if="!header.isPlaceholder"
+							:render="header.column.columnDef.header"
+							:props="header.getContext()"
+						/>
+					</TableHead>
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				<template v-if="table.getRowModel().rows?.length">
+					<TableRow
+						v-for="row in table.getRowModel().rows"
+						:key="row.id"
+						:data-state="row.getIsSelected() ? 'selected' : undefined"
+					>
+						<TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
+							<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+						</TableCell>
+					</TableRow>
+				</template>
+				<template v-else>
+					<TableRow>
+						<TableCell :col-span="columns.length" class="h-24 text-center">
+							Keine Einträge zu dieser Suche.
+						</TableCell>
+					</TableRow>
+				</template>
+			</TableBody>
+		</Table>
+	</div>
+</template>

components/skip-link.vue

@@ -14,7 +14,7 @@ function onClick() {
 
 <template>
 	<NuxtLink
-		class="rounded fixed -translate-y-full bg-background px-4 py-3 text-on-background transition focus:translate-y-0"
+		class="fixed -translate-y-full rounded bg-white px-4 py-3 text-neutral-950 transition focus:translate-y-0"
 		:href="{ hash: `#${props.targetId}` }"
 		@click="onClick"
 	>

components/ui/button/Button.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Primitive, type PrimitiveProps } from "radix-vue";
+import type { HTMLAttributes } from "vue";
+
+import { cn } from "@/utils/styles";
+
+import { type ButtonVariants, buttonVariants } from ".";
+
+interface Props extends PrimitiveProps {
+	variant?: ButtonVariants["variant"];
+	size?: ButtonVariants["size"];
+	class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	as: "button",
+});
+</script>
+
+<template>
+	<Primitive
+		:as="as"
+		:as-child="asChild"
+		:class="cn(buttonVariants({ variant, size }), props.class)"
+	>
+		<slot />
+	</Primitive>
+</template>

components/ui/button/index.ts

@@ -0,0 +1,33 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export { default as Button } from "./Button.vue";
+
+export const buttonVariants = cva(
+	"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+				destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+				outline:
+					"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+				secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2",
+				xs: "h-7 rounded px-2",
+				sm: "h-8 rounded-md px-3 text-xs",
+				lg: "h-10 rounded-md px-8",
+				icon: "size-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

components/ui/card/Card.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+
+import { cn } from "@/utils/styles";
+
+const props = defineProps<{
+	class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+	<div :class="cn('border bg-card text-card-foreground shadow', props.class)">
+		<slot />
+	</div>
+</template>

components/ui/card/CardContent.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+
+import { cn } from "@/utils/styles";
+
+const props = defineProps<{
+	class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+	<div :class="cn('p-6 pt-0', props.class)">
+		<slot />
+	</div>
+</template>

components/ui/card/CardDescription.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+
+import { cn } from "@/utils/styles";
+
+const props = defineProps<{
+	class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+	<p :class="cn('text-sm text-muted-foreground', props.class)">
+		<slot />
+	</p>
+</template>

components/ui/card/CardFooter.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+
+import { cn } from "@/utils/styles";
+
+const props = defineProps<{
+	class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+	<div :class="cn('flex items-center p-6 pt-0', props.class)">
+		<slot />
+	</div>
+</template>

components/ui/card/CardHeader.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+
+import { cn } from "@/utils/styles";
+
+const props = defineProps<{
+	class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+	<div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+		<slot />
+	</div>
+</template>