Skip to content

Commit

Permalink
Update the other components that are using the Button to global Ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@leamsigc
leamsigc committed Nov 1, 2024
1 parent 3e04680 commit 8f54ef2
Show file tree
Hide file tree
Showing 18 changed files with 406 additions and 379 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"vue3snippets.enable-compile-vue-file-on-did-save-code": true
}
236 changes: 91 additions & 145 deletions app/components/content/Navbar.vue
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,40 @@
<script lang="ts" setup>
/**
*
* Component Description:Desc
*
* @author Reflect-Media <reflect.media GmbH>
* @version 0.0.1
*
* @todo [ ] Test the component
* @todo [ ] Integration test.
* @todo [✔] Update the typescript.
*/
const mode = useColorMode();
interface RouteProps {
href: string;
label: string;
}
interface FeatureProps {
title: string;
description: string;
}
const routeList: RouteProps[] = [
{
href: "#testimonials",
label: "Testimonials",
},
{
href: "#team",
label: "Team",
},
{
href: "#contact",
label: "Contact",
},
{
href: "#faq",
label: "FAQ",
},
];
const featureList: FeatureProps[] = [
{
title: "Showcase Your Value ",
description: "Highlight how your product solves user problems.",
},
{
title: "Build Trust",
description:
"Leverages social proof elements to establish trust and credibility.",
},
{
title: "Capture Leads",
description:
"Make your lead capture form visually appealing and strategically.",
},
];
const isOpen = ref<boolean>(false);
const { data } = await useAsyncData("nav_en", () =>
queryContent("/").where({ _partial: true, title: "nav" }).findOne()
);
</script>

<template>
<section
class="w-[90%] md:w-[70%] lg:w-[75%] lg:max-w-full mx-auto top-0 sticky border z-40 rounded-b-2xl flex justify-between items-center p-2 bg-card bg-blend-difference shadow-md"
:class="{
'shadow-light': mode.value === 'light',
'shadow-dark': mode.value === 'dark',
}"
class="w-[90%] md:w-[70%] lg:w-[75%] lg:max-w-full mx-auto top-0 sticky border z-40 rounded-b-2xl flex justify-between items-center p-2 bg-card bg-blend-difference shadow-md"
:class="{
'shadow-light': mode.value === 'light',
'shadow-dark': mode.value === 'dark',
}"
>
<header
:class="{
'w-[90%] md:w-[70%] lg:w-[75%] lg:max-w-screen-2xl mx-auto sticky z-40 flex justify-between items-center p-2 ': true,
}"
>
<NuxtLink
href="/"
class="font-bold text-lg flex items-center"
>
<Icon
<NuxtLink href="/" class="font-bold text-lg flex items-center">
<Icon
name="lucide:arrow-down"
class="bg-gradient-to-tr from-primary via-primary/70 to-primary rounded-lg w-9 h-9 mr-2 border text-white"
/>
Expand All @@ -79,11 +44,7 @@ const isOpen = ref<boolean>(false);
<div class="flex items-center lg:hidden">
<UiSheet v-model:open="isOpen">
<UiSheetTrigger as-child as="div">
<Icon
name="lucide:menu"
class="cursor-pointer"
@click="isOpen = true"
/>
<Icon name="lucide:menu" class="cursor-pointer" @click="isOpen = true" />
</UiSheetTrigger>

<UiSheetContent
Expand All @@ -93,11 +54,8 @@ const isOpen = ref<boolean>(false);
<div>
<UiSheetHeader class="mb-4 ml-4">
<UiSheetTitle class="flex items-center">
<NuxtLink
href="/"
class="flex items-center"
>
<Icon
<NuxtLink href="/" class="flex items-center">
<Icon
name="lucide:arrow-left"
class="bg-gradient-to-tr from-primary/70 via-primary to-primary/70 rounded-lg size-9 mr-2 border text-white"
/>
Expand All @@ -108,17 +66,14 @@ const isOpen = ref<boolean>(false);

