Enhance ActionButtons component with buttonWidth prop and update Sidebar layout for better organization
This commit is contained in:
pious2847
parent
65beb0987b
commit
b891c2171d
@ -7,17 +7,18 @@ 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}: ActionButtonsProps) {
|
||||
function ActionButtons({ icon, label, onClick ,isGhost=false, buttonWidth=50}: ActionButtonsProps) {
|
||||
return (
|
||||
<div className='flex flex-col gap-1 items-center align-middle cursor-pointer'>
|
||||
<Button onClick={onClick} className='flex gap-2 items-center align-middle hover:bg-transparent' variant={isGhost ? 'ghost' : 'default'}>
|
||||
<div className={`flex flex-col gap-1 items-center align-middle cursor-pointer h-[50px] `}>
|
||||
<Button onClick={onClick} className={`flex gap-2 items-center align-middle hover:bg-transparent w-full`} variant={isGhost ? 'ghost' : 'default'}>
|
||||
{icon}
|
||||
</Button>
|
||||
<p className='text-xs text-white text-center'>{label}</p>
|
||||
<p className={`text-xs text-white text-center w-full`}>{label}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -9,39 +9,66 @@ import {
|
||||
TextSelect
|
||||
} from "lucide-react";
|
||||
import ActionButtons from "./ActionButtons";
|
||||
import { DocumentUpload, Element2, Magicpen, Setting2, Shapes, Text } from 'iconsax-react';
|
||||
import { ArrowLeft2, ArrowRight2, AudioSquare, Cardano, CodeCircle, DocumentUpload, Element2, ExportSquare, Link, LinkSquare, Magicpen, MessageAdd1, MessageQuestion, Next, Note, Previous, Setting2, Shapes, Smallcaps, Text, Video, VideoHorizontal } from 'iconsax-react';
|
||||
|
||||
|
||||
|
||||
const CategoryHeading = ({ title }: { title: string }) => (
|
||||
<div className="px-4 py-2 text-xs font-semibold text-gray-100 uppercase">
|
||||
<div className="py-3 pt-5 p-b-3 text-xs font-thin text-gray-100 ">
|
||||
{title}
|
||||
</div>
|
||||
);
|
||||
|
||||
const Sidebar = () => {
|
||||
return (
|
||||
<div className='w-[376px] h-full bg-[#181923] flex sticky'>
|
||||
<Tabs defaultValue="text" className=" h-full flex flex-row gap-2">
|
||||
<TabsList className="w-[89px] bg-[#010313] h-full flex flex-col justify-between rounded-none overflow-y-auto">
|
||||
<div className='w-[376px] h-full bg-[#181923] flex sticky pr-4'>
|
||||
<Tabs defaultValue="text" className=" h-full flex flex-row gap-2 ">
|
||||
<TabsList className="pt-5 w-[89px] bg-[#010313] h-full flex flex-col justify-between rounded-none overflow-y-auto">
|
||||
<div className='flex flex-col gap-2'>
|
||||
<TabsTrigger value="text" className="w-[50px] 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={<Text size="20" color="#ffffff" />} label="Text" isGhost={true} /></TabsTrigger>
|
||||
<TabsTrigger value="upload" className="w-[50px] 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="20" color="#ffffff" />} label="Upload" isGhost={true} /></TabsTrigger>
|
||||
<TabsTrigger value="elements" className="w-[50px] 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="20" color="#ffffff" />} label="Elements" isGhost={true} /></TabsTrigger>
|
||||
<TabsTrigger value="interactions" className="w-[50px] 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="20" color="#ffffff" />} label="Interactions" isGhost={true} /></TabsTrigger>
|
||||
<TabsTrigger value="templates" className="w-[50px] 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="20" color="#ffffff" />} label="Templates" isGhost={true} /></TabsTrigger>
|
||||
<TabsTrigger value="aiwrite" className="w-[50px] 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="20" color="#ffffff" />} label="Ai Write" isGhost={true} /></TabsTrigger>
|
||||
<TabsTrigger value="text" className="w-[50px] 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="20" color="#ffffff" />} label="Text" isGhost={true} /></TabsTrigger>
|
||||
<TabsTrigger value="upload" className="w-[50px] 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="20" color="#ffffff" />} label="Upload" isGhost={true} /></TabsTrigger>
|
||||
<TabsTrigger value="elements" className="w-[50px] 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="20" color="#ffffff" />} label="Elements" isGhost={true} /></TabsTrigger>
|
||||
<TabsTrigger value="interactions" className="w-[50px] 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="20" color="#ffffff" />} label="Interactions" isGhost={true} /></TabsTrigger>
|
||||
<TabsTrigger value="templates" className="w-[50px] 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="20" color="#ffffff" />} label="Templates" isGhost={true} /></TabsTrigger>
|
||||
<TabsTrigger value="aiwrite" className="w-[50px] 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="20" color="#ffffff" />} label="Ai Write" isGhost={true} /></TabsTrigger>
|
||||
</div>
|
||||
<TabsTrigger value="settings" className="w-[50px] 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="20" color="#ffffff" />} label="Preview" isGhost={true} /></TabsTrigger>
|
||||
|
||||
|
||||
</TabsList>
|
||||
<TabsContent value="text">
|
||||
<div className='flex w-full flex-col flex-wrap'>
|
||||
<CategoryHeading title="Links & Tags" />
|
||||
<ActionButtons icon={<Text size="20" color="#ffffff" />} label="Link Area" isGhost={false} />
|
||||
<ActionButtons icon={<Text size="20" color="#ffffff" />} label="Link Area" isGhost={false} />
|
||||
<ActionButtons icon={<Text size="20" color="#ffffff" />} label="Link Area" isGhost={false} />
|
||||
<ActionButtons icon={<Text size="20" color="#ffffff" />} label="Link Area" isGhost={false} />
|
||||
<TabsContent value="text" className='w-full h-full flex flex-col overflow-y-auto no-scrollbar'>
|
||||
<CategoryHeading title="Links & Tags" />
|
||||
<div className='flex w-full flex-wrap gap-5 justify-between'>
|
||||
<ActionButtons icon={<Link size="20" color="#ffffff" />} label="Link Area" isGhost={false} buttonWidth={140} />
|
||||
<ActionButtons icon={<LinkSquare size="20" color="#ffffff" />} label="Link Button" isGhost={false} buttonWidth={140} />
|
||||
<ActionButtons icon={<Tag size="20" color="#ffffff" />} label="Tag" isGhost={false} buttonWidth={140} />
|
||||
<ActionButtons icon={<MessageAdd1 size="20" color="#ffffff" />} label="Caption" isGhost={false} buttonWidth={140} />
|
||||
<ActionButtons icon={<CodeCircle size="20" color="#ffffff" />} label="Embed code" isGhost={false} buttonWidth={140} />
|
||||
<ActionButtons icon={<Text size="20" color="#ffffff" />} label="Pop-up frame" isGhost={false} buttonWidth={140} />
|
||||
</div>
|
||||
|
||||
<CategoryHeading title="Images" />
|
||||
<div className='flex w-full flex-wrap gap-5 '>
|
||||
<ActionButtons icon={<Cardano size="20" color="#ffffff" />} label="Spotlight" isGhost={false} buttonWidth={140} />
|
||||
<ActionButtons icon={<Image size="20" color="#ffffff" />} label="Slideshow" isGhost={false} buttonWidth={140} />
|
||||
</div>
|
||||
<CategoryHeading title="Audio & video" />
|
||||
<div className='flex w-full flex-wrap gap-5'>
|
||||
<ActionButtons icon={<VideoHorizontal size="20" color="#ffffff" />} label="Video embed" isGhost={false} buttonWidth={140} />
|
||||
<ActionButtons icon={<Video size="20" color="#ffffff" />} label="Video Button" isGhost={false} buttonWidth={140} />
|
||||
<ActionButtons icon={<AudioSquare size="20" color="#ffffff" />} label="Audio Button" isGhost={false} buttonWidth={140} />
|
||||
</div>
|
||||
<CategoryHeading title="Engagement" />
|
||||
<div className='flex w-full flex-wrap gap-5 '>
|
||||
<ActionButtons icon={<MessageQuestion size="20" color="#ffffff" />} label="Question" isGhost={false} buttonWidth={140} />
|
||||
<ActionButtons icon={<Note size="20" color="#ffffff" />} label="Contact Form" isGhost={false} buttonWidth={140} />
|
||||
</div>
|
||||
<CategoryHeading title="Navigation" />
|
||||
<div className='flex w-full flex-wrap gap-5 '>
|
||||
<ActionButtons icon={<ArrowLeft2 size="20" color="#ffffff" />} label="Previous Page" isGhost={false} buttonWidth={140} />
|
||||
<ActionButtons icon={<ArrowRight2 size="20" color="#ffffff" />} label="Next Page" isGhost={false} buttonWidth={140} />
|
||||
<ActionButtons icon={<ExportSquare size="20" color="#ffffff" />} label="Go to page" isGhost={false} buttonWidth={140} />
|
||||
<ActionButtons icon={<Previous size="20" color="#ffffff" />} label="First page" isGhost={false} buttonWidth={140} />
|
||||
<ActionButtons icon={<Next size="20" color="#ffffff" />} label="Last page" isGhost={false} buttonWidth={140} />
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="upload">DFHDSFGSDFGHSFHWd.</TabsContent>
|
||||
|
||||
@ -120,3 +120,10 @@
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* custom css */
|
||||
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user