Skip to content

Commit

Permalink
Give the Ui A prefix to fix issue related to radix vue components
Browse files Browse the repository at this point in the history
  • Loading branch information
@leamsigc
leamsigc committed Nov 1, 2024
1 parent 8ccc23e commit 3e04680
Show file tree
Hide file tree
Showing 20 changed files with 195 additions and 285 deletions.
15 changes: 7 additions & 8 deletions app/components/content/Benefits.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<script setup lang="ts">
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
Sparkle,
Expand Down Expand Up @@ -81,12 +80,12 @@ const iconMap: Record<
</div>

<div class="grid lg:grid-cols-2 gap-4 w-full">
<Card
<UiCard
v-for="({ icon, title, description }, index) in benefitList"
:key="title"
class="bg-muted/50 dark:bg-card hover:bg-background dark:hover:bg-background transition-all delay-75 group/number"
>
<CardHeader>
<UiCardHeader>
<div class="flex justify-between">
<component
class="size-8 mb-6 text-primary"
Expand All @@ -99,13 +98,13 @@ const iconMap: Record<
>
</div>

<CardTitle>{{ title }}</CardTitle>
</CardHeader>
<UiCardTitle>{{ title }}</UiCardTitle>
</UiCardHeader>

<CardContent class="text-muted-foreground">
<UiCardContent class="text-muted-foreground">
{{ description }}
</CardContent>
</Card>
</UiCardContent>
</UiCard>
</div>
</div>
</section>
Expand Down
37 changes: 14 additions & 23 deletions app/components/content/Community.vue
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,4 @@
<script setup lang="ts">
import {
Card,
CardHeader,
CardTitle,
CardFooter,
CardContent,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
</script>

Expand All @@ -16,14 +7,14 @@ import { Button } from "@/components/ui/button";
id="community"
class="py-12"
>
<hr />
<hr >
<div class="container py-20 sm:py-20">
<div class="lg:w-[60%] mx-auto">
<Card
<UiCard
class="bg-background shadow-none text-center flex flex-col items-center justify-center border-0"
>
<CardHeader>
<CardTitle class="text-4xl md:text-5xl font-bold">
<UiCardHeader>
<UiCardTitle class="text-4xl md:text-5xl font-bold">
<Icon
class="w-20 h-20 m-auto mb-4"
name="lucide:discord"
Expand All @@ -34,26 +25,26 @@ import { Button } from "@/components/ui/button";
>
Community?
</span>
</CardTitle>
</CardHeader>
<CardContent class="lg:w-[80%] text-xl text-muted-foreground">
</UiCardTitle>
</UiCardHeader>
<UiCardContent class="lg:w-[80%] text-xl text-muted-foreground">
Join our vibrant Discord community! Connect, share, and grow with
like-minded enthusiasts. Click to dive in! 🚀
</CardContent>
</UiCardContent>

<CardFooter>
<Button as-child>
<UiCardFooter>
<UiButton as-child>
<a
href="https://discord.com/"
target="_blank"
>
Join Discord
</a>
</Button>
</CardFooter>
</Card>
</UiButton>
</UiCardFooter>
</UiCard>
</div>
</div>
<hr />
<hr >
</section>
</template>
95 changes: 41 additions & 54 deletions app/components/content/Contact.vue
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,4 @@
<script setup lang="ts">
import { Card, CardHeader, CardContent, CardFooter } from "../ui/card";
import { Label } from "../ui/label";
import { Input } from "../ui/input";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from "../ui/select";
import { Textarea } from "../ui/textarea";
import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
interface ContactFormeProps {
Expand All @@ -30,7 +17,7 @@ const contactForm = reactive<ContactFormeProps>({
message: "",
});
const invalidInputForm = ref<boolean>(false);
const invalidUiInputForm = ref<boolean>(false);
const handleSubmit = () => {
const { firstName, lastName, email, subject, message } = contactForm;
Expand Down Expand Up @@ -102,17 +89,17 @@ const handleSubmit = () => {
</div>

<!-- form -->
<Card class="bg-muted/60 dark:bg-card">
<CardHeader class="text-primary text-2xl"/>
<CardContent>
<UiCard class="bg-muted/60 dark:bg-card">
<UiCardHeader class="text-primary text-2xl"/>
<UiCardContent>
<form
class="grid gap-4"
@submit.prevent="handleSubmit"
>
<div class="flex flex-col md:flex-row gap-8">
<div class="flex flex-col w-full gap-1.5">
<Label for="first-name">First Name</Label>
<Input
<UiLabel for="first-name">First Name</UiLabel>
<UiInput
id="first-name"
v-model="contactForm.firstName"
type="text"
Expand All @@ -121,8 +108,8 @@ const handleSubmit = () => {
</div>

<div class="flex flex-col w-full gap-1.5">
<Label for="last-name">Last Name</Label>
<Input
<UiLabel for="last-name">Last Name</UiLabel>
<UiInput
id="last-name"
v-model="contactForm.lastName"
type="text"
Expand All @@ -132,8 +119,8 @@ const handleSubmit = () => {
</div>

<div class="flex flex-col gap-1.5">
<Label for="email">Email</Label>
<Input
<UiLabel for="email">Email</UiLabel>
<UiInput
id="email"
v-model="contactForm.email"
type="email"
Expand All @@ -142,57 +129,57 @@ const handleSubmit = () => {
</div>

<div class="flex flex-col gap-1.5">
<Label for="subject">Subject</Label>

<Select v-model="contactForm.subject">
<SelectTrigger>
<SelectValue placeholder="Select a subject" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="Web Development">
<UiLabel for="subject">Subject</UiLabel>

<UiSelect v-model="contactForm.subject">
<UiSelectTrigger>
<UiSelectValue placeholder="UiSelect a subject" />
</UiSelectTrigger>
<UiSelectContent>
<UiSelectGroup>
<UiSelectItem value="Web Development">
Web Development
</SelectItem>
<SelectItem value="Mobile Development">
</UiSelectItem>
<UiSelectItem value="Mobile Development">
Mobile Development
</SelectItem>
<SelectItem value="Figma Design"> Figma Design </SelectItem>
<SelectItem value="REST API "> REST API </SelectItem>
<SelectItem value="FullStack Project">
</UiSelectItem>
<UiSelectItem value="Figma Design"> Figma Design </UiSelectItem>
<UiSelectItem value="REST API "> REST API </UiSelectItem>
<UiSelectItem value="FullStack Project">
FullStack Project
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</UiSelectItem>
</UiSelectGroup>
</UiSelectContent>
</UiSelect>
</div>

<div class="flex flex-col gap-1.5">
<Label for="message">Message</Label>
<Textarea
<UiLabel for="message">Message</UiLabel>
<UiTextarea
id="message"
v-model="contactForm.message"
placeholder="Your message..."
rows="5"
/>
</div>

<Alert
v-if="invalidInputForm"
<UiAlert
v-if="invalidUiInputForm"
variant="destructive"
>
<Icon name="lucide:alert-circle" class="w-4 h-4" />
<AlertTitle>Error</AlertTitle>
<AlertDescription>
<UiAlertTitle>Error</UiAlertTitle>
<UiAlertDescription>
There is an error in the form. Please check your input.
</AlertDescription>
</Alert>
</UiAlertDescription>
</UiAlert>

<Button class="mt-4">Send message</Button>
<UiButton class="mt-4">Send message</UiButton>
</form>
</CardContent>
</UiCardContent>

<CardFooter/>
</Card>
<UiCardFooter/>
</UiCard>
</section>
</section>
</template>
19 changes: 6 additions & 13 deletions app/components/content/FAQ.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
<script setup lang="ts">
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
interface FAQProps {
question: string;
answer: string;
Expand Down Expand Up @@ -58,21 +51,21 @@ const FAQList: FAQProps[] = [
</h2>
</div>

<Accordion
<UiAccordion
type="single"
collapsible
class="AccordionRoot"
>
<AccordionItem
<UiAccordionItem
v-for="{ question, answer, value } in FAQList"
:key="value"
:value="value"
>
<AccordionTrigger class="text-left"> {{ question }} </AccordionTrigger>
<UiAccordionTrigger class="text-left"> {{ question }} </UiAccordionTrigger>

<AccordionContent>{{ answer }}</AccordionContent>
</AccordionItem>
</Accordion>
<UiAccordionContent>{{ answer }}</UiAccordionContent>
</UiAccordionItem>
</UiAccordion>

<h3 class="font-medium mt-4">
Still have questions?
Expand Down
17 changes: 8 additions & 9 deletions app/components/content/Features.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<script setup lang="ts">
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
Paintbrush,
Expand Down Expand Up @@ -103,8 +102,8 @@ const iconMap: Record<
v-for="{ icon, title, description } in featureList"
:key="title"
>
<Card class="h-full bg-background border-0 shadow-none">
<CardHeader class="flex justify-center items-center">
<UiCard class="h-full bg-background border-0 shadow-none">
<UiCardHeader class="flex justify-center items-center">
<div
class="bg-primary/20 p-2 rounded-full ring-8 ring-primary/10 mb-4"
>
Expand All @@ -114,15 +113,15 @@ const iconMap: Record<
/>
</div>

<CardTitle>
<UiCardTitle>
{{ title }}
</CardTitle>
</CardHeader>
</UiCardTitle>
</UiCardHeader>

<CardContent class="text-muted-foreground text-center">
<UiCardContent class="text-muted-foreground text-center">
{{ description }}
</CardContent>
</Card>
</UiCardContent>
</UiCard>
</div>
</div>
</section>
Expand Down
14 changes: 7 additions & 7 deletions app/components/content/Hero.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ const mode = useColorMode();
class="grid place-items-center lg:max-w-screen-xl gap-8 mx-auto py-20 md:py-32"
>
<div class="text-center space-y-8">
<Badge
<UiBadge
variant="outline"
class="text-sm py-2"
>
<span class="mr-2 text-primary">
<Badge>New</Badge>
<UiBadge>New</UiBadge>
</span>
<span> Design is out now! </span>
</Badge>
</UiBadge>

<div
class="max-w-screen-md mx-auto text-center text-5xl md:text-6xl font-bold"
Expand All @@ -38,15 +38,15 @@ const mode = useColorMode();
</p>

<div class="space-y-4 md:space-y-0 md:space-x-4">
<Button class="w-5/6 md:w-1/4 font-bold group/arrow">
<UiButton class="w-5/6 md:w-1/4 font-bold group/arrow">
Get Started
<Icon
name="lucide:arrow-right"
class="size-5 ml-2 group-hover/arrow:translate-x-1 transition-transform"
/>
</Button>
</UiButton>

<Button
<UiButton
as-child
variant="secondary"
class="w-5/6 md:w-1/4 font-bold"
Expand All @@ -57,7 +57,7 @@ const mode = useColorMode();
>
Github respository
</NuxtLink>
</Button>
</UiButton>
</div>
</div>

Expand Down
Loading

0 comments on commit 3e04680

Please sign in to comment.