119 lines
6.9 KiB
TypeScript
119 lines
6.9 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
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 Sidebar from '../../../components/common/SideBar';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Studio',
|
|
}
|
|
|
|
export interface Props {
|
|
children: React.ReactNode
|
|
}
|
|
|
|
function layout({ children }: Props) {
|
|
return (
|
|
<div className="flex flex-col h-screen w-full overflow-x-hidden">
|
|
|
|
{/* NavBar */}
|
|
<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='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 hover:opacity-70' />
|
|
<Redo2 size="20" color="#555555" className='cursor-pointer hover:opacity-70' />
|
|
</div>
|
|
</div>
|
|
</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-8 w-8 md:h-10 md:w-10 p-1 md:p-2' aria-label="Download">
|
|
<Download size="18" color="#555555" />
|
|
</Button>
|
|
<a href="/creator/reader">
|
|
<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>
|
|
</a>
|
|
<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-[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 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 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>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default layout
|