chore: update code structure and remove redundant sections

app/components/common/ActionButtons.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import React from 'react'
+
+
+export interface ActionButtonsProps {
+    icon: React.ReactNode,
+    label?: string,
+    buttonWidth?: number,
+    isGhost?: boolean,
+    onClick?: () => void
+}
+
+function ActionButtons({ icon, label, onClick, isGhost=false, buttonWidth}: ActionButtonsProps) {
+  return (
+    <div className={`flex flex-col gap-1 items-center align-middle cursor-pointer h-[50px]`} style={{ width: buttonWidth ? `${buttonWidth}px` : 'auto' }}>
+        <Button
+            onClick={onClick}
+            className={`flex gap-2 items-center align-middle hover:bg-transparent w-full`}
+            variant={isGhost ? 'ghost' : 'default'}
+            aria-label={label || "Action button"}
+        >
+            {icon}
+        </Button>
+        {label && <p className={`text-xs text-white text-center w-full`}>{label}</p>}
+    </div>
+  )
+}
+
+
+export default ActionButtons

app/components/common/SideBar.tsx

@@ -0,0 +1,203 @@
+import React from 'react';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+    Tag, Image, Upload, TextSelect,
+    ImageDownIcon,
+    UploadIcon
+} from "lucide-react";
+import ActionButtons from "./ActionButtons";
+import {
+    ArrowLeft2, ArrowRight2, AudioSquare, Cardano, Chart, CodeCircle,
+    Element2, ExportSquare, Gift, Link, LinkSquare, Magicpen,
+    MessageAdd1, MessageQuestion, Next, Note, Photoshop, Previous,
+    SearchNormal1,
+    Setting2, Setting4, Shapes, Smallcaps, Snapchat, Spotify,
+    Sticker,
+    TableDocument,
+    Text, Video, VideoHorizontal, Whatsapp,
+} from 'iconsax-react';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Input } from '@/components/ui/input';
+
+
+
+const CategoryHeading = ({ title }: { title: string }) => (
+    <div className="mb-2 mt-5 text-xs font-thin text-gray-100 ">
+        {title}
+    </div>
+);
+
+const Sidebar = () => {
+    return (
+        <div className='w-full md:w-[376px] h-full bg-[#181923] flex sticky pr-2 md:pr-4'>
+            <Tabs defaultValue="text" className="h-full w-full flex flex-row gap-1 md:gap-2">
+                <TabsList className="pt-3 md:pt-5 w-[60px] md:w-[89px] p-0 bg-[#010313] h-full flex flex-col justify-between rounded-none overflow-y-auto overflow-x-hidden">
+                    <div className='flex flex-col gap-1 md:gap-2'>
+                        <TabsTrigger value="text" className="w-[45px] md:w-[50px] h-[45px] md:h-[50px] border-b-2 border-transparent data-[state=active]:border-b-white rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent">
+                            <ActionButtons icon={<Smallcaps size="18" color="#ffffff" />} label="Text" isGhost={false} />
+                        </TabsTrigger>
+                        <TabsTrigger value="upload" className="w-[45px] md:w-[50px] h-[45px] md:h-[50px] border-b-2 border-transparent data-[state=active]:border-b-white rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent">
+                            <ActionButtons icon={<Upload size="18" color="#ffffff" />} label="Upload" isGhost={true} />
+                        </TabsTrigger>
+                        <TabsTrigger value="elements" className="w-[45px] md:w-[50px] h-[45px] md:h-[50px] border-b-2 border-transparent data-[state=active]:border-b-white rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent">
+                            <ActionButtons icon={<Shapes size="18" color="#ffffff" />} label="Elements" isGhost={true} />
+                        </TabsTrigger>
+                        <TabsTrigger value="interactions" className="w-[45px] md:w-[50px] h-[45px] md:h-[50px] border-b-2 border-transparent data-[state=active]:border-b-white rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent">
+                            <ActionButtons icon={<TextSelect size="18" color="#ffffff" />} label="Interactions" isGhost={true} />
+                        </TabsTrigger>
+                        <TabsTrigger value="templates" className="w-[45px] md:w-[50px] h-[45px] md:h-[50px] border-b-2 border-transparent data-[state=active]:border-b-white rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent">
+                            <ActionButtons icon={<Element2 size="18" color="#ffffff" />} label="Templates" isGhost={true} />
+                        </TabsTrigger>
+                        <TabsTrigger value="aiwrite" className="w-[45px] md:w-[50px] h-[45px] md:h-[50px] border-b-2 border-transparent data-[state=active]:border-b-white rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent">
+                            <ActionButtons icon={<Magicpen size="18" color="#ffffff" />} label="Ai Write" isGhost={true} />
+                        </TabsTrigger>
+                    </div>
+                    <TabsTrigger value="settings" className="w-[45px] md:w-[50px] h-[45px] md:h-[50px] border-b-2 border-transparent data-[state=active]:border-b-white rounded-none data-[state=active]:shadow-none data-[state=active]:bg-transparent">
+                        <ActionButtons icon={<Setting2 size="18" color="#ffffff" />} label="Settings" isGhost={true} />
+                    </TabsTrigger>
+                </TabsList>
+                <TabsContent value="text" className='relative w-full h-full flex flex-col overflow-y-auto no-scrollbar p-2 md:p-4'>
+                    <CategoryHeading title="Click or drag text to add to ebook page" />
+
+                    <div className='flex flex-col  w-full flex-wrap gap-3 md:gap-5 justify-between mt-1'>
+                        <Button className='p-4 bg-[#FFFFFF14] text-2xl h-[48px]'>Add Heading</Button>
+                        <Button className='p-4 bg-[#FFFFFF14] text-xl h-[48px]'>Add Sub Heading</Button>
+                        <Button className='p-4 bg-[#FFFFFF14] text-lg font-thin h-[48px]'>Add Body Text</Button>
+                        <Button className='p-4 bg-[#FFFFFF14] text-xl h-[48px]'>#Pagination</Button>
+                    </div>
+                    <div className=' w-full flex justify-end'>
+                        <CategoryHeading title="Edit or add font styles" />
+                    </div>
+
+                    <CategoryHeading title="Text Templates" />
+                    <div className='grid grid-cols-2  w-full flex-wrap gap-3 md:gap-5 justify-between'>
+                        {
+                            Array.from({ length: 4 }).map((_, index) => {
+                                return (
+                                    <div key={index}>
+                                        <Skeleton className="h-[174px] w-[115px] mt-2 shadow-sm"/>
+                                    </div>
+                                )
+                            })
+                        }
+                    </div>
+
+                </TabsContent>
+
+                <TabsContent value="upload"  className='relative w-full h-full flex flex-col gap-4 overflow-y-auto no-scrollbar p-2 md:p-4'>
+                    {/* search input box */}
+                    <div className='flex items-center justify-between px-3 h-[44px] w-full bg-white rounded-lg gap-2'>
+                        <SearchNormal1 size="18" color="#555555" className="shrink-0" />
+                        <Input 
+                            placeholder='Search' 
+                            className='h-[44px] flex-1 outline-none border-none focus:ring-0 focus-visible:ring-0 px-0' 
+                        />
+                        <Setting4 size="18" color="#555555" className="shrink-0 cursor-pointer hover:opacity-70" />
+                    </div>
+
+                    <div className='flex mt-3'>
+                        <Button variant={"outline"} className='bg-[#00697733] text-white rounded-br-none rounded-tr-none'>My Uploads</Button>
+                        <Button variant={"outline"} className='bg-transparent text-white rounded-tl-none rounded-bl-none'>Team Uploads</Button>
+                    </div>
+                    <Button className='p-3 bg-[#006977] text-white rounded-lg w-full hover:bg-[#1d3235]'>
+                        <UploadIcon size="18" color="#ffffff" />
+                        Upload media
+                    </Button>
+                    <div className=''>
+
+                    </div>
+                    <CategoryHeading title="Recent Uploads" />
+                </TabsContent>
+
+                <TabsContent value="elements" className='relative w-full h-full flex flex-col overflow-y-auto no-scrollbar p-2 md:p-4'>
+                    <CategoryHeading title="Graphics" />
+                    <div className='grid grid-cols-3  w-full flex-wrap gap-3 md:gap-5 justify-between'>
+                        <ActionButtons icon={<Image size="18" color="#ffffff" />} label="Stock Photo" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<ImageDownIcon size="18" color="#ffffff" />} label="Stock Video" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<Shapes size="18" color="#ffffff" />} label="Shapes" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<Gift size="18" color="#ffffff" />} label="Gif" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<Sticker size="18" color="#ffffff" />} label="Sticker" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<AudioSquare size="18" color="#ffffff" />} label="Audio" isGhost={false} buttonWidth={65} />
+                    </div>
+
+                    <CategoryHeading title="Data" />
+                    <div className='grid grid-cols-3  w-full flex-wrap gap-3 md:gap-5 justify-between'>
+                        <ActionButtons icon={<Chart size="18" color="#ffffff" />} label="Chart" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<TableDocument size="18" color="#ffffff" />} label="Table" isGhost={false} buttonWidth={65} />
+                    </div>
+                </TabsContent>
+
+                <TabsContent value="interactions" className='relative w-full h-full flex flex-col overflow-y-auto no-scrollbar p-2 md:p-4'>
+                    <CategoryHeading title="Links & Tags" />
+                    <div className='grid grid-cols-3  w-full flex-wrap gap-3 md:gap-5 justify-between'>
+                        <ActionButtons icon={<Link size="18" color="#ffffff" />} label="Link Area" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<LinkSquare size="18" color="#ffffff" />} label="Link Button" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<Tag size="18" color="#ffffff" />} label="Tag" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<MessageAdd1 size="18" color="#ffffff" />} label="Caption" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<CodeCircle size="18" color="#ffffff" />} label="Embed code" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<Text size="18" color="#ffffff" />} label="Pop-up frame" isGhost={false} buttonWidth={65} />
+                    </div>
+
+                    <CategoryHeading title="Images" />
+                    <div className='grid grid-cols-3  w-full flex-wrap gap-3 md:gap-5'>
+                        <ActionButtons icon={<Cardano size="18" color="#ffffff" />} label="Spotlight" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<Image size="18" color="#ffffff" />} label="Slideshow" isGhost={false} buttonWidth={65} />
+                    </div>
+
+                    <CategoryHeading title="Audio & video" />
+                    <div className='grid grid-cols-3  w-full flex-wrap gap-3 md:gap-5'>
+                        <ActionButtons icon={<VideoHorizontal size="18" color="#ffffff" />} label="Video embed" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<Video size="18" color="#ffffff" />} label="Video Button" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<AudioSquare size="18" color="#ffffff" />} label="Audio Button" isGhost={false} buttonWidth={65} />
+                    </div>
+
+                    <CategoryHeading title="Engagement" />
+                    <div className='grid grid-cols-3  w-full flex-wrap gap-3 md:gap-5'>
+                        <ActionButtons icon={<MessageQuestion size="18" color="#ffffff" />} label="Question" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<Note size="18" color="#ffffff" />} label="Contact Form" isGhost={false} buttonWidth={65} />
+                    </div>
+
+                    <CategoryHeading title="Navigation" />
+                    <div className='grid grid-cols-3  w-full flex-wrap gap-3 md:gap-5'>
+                        <ActionButtons icon={<ArrowLeft2 size="18" color="#ffffff" />} label="Previous Page" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<ArrowRight2 size="18" color="#ffffff" />} label="Next Page" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<ExportSquare size="18" color="#ffffff" />} label="Go to page" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<Previous size="18" color="#ffffff" />} label="First page" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<Next size="18" color="#ffffff" />} label="Last page" isGhost={false} buttonWidth={65} />
+                    </div>
+
+                    <CategoryHeading title="Social" />
+                    <div className='grid grid-cols-3  w-full flex-wrap gap-3 md:gap-5 mb-10'>
+                        <ActionButtons icon={<Snapchat size="18" color="#ffffff" />} label="Snapchat" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<Whatsapp size="18" color="#ffffff" />} label="WhatsApp" isGhost={false} buttonWidth={65} />
+                        <ActionButtons icon={<Spotify size="18" color="#ffffff" />} label="Spotify" isGhost={false} buttonWidth={65} />
+                    </div>
+                </TabsContent>
+                <TabsContent value="templates" className='p-3 md:p-5'>
+                    <div className='flex flex-col items-center justify-center h-full'>
+                        <p className='text-white text-sm md:text-base'>Templates section</p>
+                        <p className='text-gray-400 text-xs md:text-sm mt-2'>This section is under development</p>
+                    </div>
+                </TabsContent>
+
+                <TabsContent value="aiwrite" className='p-3 md:p-5'>
+                    <div className='flex flex-col items-center justify-center h-full'>
+                        <p className='text-white text-sm md:text-base'>AI Write section</p>
+                        <p className='text-gray-400 text-xs md:text-sm mt-2'>This section is under development</p>
+                    </div>
+                </TabsContent>
+
+                <TabsContent value="settings" className='p-3 md:p-5'>
+                    <div className='flex flex-col items-center justify-center h-full'>
+                        <p className='text-white text-sm md:text-base'>Settings section</p>
+                        <p className='text-gray-400 text-xs md:text-sm mt-2'>This section is under development</p>
+                    </div>
+                </TabsContent>
+            </Tabs>
+
+        </div>
+    );
+};
+
+export default Sidebar;

