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

Update ActionButtons component to make label prop optional and enhance Sidebar with social media buttons

Browse Source
This commit is contained in:
pious2847 2025-04-27 07:51:03 +00:00
parent b891c2171d
commit 488d794c69
3 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@ import React from 'react'
export interface ActionButtonsProps {
icon: React.ReactNode,
label: string,
label?: string,
buttonWidth?: number,
isGhost?: boolean,
onClick?: () => void

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

@ -9,7 +9,7 @@ import {
TextSelect
} from "lucide-react";
import ActionButtons from "./ActionButtons";
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';
import { ArrowLeft2, ArrowRight2, AudioSquare, Cardano, CodeCircle, DocumentUpload, Element2, ExportSquare, Link, LinkSquare, Magicpen, MessageAdd1, MessageQuestion, Next, Note, Previous, Setting2, Shapes, Smallcaps, Snapchat, Spotify, Text, Video, VideoHorizontal, Whatsapp } from 'iconsax-react';
@ -70,6 +70,16 @@ const Sidebar = () => {
<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>
<CategoryHeading title="Social" />
<div className='flex w-full flex-wrap gap-5 mb-10 '>
<ActionButtons icon={<Snapchat size="20" color="#ffffff" />} label="" isGhost={false} buttonWidth={140} />
<ActionButtons icon={<Facebook size="20" color="#ffffff" />} label="" isGhost={false} buttonWidth={140} />
<ActionButtons icon={<Whatsapp size="20" color="#ffffff" />} label="" isGhost={false} buttonWidth={140} />
<ActionButtons icon={<Twitter size="20" color="#ffffff" />} label="" isGhost={false} buttonWidth={140} />
<ActionButtons icon={<Linkedin size="20" color="#ffffff" />} label="" isGhost={false} buttonWidth={140} />
<ActionButtons icon={<Youtube size="20" color="#ffffff" />} label="" isGhost={false} buttonWidth={140} />
<ActionButtons icon={<Spotify size="20" color="#ffffff" />} label="" isGhost={false} buttonWidth={140} />
</div>
</TabsContent>
<TabsContent value="upload">DFHDSFGSDFGHSFHWd.</TabsContent>
<TabsContent value="elements"> odit mibus quas porro, modi corrupti repudiandae an</TabsContent>

13
app/studio/layout.tsx
View File

@ -78,9 +78,16 @@ function layout({ children }: Props) {
<div className='flex w-full h-[calc(100vh-80px)]'>
{/* Sidebar */}
<Sidebar/>
<div className='w-[80%] h-full bg-white'>{children}</div>
<div className='w-[80%] h-full bg-white'>
{/* Inner NavBar */}
<div className='w-full h-[59px] flex items-center align-middle bg-white shadow-md justify-between pl-5 pr-5 border-t-2 border'>
<div className='w-[60%] flex flex-col gap-2 '>
<p>Pages 1</p>
<p>Pages 1</p>
</div>
</div>
{children}
</div>
</div>
</div>