public/glowing-fiesta
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Created outlined button and redesigned homepage. #3

Manually merged
liviu merged 1 commit from GF-16-custom-button into production 2026-01-16 11:13:43 +01:00
Conversation 0 Commits 1 Files changed 4 +18 -17
4 changed files with 18 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/components/ui/button/index.ts
View file

@ -16,6 +16,8 @@ export const buttonVariants = cva(
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline", link: "text-primary underline-offset-4 hover:underline",
outlined:
"border border-primary/80 hover:border-primary text-primary/80 bg-background shadow-xs hover:bg-accent hover:text-primary dark:bg-input/30 dark:hover:bg-input/50",
}, },
size: { size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3", default: "h-9 px-4 py-2 has-[>svg]:px-3",

27
app/pages/index.vue
View file

@ -26,20 +26,19 @@ useSeoMeta({
</script> </script>
<template> <template>
<div class="grid auto-rows-min gap-4 md:grid-cols-3"> <div class="bg-muted/50 rounded-xl flex py-4 items-center justify-center gap-2">
<div class="bg-muted/50 aspect-video rounded-xl" /> <span class="text-primary">Last clicked button:</span>
<div class="bg-muted/50 aspect-video rounded-xl flex items-center justify-center gap-2"> <span class="font-bold text-lime-500">{{ lastClicked }}</span>
<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>
<div class="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min flex items-center justify-center gap-2"> <div class="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min flex items-start justify-center">
<Button variant="default" @click="buttonClicked('default')">Default</Button> <div class="grid grid-cols-1 md:grid-cols-3 gap-4 py-4">
<Button variant="outline" @click="buttonClicked('outline')">Outline</Button> <Button variant="default" @click="buttonClicked('default')">Default</Button>
<Button variant="ghost" @click="buttonClicked('ghost')">Ghost</Button> <Button variant="secondary" @click="buttonClicked('secondary')">Secondary</Button>
<Button variant="link" @click="buttonClicked('link')">Link</Button> <Button variant="destructive" @click="buttonClicked('destructive')">Destructive</Button>
<Button variant="secondary" @click="buttonClicked('secondary')">Secondary</Button> <Button variant="outline" @click="buttonClicked('outline')">Outline</Button>
<Button variant="destructive" @click="buttonClicked('destructive')">Destructive</Button> <Button variant="outlined" @click="buttonClicked('outlined')">Outlined</Button>
<Button variant="ghost" @click="buttonClicked('ghost')">Ghost</Button>
<Button variant="link" @click="buttonClicked('link')">Link</Button>
</div>
</div> </div>
</template> </template>

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "glowing-fiesta", "name": "glowing-fiesta",
"version": "0.0.2", "version": "0.0.3",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "glowing-fiesta", "name": "glowing-fiesta",
"version": "0.0.2", "version": "0.0.3",
"hasInstallScript": true, "hasInstallScript": true,
"dependencies": { "dependencies": {
"@pinia/nuxt": "^0.11.3", "@pinia/nuxt": "^0.11.3",

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "glowing-fiesta", "name": "glowing-fiesta",
"version": "0.0.2", "version": "0.0.3",
"type": "module", "type": "module",
"private": true, "private": true,
"scripts": { "scripts": {