<div class="flex flex-col gap-2">
<UiButton
v-for="{ href, label } in routeList"
:key="label"
v-for="{ href, name } in data.ShortLinks"
:key="name"
as-child
variant="ghost"
class="justify-start text-base"
>
<NuxtLink
:href="href"
@click="isOpen = false"
>
{{ label }}
<NuxtLink :href="href" @click="isOpen = false">
{{ name }}
</NuxtLink>
</UiButton>
</div>
Expand All @@ -136,95 +91,86 @@ const isOpen = ref<boolean>(false);
<!-- Desktop -->
<UiNavigationMenu class="hidden lg:block">
<UiNavigationMenuList>
<UiNavigationMenuItem>
<UiNavigationMenuTrigger class="bg-card text-base">
Features
</UiNavigationMenuTrigger>
<UiNavigationMenuContent>
<div class="grid w-[600px] grid-cols-2 gap-5 p-4">
<NuxtImg
src="https://www.radix-vue.com/logo.svg"
alt="Beach"
class="h-full w-full rounded-md object-cover"
/>
<ul class="flex flex-col gap-2">
<li
v-for="{ title, description } in featureList"
:key="title"
class="rounded-md p-3 text-sm hover:bg-muted"
<UiNavigationMenuItem v-for="menuLink in data.MenuLinks" :key="menuLink.name">
<template v-if="!menuLink.children">
<UiNavigationMenuLink as-child>
<UiButton as-child variant="ghost" class="justify-start text-base">
<NuxtLink :href="menuLink.href" prefetch>
{{ menuLink.name }}
</NuxtLink>
</UiButton>
</UiNavigationMenuLink>
</template>
<template v-else>
<UiNavigationMenuTrigger class="bg-card text-base">
{{ menuLink.name }}
</UiNavigationMenuTrigger>
<UiNavigationMenuContent>
<div
class="grid grid-cols-1 gap-5 bg-background p-6 py-5 ring-1 ring-muted lg:w-[750px] lg:grid-cols-2 xl:w-[1000px] xl:grid-cols-3"
>
<NuxtImg
:src="menuLink.image"
alt="Beach"
class="h-full w-full rounded-md object-cover"
/>
<div
v-for="(item, index) in menuLink.children"
:key="`${item.name}-${index}`"
>
<p class="mb-1 font-semibold leading-none text-foreground">
{{ title }}
<p class="mb-5 text-sm font-semibold capitalize text-primary">
{{ item.name }}
</p>
<p class="line-clamp-2 text-muted-foreground">
{{ description }}
</p>
</li>
</ul>
</div>
</UiNavigationMenuContent>
</UiNavigationMenuItem>

<UiNavigationMenuItem>
<UiNavigationMenuLink as-child>
<UiButton
v-for="{ href, label } in routeList"
:key="label"
as-child
variant="ghost"
class="justify-start text-base"
>
<NuxtLink :href="href" prefetch >
{{ label }}
</NuxtLink>
</UiButton>
</UiNavigationMenuLink>
<ul class="flex w-full flex-col gap-2">
<li v-for="(child, k) in item.children" :key="k">
<UiNavigationMenuLink class="data-[active]:bg-muted/80" as-child>
<NuxtLink
:to="child.href"
class="flex gap-4 rounded-md p-3 transition hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
>
<Icon
v-if="child.icon"
:name="child.icon"
class="mt-px h-5 w-5 shrink-0 text-primary"
/>
<div class="flex flex-col gap-1.5 leading-none">
<p class="text-sm font-semibold">
{{ child.name }}
</p>
<p
class="text-sm text-muted-foreground"
v-html="child.description"
/>
</div>
</NuxtLink>
</UiNavigationMenuLink>
</li>
</ul>
</div>
</div>
</UiNavigationMenuContent>
</template>
</UiNavigationMenuItem>
</UiNavigationMenuList>
</UiNavigationMenu>

<div class="hidden lg:flex">
<ToggleTheme />

<UiButton
as-child
size="sm"
variant="ghost"
aria-label="View on GitHub"
>
<UiButton as-child size="sm" variant="ghost" aria-label="View on GitHub">
<NuxtLink
aria-label="View on GitHub"
href="https://github.com/leoMirandaa/shadcn-vue-landing-page.git"
target="_blank"
>
<Icon name="mdi:github" />
<Icon name="mdi:github" />
</NuxtLink>
</UiButton>
<UiButton
as-child
size="sm"
variant="ghost"
aria-label="View on GitHub"
>
<NuxtLink
aria-label="Login"
to="/login"
>
Login
</NuxtLink>
<UiButton as-child size="sm" variant="ghost" aria-label="View on GitHub">
<NuxtLink aria-label="Login" to="/login"> Login </NuxtLink>
</UiButton>
<UiButton
as-child
size="sm"
variant="ghost"
aria-label="Register"
>
<NuxtLink
aria-label="Register"
to="/register"
>
Register
</NuxtLink>
<UiButton as-child size="sm" variant="ghost" aria-label="Register">
<NuxtLink aria-label="Register" to="/register"> Register </NuxtLink>
</UiButton>
</div>
</header>
Expand Down
18 changes: 6 additions & 12 deletions app/components/content/ToggleTheme.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,28 +7,22 @@ const HandleThemeChange = () => {
</script>

<template>
<Button
<UiButton
size="sm"
variant="ghost"
class="w-full justify-start"
@click="HandleThemeChange"
>
<div
v-if="$colorMode.value == 'light'"
class="flex gap-2"
>
<Icon name="lucide:moon" class="size-5" />
<div v-if="$colorMode.value == 'light'" class="flex gap-2">
<Icon name="lucide:moon" class="size-5" />
<span class="block lg:hidden"> Dark </span>
</div>

<div
v-else
class="flex gap-2"
>
<Icon name="lucide:sun" class="size-5" />
<div v-else class="flex gap-2">
<Icon name="lucide:sun" class="size-5" />
<span class="block lg:hidden">Light</span>
</div>

<span class="sr-only">Toggle theme</span>
</Button>
</UiButton>
</template>
Loading

0 comments on commit 8f54ef2

Please sign in to comment.