Compare commits
No commits in common. "ea0af66e8a71c9fb614eb36dfc6ccb60a273ed8d" and "4169e0973c8fb58a4b8ebe057f3795f4c639f0d9" have entirely different histories.
ea0af66e8a
...
4169e0973c
@ -1,32 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
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, buttonWidth}: ActionButtonsProps) {
|
||||
return (
|
||||
<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>
|
||||
{label && <p className={`text-xs text-white text-center w-full`}>{label}</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default ActionButtons
|
||||
@ -1,203 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
|
||||
import {
|
||||
Tag, Image, Upload, TextSelect,
|
||||
ImageDownIcon,
|
||||
UploadIcon
|
||||
} from "lucide-react";
|
||||
import ActionButtons from "./ActionButtons";
|
||||
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="mb-2 mt-5 text-xs font-thin text-gray-100 ">
|
||||
{title}
|
||||
</div>
|
||||
);
|
||||
|
||||
const Sidebar = () => {
|
||||
return (
|
||||
<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-[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='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='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='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='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='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='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='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>
|
||||
</Tabs>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
@ -120,10 +120,3 @@
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* custom css */
|
||||
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -1,116 +0,0 @@
|
||||
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>
|
||||
<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-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 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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default layout
|
||||
@ -1,23 +0,0 @@
|
||||
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 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>
|
||||
)
|
||||
}
|
||||
@ -1,53 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as AvatarPrimitive from "@radix-ui/react-avatar"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Avatar({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
|
||||
return (
|
||||
<AvatarPrimitive.Root
|
||||
data-slot="avatar"
|
||||
className={cn(
|
||||
"relative flex size-8 shrink-0 overflow-hidden rounded-full",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarImage({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
|
||||
return (
|
||||
<AvatarPrimitive.Image
|
||||
data-slot="avatar-image"
|
||||
className={cn("aspect-square size-full", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarFallback({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
|
||||
return (
|
||||
<AvatarPrimitive.Fallback
|
||||
data-slot="avatar-fallback"
|
||||
className={cn(
|
||||
"bg-muted flex size-full items-center justify-center rounded-full",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Avatar, AvatarImage, AvatarFallback }
|
||||
@ -1,21 +0,0 @@
|
||||
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 }
|
||||
@ -1,13 +0,0 @@
|
||||
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 }
|
||||
@ -9,12 +9,10 @@
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/react-avatar": "^1.1.7",
|
||||
"@radix-ui/react-slot": "^1.2.0",
|
||||
"@radix-ui/react-tabs": "^1.1.9",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"iconsax-react": "^0.0.8",
|
||||
"lucide-react": "^0.503.0",
|
||||
"next": "15.3.1",
|
||||
"react": "^19.0.0",
|
||||
|
||||
@ -8,9 +8,6 @@ importers:
|
||||
|
||||
.:
|
||||
dependencies:
|
||||
'@radix-ui/react-avatar':
|
||||
specifier: ^1.1.7
|
||||
version: 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-slot':
|
||||
specifier: ^1.2.0
|
||||
version: 1.2.0(@types/react@19.1.2)(react@19.1.0)
|
||||
@ -23,9 +20,6 @@ importers:
|
||||
clsx:
|
||||
specifier: ^2.1.1
|
||||
version: 2.1.1
|
||||
iconsax-react:
|
||||
specifier: ^0.0.8
|
||||
version: 0.0.8(react@19.1.0)
|
||||
lucide-react:
|
||||
specifier: ^0.503.0
|
||||
version: 0.503.0(react@19.1.0)
|
||||
@ -332,19 +326,6 @@ packages:
|
||||
'@radix-ui/primitive@1.1.2':
|
||||
resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
|
||||
|
||||
'@radix-ui/react-avatar@1.1.7':
|
||||
resolution: {integrity: sha512-V7ODUt4mUoJTe3VUxZw6nfURxaPALVqmDQh501YmaQsk3D8AZQrOPRnfKn4H7JGDLBc0KqLhT94H79nV88ppNg==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-collection@1.1.4':
|
||||
resolution: {integrity: sha512-cv4vSf7HttqXilDnAnvINd53OTl1/bjUYVZrkFnA7nwmY9Ob2POUy0WY0sfqBAe1s5FyKsyceQlqiEGPYNTadg==}
|
||||
peerDependencies:
|
||||
@ -482,15 +463,6 @@ packages:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-use-is-hydrated@0.1.0':
|
||||
resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-use-layout-effect@1.1.1':
|
||||
resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
|
||||
peerDependencies:
|
||||
@ -1247,11 +1219,6 @@ packages:
|
||||
resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
iconsax-react@0.0.8:
|
||||
resolution: {integrity: sha512-l3dVk4zGtkkJHgvNYqAf0wDKqnKxXykee5/DoESGo2JvSYwaxajJUHSX2YrPRXSov8Hd8ClGFwJxCEaEjrFD1Q==}
|
||||
peerDependencies:
|
||||
react: '*'
|
||||
|
||||
ignore@5.3.2:
|
||||
resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
|
||||
engines: {node: '>= 4'}
|
||||
@ -1905,11 +1872,6 @@ packages:
|
||||
uri-js@4.4.1:
|
||||
resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
|
||||
|
||||
use-sync-external-store@1.5.0:
|
||||
resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
which-boxed-primitive@1.1.1:
|
||||
resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
|
||||
engines: {node: '>= 0.4'}
|
||||
@ -2147,19 +2109,6 @@ snapshots:
|
||||
|
||||
'@radix-ui/primitive@1.1.2': {}
|
||||
|
||||
'@radix-ui/react-avatar@1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
|
||||
'@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0)
|
||||
'@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.2)(react@19.1.0)
|
||||
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0)
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.2
|
||||
'@types/react-dom': 19.1.2(@types/react@19.1.2)
|
||||
|
||||
'@radix-ui/react-collection@1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
|
||||
@ -2277,13 +2226,6 @@ snapshots:
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.2
|
||||
|
||||
'@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.1.2)(react@19.1.0)':
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
use-sync-external-store: 1.5.0(react@19.1.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.2
|
||||
|
||||
'@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.2)(react@19.1.0)':
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
@ -3194,11 +3136,6 @@ snapshots:
|
||||
dependencies:
|
||||
function-bind: 1.1.2
|
||||
|
||||
iconsax-react@0.0.8(react@19.1.0):
|
||||
dependencies:
|
||||
prop-types: 15.8.1
|
||||
react: 19.1.0
|
||||
|
||||
ignore@5.3.2: {}
|
||||
|
||||
import-fresh@3.3.1:
|
||||
@ -3937,10 +3874,6 @@ snapshots:
|
||||
dependencies:
|
||||
punycode: 2.3.1
|
||||
|
||||
use-sync-external-store@1.5.0(react@19.1.0):
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
|
||||
which-boxed-primitive@1.1.1:
|
||||
dependencies:
|
||||
is-bigint: 1.1.0
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 109 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Loading…
Reference in New Issue
Block a user