app/globals.css

@@ -120,3 +120,10 @@
     @apply bg-background text-foreground;
   }
 }
+
+
+/* custom css */
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}

app/studio/layout.tsx

@@ -0,0 +1,116 @@
+import { Button } from '@/components/ui/button';
+import { Add, ArrowDown2, Book1, Eye, Layer, Link2, Message, PlayCircle, Pointer, SearchNormal1 } from 'iconsax-react';
+import { Download, PointerIcon, Redo2, Share2, Square, Undo2 } from 'lucide-react';
+import type { Metadata } from 'next';
+import Image from 'next/image';
+import Link from 'next/link';
+import React from 'react';
+import Sidebar from '../components/common/SideBar';
+
+export const metadata: Metadata = {
+    title: 'Studio',
+}
+
+export interface Props {
+    children: React.ReactNode
+}
+
+function layout({ children }: Props) {
+    return (
+        <div className="flex flex-col h-screen w-full overflow-x-hidden">
+
+            {/* NavBar */}
+            <div className='w-full h-[80px]  top-0 z-10 flex items-center align-middle bg-white shadow-md justify-between px-3 md:px-5'>
+                <div className='w-full md:w-[60%] flex flex-wrap md:flex-nowrap items-center align-middle justify-between gap-2'>
+                    <Image src="/images/logo.png" alt="logo" width={100} height={100} className='w-[100px] md:w-[116px] h-[45px] md:h-[53px]' />
+                    <div className='hidden md:flex items-center gap-4'>
+                        <Link href="#" className='text-black hover:text-gray-600'>Home</Link>
+                        <Link href="#" className='text-black hover:text-gray-600'>View</Link>
+                        <Link href="#" className='text-black hover:text-gray-600'>Help</Link>
+
+                        <p className='text-gray-700 text-sm'>Last saved 5 seconds ago</p>
+                    </div>
+                    <div className='hidden md:flex items-center gap-4'>
+                        <Pointer size="20" color="#555555" className='cursor-pointer hover:opacity-70' />
+                        <PointerIcon size="20" color="#555555" className='cursor-pointer hover:opacity-70' />
+                        <div className="flex items-center gap-1 cursor-pointer">
+                            <p>100%</p>
+                            <ArrowDown2 size="20" color="#555555" />
+                        </div>
+                        <div className="flex items-center gap-1">
+                            <Undo2 size="20" color="#555555" className='cursor-pointer hover:opacity-70' />
+                            <Redo2 size="20" color="#555555" className='cursor-pointer hover:opacity-70' />
+                        </div>
+                    </div>
+                </div>
+
+                <div className='flex gap-2 md:gap-3 items-center align-middle'>
+                    <Button variant='outline' className='h-8 w-8 md:h-10 md:w-10 p-1 md:p-2' aria-label="Color picker">
+                        <div className="h-4 w-4 md:h-5 md:w-5 bg-black rounded-full"></div>
+                    </Button>
+                    <Button variant='outline' className='h-8 w-8 md:h-10 md:w-10 p-1 md:p-2' aria-label="Download">
+                        <Download size="18" color="#555555" />
+                    </Button>
+                    <Button variant='outline' className='h-8 md:h-10 p-1 md:p-2 flex gap-1 md:gap-2' aria-label="Preview">
+                        <Eye size="18" color="#555555" />
+                        <p className="hidden md:block">Preview</p>
+                    </Button>
+                    <Button className='h-8 md:h-10 p-1 md:p-2 flex gap-1 md:gap-2 bg-[#1A237E]' aria-label="Share">
+                        <Share2 size="18" color="#ffffff" />
+                        <p className="hidden md:block">Share</p>
+                    </Button>
+
+                    <div className='flex relative'>
+                        <Image src="/images/profile.jpeg" alt="profile" width={40} height={40} className='w-[35px] h-[35px] md:w-[40px] md:h-[40px] rounded-full z-10' />
+                        <Button variant='outline' className='absolute right-0 left-5 md:left-7 h-8 w-8 md:h-10 md:w-10 p-1 md:p-2 rounded-full' aria-label="Add user">
+                            <Add size="18" color="#555555" />
+                        </Button>
+                    </div>
+                </div>
+            </div>
+            {/* End of NavBar */}
+
+            {/* Main Content with Sidebar  */}
+            <div className='flex flex-col md:flex-row w-full h-[calc(100vh-80px)]'>
+                {/* Sidebar - Hidden on mobile by default, can be toggled */}
+                <div className="md:block">
+                    <Sidebar />
+                </div>
+                <div className='w-full md:w-[80%] h-full bg-white'>
+                    {/* Inner NavBar */}
+                    <div className='w-full h-[59px] flex items-center align-middle bg-white shadow-md gap-3 md:gap-6 px-3 md:px-5 border-t-2 border'>
+                        <div className='flex flex-col gap-1'>
+                            <p>Pages 1</p>
+                            <p className='text-xs'>794 * 1123 px</p>
+                        </div>
+                        <div className='flex gap-2 items-center align-middle h-[58px]'>
+                            <p>Background</p>
+                            <div className="bg-gradient-to-r from-[#FCDFA3] to-[#9E8EB7] w-[22px] h-[22px] rounded-sm">
+                            </div>
+                        </div>
+                    </div>
+                    {/* End of Inner NavBar */}
+
+                    {/* Main Editor */}
+                    <div className='flex w-full h-[calc(100vh-139px)]'>
+                        <div className="flex justify-center align-center items-center w-[calc(100%-70px)] p-4 md:p-10 bg-[#D9D7D7] overflow-y-auto no-scrollbar">
+                        {children}
+                        </div>
+                        {/* Inner Editor SideBar */}
+                        <div className='w-[70px] p-1 md:p-2 bg-white gap-1 flex flex-col justify-between items-center align-middle px-2 md:px-5 border-t-2 border overflow-y-auto no-scrollbar'>
+                            <Book1 size={24} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Book"/>
+                            <Layer size={24} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Layers"/>
+                            <SearchNormal1 size={24} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Search"/>
+                            <Square size={24} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Square"/>
+                            <Link2 size={24} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Link"/>
+                            <PlayCircle size={24} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Play"/>
+                            <Message size={24} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Message"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default layout

app/studio/page.tsx

@@ -0,0 +1,23 @@
+import { Button } from '@/components/ui/button';
+import { AddSquare, Trash } from 'iconsax-react';
+import Image from 'next/image';
+import React from 'react';
+
+export default function Studio() {
+    return (
+        <div className='w-[450px] flex flex-col gap-3 mt-24'>
+            <div className='flex justify-between items-center w-full '>
+                <p className='text-sm' >Page 1/1</p>
+                <div className='flex gap-2'>
+                    <AddSquare size={20} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Add page" />
+                    <Trash size={20} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Delete page" />
+                </div>
+
+            </div>
+            <div className='bg-white rounded-lg flex justify-around w-[450px] p-5'>
+                <Image src={"/images/Ebook.png"} alt="image1" width={100} height={550} className='w-[350px] h-[450px]' />
+            </div>
+            <Button variant="outline" className='w-full bg-transparent  p-2'>Add new page</Button>
+        </div>
+    )
+}

components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package.json

@@ -9,10 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-tabs": "^1.1.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "iconsax-react": "^0.0.8",
     "lucide-react": "^0.503.0",
     "next": "15.3.1",
     "react": "^19.0.0",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@radix-ui/react-avatar':
+        specifier: ^1.1.7
+        version: 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-slot':
         specifier: ^1.2.0
         version: 1.2.0(@types/react@19.1.2)(react@19.1.0)
@@ -20,6 +23,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      iconsax-react:
+        specifier: ^0.0.8
+        version: 0.0.8(react@19.1.0)
       lucide-react:
         specifier: ^0.503.0
         version: 0.503.0(react@19.1.0)
@@ -326,6 +332,19 @@ packages:
   '@radix-ui/primitive@1.1.2':
     resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
 
+  '@radix-ui/react-avatar@1.1.7':
+    resolution: {integrity: sha512-V7ODUt4mUoJTe3VUxZw6nfURxaPALVqmDQh501YmaQsk3D8AZQrOPRnfKn4H7JGDLBc0KqLhT94H79nV88ppNg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collection@1.1.4':
     resolution: {integrity: sha512-cv4vSf7HttqXilDnAnvINd53OTl1/bjUYVZrkFnA7nwmY9Ob2POUy0WY0sfqBAe1s5FyKsyceQlqiEGPYNTadg==}
     peerDependencies:
@@ -463,6 +482,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-is-hydrated@0.1.0':
+    resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-layout-effect@1.1.1':
     resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
     peerDependencies:
@@ -1219,6 +1247,11 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  iconsax-react@0.0.8:
+    resolution: {integrity: sha512-l3dVk4zGtkkJHgvNYqAf0wDKqnKxXykee5/DoESGo2JvSYwaxajJUHSX2YrPRXSov8Hd8ClGFwJxCEaEjrFD1Q==}
+    peerDependencies:
+      react: '*'
+
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -1872,6 +1905,11 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  use-sync-external-store@1.5.0:
+    resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   which-boxed-primitive@1.1.1:
     resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
     engines: {node: '>= 0.4'}
@@ -2109,6 +2147,19 @@ snapshots:
 
   '@radix-ui/primitive@1.1.2': {}
 
+  '@radix-ui/react-avatar@1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
   '@radix-ui/react-collection@1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
@@ -2226,6 +2277,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.2
 
+  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.1.2)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+      use-sync-external-store: 1.5.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+
   '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.2)(react@19.1.0)':
     dependencies:
       react: 19.1.0
@@ -3136,6 +3194,11 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  iconsax-react@0.0.8(react@19.1.0):
+    dependencies:
+      prop-types: 15.8.1
+      react: 19.1.0
+
   ignore@5.3.2: {}
 
   import-fresh@3.3.1:
@@ -3874,6 +3937,10 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  use-sync-external-store@1.5.0(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+
   which-boxed-primitive@1.1.1:
     dependencies:
       is-bigint: 1.1.0