98 lines
4.3 KiB
TypeScript
98 lines
4.3 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { Add, ArrowDown2, Eye, Pointer } from 'iconsax-react';
|
|
import { Download, PointerIcon, Redo2, Share2, 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 = {
|
|
title: 'Studio',
|
|
}
|
|
|
|
export interface Props {
|
|
children: React.ReactNode
|
|
}
|
|
|
|
function layout({ children }: Props) {
|
|
return (
|
|
<div className="flex flex-col h-screen w-full">
|
|
|
|
{/* 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>
|
|
|
|
<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">
|
|
<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' />
|
|
</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>
|
|
</Button>
|
|
<Button variant='outline' className='h-10 w-10 p-2'>
|
|
<Download size="20" color="#555555" />
|
|
</Button>
|
|
<Button variant='outline' className='h-10 p-2 flex gap-2'>
|
|
<Eye size="20" color="#555555" />
|
|
<p>Preview</p>
|
|
</Button>
|
|
<Button className='h-10 p-2 flex gap-2 bg-[#1A237E]'>
|
|
<Share2 size="20" color="#ffffff" />
|
|
<p>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" />
|
|
</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>
|
|
</div>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default layout
|