fix(website): ran prettier fix

website/app/(home)/page.tsx

@@ -1,10 +1,10 @@
-"use client";
-import { ModeToggle } from "@/components/mode-toggle";
-import Hero from "@/app/(home)/sections/hero";
-import Props from "@/app/(home)/sections/props";
-import Setup from "@/app/(home)/sections/setup";
-import Variants from "@/app/(home)/sections/variants";
-import React from "react";
+'use client';
+import { ModeToggle } from '@/components/mode-toggle';
+import Hero from '@/app/(home)/sections/hero';
+import Props from '@/app/(home)/sections/props';
+import Setup from '@/app/(home)/sections/setup';
+import Variants from '@/app/(home)/sections/variants';
+import React from 'react';
 
 export default function Home() {
   return (
@@ -32,10 +32,7 @@ export default function Home() {
                 </a>
               </li>
               <li>
-                <a
-                  href="#variants"
-                  className="text-muted-foreground font-light"
-                >
+                <a href="#variants" className="text-muted-foreground font-light">
                   Variants
                 </a>
               </li>
@@ -51,9 +48,9 @@ export default function Home() {
       <footer className="py-6 md:px-8 md:py-0 border-t">
         <div className="container max-w-5xl flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
           <p className="text-center text-sm leading-loose text-muted-foreground md:text-left">
-            Built by{" "}
+            Built by{' '}
             <a
-              href={"https://twitter.com/jal_eelll"}
+              href={'https://twitter.com/jal_eelll'}
               target="_blank"
               rel="noreferrer"
               className="font-medium underline underline-offset-4"

website/app/(home)/sections/hero.tsx

@@ -1,27 +1,19 @@
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { Tag, TagInput } from "@/components/tag/tag-input";
-import Link from "next/link";
-import { Button, buttonVariants } from "@/components/ui/button";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import React from "react";
-import { toast } from "@/components/ui/use-toast";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { Tag, TagInput } from '@/components/tag/tag-input';
+import Link from 'next/link';
+import { Button, buttonVariants } from '@/components/ui/button';
+import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import React from 'react';
+import { toast } from '@/components/ui/use-toast';
 
 const FormSchema = z.object({
   topics: z.array(
     z.object({
       id: z.string(),
       text: z.string(),
-    })
+    }),
   ),
 });
 
@@ -36,7 +28,7 @@ export default function Hero() {
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
     toast({
-      title: "You submitted the following values:",
+      title: 'You submitted the following values:',
       description: (
         <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
           <code className="text-white">{JSON.stringify(data, null, 2)}</code>
@@ -48,28 +40,25 @@ export default function Hero() {
   return (
     <section className="z-10 max-w-5xl w-full flex flex-col items-center text-center gap-5">
       <div className="z-10 w-full flex flex-col items-center text-center gap-5">
-        <h1 className="scroll-m-20 text-4xl font-bold tracking-tight">
-          Shadcn Tag Input
-        </h1>
+        <h1 className="scroll-m-20 text-4xl font-bold tracking-tight">Shadcn Tag Input</h1>
         <p className="text-muted-foreground max-w-[450px]">
-          An implementation of a Tag Input component built on top of Shadcn
-          UI&apos;s input component.
+          An implementation of a Tag Input component built on top of Shadcn UI&apos;s input component.
         </p>
         <div className="flex gap-2 mt-1">
           <Link
             href="#try"
             className={`${buttonVariants({
-              variant: "default",
-              size: "lg",
+              variant: 'default',
+              size: 'lg',
             })} min-w-[150px] shadow-sm`}
           >
             Try it out
           </Link>
           <Link
             href="https://github.com/JaleelB/shadcn-tag-input"
             className={`${buttonVariants({
-              variant: "secondary",
-              size: "lg",
+              variant: 'secondary',
+              size: 'lg',
             })} shadow-sm`}
           >
             Github
@@ -81,10 +70,7 @@ export default function Hero() {
         <div className="w-full relative my-4 flex flex-col space-y-2">
           <div className="preview flex min-h-[350px] w-full justify-center p-10 items-center mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border">
             <Form {...form}>
-              <form
-                onSubmit={form.handleSubmit(onSubmit)}
-                className="space-y-8 flex flex-col items-start"
-              >
+              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 flex flex-col items-start">
                 <FormField
                   control={form.control}
                   name="topics"
@@ -99,7 +85,7 @@ export default function Hero() {
                           className="sm:min-w-[450px]"
                           setTags={(newTags) => {
                             setTags(newTags);
-                            setValue("topics", newTags as [Tag, ...Tag[]]);
+                            setValue('topics', newTags as [Tag, ...Tag[]]);
                           }}
                         />
                       </FormControl>

website/app/(home)/sections/props.tsx

@@ -1,47 +1,36 @@
-import React from "react";
-import { Tag, TagInput } from "../../../components/tag/tag-input";
-import { Label } from "../../../components/ui/label";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { propOption, tagInputProps } from "@/utils/utils";
-import { cn, uuid } from "@/lib/utils";
-import { CheckCircle } from "lucide-react";
+import React from 'react';
+import { Tag, TagInput } from '../../../components/tag/tag-input';
+import { Label } from '../../../components/ui/label';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { propOption, tagInputProps } from '@/utils/utils';
+import { cn, uuid } from '@/lib/utils';
+import { CheckCircle } from 'lucide-react';
 
 export default function Props() {
   const tags: Tag[] = [
-    { id: uuid(), text: "Sports" },
-    { id: uuid(), text: "Programming" },
-    { id: uuid(), text: "Travel" },
+    { id: uuid(), text: 'Sports' },
+    { id: uuid(), text: 'Programming' },
+    { id: uuid(), text: 'Travel' },
   ];
 
   const autoCompleteOptions = [
     ...tags,
-    { id: uuid(), text: "Food" },
-    { id: uuid(), text: "Movies" },
-    { id: uuid(), text: "Art" },
-    { id: uuid(), text: "Books" },
+    { id: uuid(), text: 'Food' },
+    { id: uuid(), text: 'Movies' },
+    { id: uuid(), text: 'Art' },
+    { id: uuid(), text: 'Books' },
   ];
 
   const [autocompleteTags, setAutocompleteTags] = React.useState<Tag[]>([]);
   const [maxTags, setMaxTags] = React.useState<Tag[]>([]);
   const [truncateTags, setTruncateTags] = React.useState<Tag[]>(tags);
-  const [allowDuplicatesTags, setAllowDuplicatesTags] = React.useState<Tag[]>(
-    []
-  );
+  const [allowDuplicatesTags, setAllowDuplicatesTags] = React.useState<Tag[]>([]);
   const [directionTags, setDirectionTags] = React.useState<Tag[]>(tags);
   const [customRenderTags, setCustomRenderTags] = React.useState<Tag[]>(tags);
-  const [allowDraggableTags, setAllowDraggableTags] =
-    React.useState<Tag[]>(tags);
+  const [allowDraggableTags, setAllowDraggableTags] = React.useState<Tag[]>(tags);
   const [clearAllTags, setClearAllTags] = React.useState<Tag[]>(tags);
-  const [inputFieldPositionTags, setInputFieldPositionTags] =
-    React.useState<Tag[]>(tags);
+  const [inputFieldPositionTags, setInputFieldPositionTags] = React.useState<Tag[]>(tags);
   const [usePopoverTags, setUsePopoverTags] = React.useState<Tag[]>([]);
 
   const renderCustomTag = (tag: Tag) => {
@@ -63,9 +52,7 @@ export default function Props() {
         Props
       </h2>
       <div className="w-full">
-        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">
-          Autocomplete
-        </h3>
+        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Autocomplete</h3>
         <p className="leading-7 [&amp;:not(:first-child)]:mt-6 text-normal">
           Enable or disable the autocomplete feature for the tag input.
         </p>
@@ -87,12 +74,9 @@ export default function Props() {
         </div>
       </div>
       <div className="w-full">
-        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">
-          Custom tag render
-        </h3>
+        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Custom tag render</h3>
         <p className="leading-7 [&amp;:not(:first-child)]:mt-6 text-normal">
-          Replace the standard tag appearance with your own custom-designed
-          tags.
+          Replace the standard tag appearance with your own custom-designed tags.
         </p>
         <div className="preview flex min-h-[350px] w-full justify-center p-10 items-center mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border">
           <div className="space-y-2">
@@ -110,9 +94,7 @@ export default function Props() {
         </div>
       </div>
       <div className="w-full">
-        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">
-          Max tags
-        </h3>
+        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Max tags</h3>
         <p className="leading-7 [&amp;:not(:first-child)]:mt-6 text-normal">
           Set the maximum number of tags that can be added.
         </p>
@@ -133,9 +115,7 @@ export default function Props() {
         </div>
       </div>
       <div className="w-full">
-        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">
-          Draggable
-        </h3>
+        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Draggable</h3>
         <p className="leading-7 [&amp;:not(:first-child)]:mt-6 text-normal">
           Allow tags to be dragged and dropped to reorder them.
         </p>
@@ -155,12 +135,9 @@ export default function Props() {
         </div>
       </div>
       <div className="w-full">
-        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">
-          Tag Popover
-        </h3>
+        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Tag Popover</h3>
         <p className="leading-7 [&amp;:not(:first-child)]:mt-6 text-normal">
-          Allows users to view all entered tags in a popover overlay, offering
-          easier management of tags.
+          Allows users to view all entered tags in a popover overlay, offering easier management of tags.
         </p>
         <div className="preview flex min-h-[350px] w-full justify-center p-10 items-center mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border">
           <div className="space-y-2">
@@ -178,12 +155,9 @@ export default function Props() {
         </div>
       </div>
       <div className="w-full">
-        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">
-          Truncate
-        </h3>
+        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Truncate</h3>
         <p className="leading-7 [&amp;:not(:first-child)]:mt-6 text-normal">
-          Prevent tags from overflowing the tag input by specifying the maximum
-          number of characters to display.
+          Prevent tags from overflowing the tag input by specifying the maximum number of characters to display.
         </p>
         <div className="preview flex min-h-[350px] w-full justify-center p-10 items-center mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border">
           <div className="space-y-2">
@@ -201,12 +175,8 @@ export default function Props() {
         </div>
       </div>
       <div className="w-full">
-        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">
-          Clear all tags
-        </h3>
-        <p className="leading-7 [&amp;:not(:first-child)]:mt-6 text-normal">
-          Clear all tags from the tag input.
-        </p>
+        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Clear all tags</h3>
+        <p className="leading-7 [&amp;:not(:first-child)]:mt-6 text-normal">Clear all tags from the tag input.</p>
         <div className="preview flex min-h-[350px] w-full justify-center p-10 items-center mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border">
           <div className="space-y-2">
             <Label htmlFor="">Topics</Label>
@@ -226,9 +196,7 @@ export default function Props() {
         </div>
       </div>
       <div className="w-full">
-        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">
-          Allow duplicate tags
-        </h3>
+        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Allow duplicate tags</h3>
         <p className="leading-7 [&amp;:not(:first-child)]:mt-6 text-normal">
           Allow duplicate tags to be added to the tag input.
         </p>
@@ -248,20 +216,13 @@ export default function Props() {
         </div>
       </div>
       <div className="w-full">
-        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">
-          Input field position
-        </h3>
+        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Input field position</h3>
         <p className="leading-7 [&amp;:not(:first-child)]:mt-6 text-normal">
-          Change the position of the input field to be inline or stacked in
-          relation to the tags.
+          Change the position of the input field to be inline or stacked in relation to the tags.
         </p>
         <div className="preview flex min-h-[350px] w-full justify-center p-10 items-center mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border">
           <Tabs defaultValue="bottom" className="w-full mt-4">
-            <TabsList
-              className={cn(
-                "mb-4 w-full overflow-x-auto h-auto overflow-y-hidden justify-start"
-              )}
-            >
+            <TabsList className={cn('mb-4 w-full overflow-x-auto h-auto overflow-y-hidden justify-start')}>
               <TabsTrigger value="bottom">Bottom</TabsTrigger>
               <TabsTrigger value="top">Top</TabsTrigger>
               <TabsTrigger value="inline">Inline</TabsTrigger>
@@ -308,19 +269,13 @@ export default function Props() {
         </div>
       </div>
       <div className="w-full">
-        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">
-          Tag direction
-        </h3>
+        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Tag direction</h3>
         <p className="leading-7 [&amp;:not(:first-child)]:mt-6 text-normal">
           Change the direction of the tag layout from row to column.
         </p>
         <div className="preview flex min-h-[350px] w-full justify-center p-10 items-center mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border">
           <Tabs defaultValue="row" className="w-full mt-4">
-            <TabsList
-              className={cn(
-                "mb-4 w-full overflow-x-auto h-auto overflow-y-hidden justify-start"
-              )}
-            >
+            <TabsList className={cn('mb-4 w-full overflow-x-auto h-auto overflow-y-hidden justify-start')}>
               <TabsTrigger value="row">Row</TabsTrigger>
               <TabsTrigger value="column">Column</TabsTrigger>
             </TabsList>
@@ -353,25 +308,20 @@ export default function Props() {
         </div>
       </div>
       <div className="w-full">
-        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">
-          Options
-        </h3>
+        <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Options</h3>
         <div className="border rounded-md mt-6">
           <Table>
             <TableHeader>
               <TableRow>
                 <TableHead>Option</TableHead>
                 <TableHead>Type</TableHead>
                 <TableHead>Default</TableHead>
-                <TableHead className={cn("w-[400px]")}>Description</TableHead>
+                <TableHead className={cn('w-[400px]')}>Description</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {tagInputProps.map((prop: propOption, index) => (
-                <TableRow
-                  key={index * Math.random()}
-                  className={`${index % 2 == 0 ? "bg-muted/50" : ""}`}
-                >
+                <TableRow key={index * Math.random()} className={`${index % 2 == 0 ? 'bg-muted/50' : ''}`}>
                   <TableCell>{prop.option}</TableCell>
                   <TableCell>{prop.type}</TableCell>
                   <TableCell>{prop.default}</TableCell>