Wodey/wodey-prototype
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/studio-layout #6

Merged
Yussif merged 8 commits from feature/studio-layout into staging 2025-04-27 14:02:15 +00:00
Conversation 0 Commits 8 Files Changed 19 +58 -23
3 changed files with 58 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b891c2171d - Show all commits

9
app/components/common/ActionButtons.tsx
View File

@ -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>
)
}

65
app/components/common/SideBar.tsx
View File

@ -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>

7
app/globals.css
View File

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