45 lines
1.8 KiB
Vue
45 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import { useBreadcrumbStore } from "~/stores/breadcrumbs";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
import { useRuntimeConfig, useSeoMeta } from "#app";
|
|
|
|
const config = useRuntimeConfig();
|
|
|
|
const lastClicked = ref<string>("None");
|
|
|
|
const buttonClicked = (variant: string) => {
|
|
lastClicked.value = variant;
|
|
};
|
|
|
|
const breadcrumbStore = useBreadcrumbStore();
|
|
breadcrumbStore.setBreadcrumbs([{ label: "Homepage", to: "/" }]);
|
|
|
|
useSeoMeta({
|
|
title: "Glowing Fiesta - Homepage",
|
|
ogTitle: "Glowing Fiesta - Homepage",
|
|
description: "This is the homepage of a very nice all-purpose application",
|
|
ogDescription: "This is the homepage of a very nice all-purpose application",
|
|
ogImage: config.public.hostUrl + "/images/human.png",
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
|
|
<div class="bg-muted/50 aspect-video rounded-xl" />
|
|
<div class="bg-muted/50 aspect-video rounded-xl flex items-center justify-center gap-2">
|
|
<span class="text-primary">Last clicked button:</span>
|
|
<span class="font-bold text-lime-500">{{ lastClicked }}</span>
|
|
</div>
|
|
<div class="bg-muted/50 aspect-video rounded-xl" />
|
|
</div>
|
|
<div class="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min flex items-center justify-center gap-2">
|
|
<Button variant="default" @click="buttonClicked('default')">Default</Button>
|
|
<Button variant="outline" @click="buttonClicked('outline')">Outline</Button>
|
|
<Button variant="ghost" @click="buttonClicked('ghost')">Ghost</Button>
|
|
<Button variant="link" @click="buttonClicked('link')">Link</Button>
|
|
<Button variant="secondary" @click="buttonClicked('secondary')">Secondary</Button>
|
|
<Button variant="destructive" @click="buttonClicked('destructive')">Destructive</Button>
|
|
</div>
|
|
</template>
|