wodey-prototype/components/common/SideBar.tsx

'use client'
import React from 'react';
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import {
    Tag, Image as Images, 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';
import Image from "next/image";

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='flex flex-col gap-2 w-full items-center justify-center'>
                       <p className='text-xl font-semibold  text-white'>No uploads yet</p>

                       <Image src="/images/noUploads.png" alt="no uploads" width={104} height={104} className='w-[104px] h-[104px]'/>
                    </div>
                </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'>
                        <a href="/marketplace/artists">
                        <ActionButtons icon={<Images size="18" color="#ffffff" />} label="Stock Photo" isGhost={false} buttonWidth={65} />
                        </a>
                        <a href="/marketplace/advertisers">
                        <ActionButtons icon={<ImageDownIcon size="18" color="#ffffff" />} label="Stock Video" isGhost={false} buttonWidth={65}  /> </a>
                        <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={<Images 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;