feature/studio-layout #6
@ -12,13 +12,18 @@ export interface ActionButtonsProps {
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
function ActionButtons({ icon, label, onClick ,isGhost=false, buttonWidth=50}: ActionButtonsProps) {
|
||||
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] `}>
|
||||
<Button onClick={onClick} className={`flex gap-2 items-center align-middle hover:bg-transparent w-full`} variant={isGhost ? 'ghost' : 'default'}>
|
||||
<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>
|
||||
<p className={`text-xs text-white text-center w-full`}>{label}</p>
|
||||
{label && <p className={`text-xs text-white text-center w-full`}>{label}</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,96 +1,203 @@
|
||||
import React from 'react';
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
|
||||
import {
|
||||
Eye, Code, Tag, UploadCloud, Layout, Image, Film,
|
||||
FileCode, MousePointerClick, ChevronLeft, ChevronRight, ChevronsRight,
|
||||
ChevronsLeft, ChevronLast, Bell, Facebook, Linkedin, Twitter,
|
||||
Youtube, MessageCircle, Settings,
|
||||
Upload,
|
||||
TextSelect
|
||||
Tag, Image, Upload, TextSelect,
|
||||
ImageDownIcon,
|
||||
UploadIcon
|
||||
} 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, Snapchat, Spotify, Text, Video, VideoHorizontal, Whatsapp } from 'iconsax-react';
|
||||
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="py-3 pt-5 p-b-3 text-xs font-thin text-gray-100 ">
|
||||
<div className="mb-2 mt-5 text-xs font-thin text-gray-100 ">
|
||||
{title}
|
||||
</div>
|
||||
);
|
||||
|
||||
const Sidebar = () => {
|
||||
return (
|
||||
<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={<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 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-[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>
|
||||
|
||||
<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='w-full h-full flex flex-col overflow-y-auto no-scrollbar'>
|
||||
<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='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 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='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 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='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 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='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 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='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 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='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 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>
|
||||
<TabsContent value="upload">DFHDSFGSDFGHSFHWd.</TabsContent>
|
||||
<TabsContent value="elements"> odit mibus quas porro, modi corrupti repudiandae an</TabsContent>
|
||||
<TabsContent value="interactions"> odit mibus quas porro, modi corrupti repudiandae an</TabsContent>
|
||||
<TabsContent value="templates"> odit mibus quas porro, modi corrupti repudiandae an</TabsContent>
|
||||
<TabsContent value="aiwrite"> odit mibus quas porro, modi corrupti repudiandae an</TabsContent>
|
||||
<TabsContent value="settings"> odit mibus quas porro, modi corrupti repudiandae an</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
export default Sidebar;
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Add, ArrowDown2, Eye, Pointer } from 'iconsax-react';
|
||||
import { Download, PointerIcon, Redo2, Share2, Undo2 } from 'lucide-react';
|
||||
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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import ActionButtons from '../components/common/ActionButtons';
|
||||
import Sidebar from '../components/common/SideBar';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@ -19,77 +17,98 @@ export interface Props {
|
||||
|
||||
function layout({ children }: Props) {
|
||||
return (
|
||||
<div className="flex flex-col h-screen w-full">
|
||||
<div className="flex flex-col h-screen w-full overflow-x-hidden">
|
||||
|
||||
{/* NavBar */}
|
||||
<div className='w-full h-[80px] flex items-center align-middle bg-white shadow-md justify-between pl-5 pr-5'>
|
||||
<div className='w-[60%] flex items-center align-middle justify-between gap-2 '>
|
||||
<Image src="/images/logo.png" alt="logo" width={100} height={100} className='w-[116px] h-[53px]' />
|
||||
<div className='flex items-center gap-4'>
|
||||
<Link href="#" className='text-black '>Home</Link>
|
||||
<Link href="#" className='text-black '>View</Link>
|
||||
<Link href="#" className='text-black '>Help</Link>
|
||||
<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='flex items-center gap-4'>
|
||||
<Pointer size="20" color="#555555" className='cursor-pointer' />
|
||||
<PointerIcon size="20" color="#555555" className=' cursor-pointer' />
|
||||
<div className="flex items-center gap-1 cursor-pointer">
|
||||
<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' />
|
||||
<Redo2 size="20" color="#555555" className=' cursor-pointer' />
|
||||
<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 w-[30%] gap-3 items-center align-middle'>
|
||||
<Button variant='outline' className='h-10 w-10 p-2'>
|
||||
<div className="h-5 w-5 bg-black rounded-full">.</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-10 w-10 p-2'>
|
||||
<Download size="20" color="#555555" />
|
||||
<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-10 p-2 flex gap-2'>
|
||||
<Eye size="20" color="#555555" />
|
||||
<p>Preview</p>
|
||||
<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-10 p-2 flex gap-2 bg-[#1A237E]'>
|
||||
<Share2 size="20" color="#ffffff" />
|
||||
<p>Share</p>
|
||||
<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-[40px] h-[40px] rounded-full z-10' />
|
||||
<Button variant='outline' className='absolute right-0 left-7 h-10 w-10 p-2 rounded-full'>
|
||||
<Add size="20" color="#555555" />
|
||||
<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 w-full h-[calc(100vh-80px)]'>
|
||||
{/* Sidebar */}
|
||||
<Sidebar/>
|
||||
<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 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>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,22 +1,23 @@
|
||||
import React from 'react'
|
||||
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>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nam autem
|
||||
ratione et perspiciatis iure ab ducimus, maxime distinctio in amet fugit de
|
||||
lectus optio asperiores neque unde possimus cumque repudiandae nulla laudantium. E
|
||||
rror iure laborum fuga quia, at ut dolor consectetur culpa provident mollitia inven
|
||||
tore cumque obcaecati ab esse similique recusandae, tempore architecto nulla molestias i
|
||||
mpedit optio animi. Provident sed quisquam reprehenderit possimus voluptatum voluptates p
|
||||
erferendis esse qui excepturi doloremque quos similique eius vel fuga impedit neque nulla d
|
||||
ebitis, rem praesentium accusamus! Commodi, temporibus maxime ex amet facilis quasi reprehenderit
|
||||
cumque quidem repudiandae, earum odio ab cum qui rerum eum culpa. Aliquid corrupti et fuga evenie
|
||||
t ipsa, consequatur a suscipit excepturi laudantium! Unde quasi, incidunt doloribus optio cupiditate eius.
|
||||
Incidunt eaque natus et magnam in maiores laudantium necessitatibus possimus rem porro, placeat officiis
|
||||
eligendi, nisi ducimus! Corrupti, aliquam vitae. Ipsum commodi perspiciatis laudantium eum eligendi repellat amet, su
|
||||
nt enim obcaecati non architecto, delectus nisi iusto quas voluptates cum doloribus quod sapiente sint beatae qui assumenda. Hic, corr
|
||||
upti magni quas quaerat odit harum modi ullam accusamus fugiat accusantium veniam quis voluptate iusto optio porro, tempore cumque ratione ut quam
|
||||
volupta
|
||||
tum perferendis repudiandae eius amet! Ratione aliquid quod laudantium suscipit explicabo inventore.</div>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
21
components/ui/input.tsx
Normal file
21
components/ui/input.tsx
Normal file
@ -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 }
|
||||
13
components/ui/skeleton.tsx
Normal file
13
components/ui/skeleton.tsx
Normal file
@ -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 }
|
||||
BIN
public/images/Ebook.png
Normal file
BIN
public/images/Ebook.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
public/images/Unconfirmed 311847.crdownload
Normal file
BIN
public/images/Unconfirmed 311847.crdownload
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user