Skip to content

Commit 5744735

Browse files
fifoliofifolio
committed
General files & folders Organization
1 parent c447db3 commit 5744735

File tree

17 files changed

+693
-478
lines changed

17 files changed

+693
-478
lines changed

‎src/components/canvas/Canvas.tsx

+16-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import { useEffect, useRef } from 'react';
2-
import { Textbox, Canvas as FabricCanvas, Rect, Circle, Line } from 'fabric'; // Assuming you're using fabric.js for canvas
2+
import {
3+
Textbox,
4+
Canvas as FabricCanvas,
5+
Rect,
6+
Circle,
7+
Line
8+
} from 'fabric';
39

410
// STORES
511
import useTools from '@/stores/tools/useTools';
@@ -33,6 +39,8 @@ export default function Canvas() {
3339
setAddVerticalLine,
3440
} = useTools();
3541

42+
43+
3644
useEffect(() => {
3745
if (canvasRef.current) {
3846
// Dispose of the existing canvas instance if it exists
@@ -81,6 +89,7 @@ export default function Canvas() {
8189
}, []);
8290

8391

92+
8493
// Handle Adding Text
8594
useEffect(() => {
8695
if (handleAddText && canvasInstance.current) {
@@ -102,6 +111,7 @@ export default function Canvas() {
102111
}, [handleAddText, textOptions, setHandleAddText]);
103112

104113

114+
105115
// Handle Adding Square
106116
useEffect(() => {
107117
if (addingSquare && canvasInstance.current) {
@@ -125,6 +135,7 @@ export default function Canvas() {
125135
}, [squareOptions, addingSquare, setAddingSquare]);
126136

127137

138+
128139
// Handle Adding Circle
129140
useEffect(() => {
130141
if (addingCircle && canvasInstance.current) {
@@ -146,6 +157,8 @@ export default function Canvas() {
146157
}
147158
}, [circleOptions, addingCircle, setAddingCircle]);
148159

160+
161+
149162
// Handle Adding Horizontal Line
150163
useEffect(() => {
151164
if (addHorizontalLine && canvasInstance.current) {
@@ -164,6 +177,8 @@ export default function Canvas() {
164177
}
165178
}, [addHorizontalLine, setAddHorizontalLine]);
166179

180+
181+
167182
// Handle Adding Vertical Line
168183
useEffect(() => {
169184
if (addVerticalLine && canvasInstance.current) {

‎src/components/common/Navbar.tsx

+10-90
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,8 @@
1-
// UI
2-
import {
3-
Menubar,
4-
MenubarContent,
5-
MenubarItem,
6-
MenubarMenu,
7-
MenubarSeparator,
8-
MenubarShortcut,
9-
MenubarTrigger,
10-
} from "@/components/ui/menubar"
11-
import { Button } from "@/components/ui/button"
12-
import {
13-
Dialog,
14-
DialogContent,
15-
DialogDescription,
16-
DialogHeader,
17-
DialogTitle,
18-
DialogTrigger,
19-
} from "@/components/ui/dialog"
20-
21-
22-
// ICONS
23-
import { TiThMenu } from "react-icons/ti";
24-
import { FcFile } from "react-icons/fc";
25-
import { FcOpenedFolder } from "react-icons/fc";
26-
import { FcInfo } from "react-icons/fc";
27-
import { FcSettings } from "react-icons/fc";
28-
import { LuFullscreen } from "react-icons/lu";
29-
import { FcUpload } from "react-icons/fc";
30-
31-
32-
1+
// COMPONENTS
2+
import Menu from "./left-section/Menu"
3+
import Title from "./mid-section/Title"
4+
import Settings from "./right-section/Settings"
5+
import SyncBtn from "./right-section/SyncBtn"
336

347

358
export default function Navbar() {
@@ -38,73 +11,20 @@ export default function Navbar() {
3811

3912
{/* LEFT SECTION */}
4013
<div className="flex justify-start space-x-2">
41-
{/* FULL-SCREEN BUTTON */}
42-
<Button variant="outline">
43-
<LuFullscreen className="!size-5" />
44-
</Button>
45-
4614
{/* MENU */}
47-
<Menubar>
48-
<MenubarMenu>
49-
<MenubarTrigger className="flex space-x-2 cursor-pointer">
50-
<TiThMenu className="size-4" />
51-
<span>
52-
Menu
53-
</span>
54-
</MenubarTrigger>
55-
<MenubarContent className="capitalize">
56-
<MenubarItem className="cursor-pointer hover:font-semibold">
57-
Create new <MenubarShortcut><FcFile className="size-4" /></MenubarShortcut>
58-
</MenubarItem>
59-
<MenubarItem className="cursor-pointer hover:font-semibold">
60-
open saved file <MenubarShortcut><FcOpenedFolder className="size-4" /></MenubarShortcut>
61-
</MenubarItem>
62-
<MenubarSeparator className="flex md:hidden" />
63-
<MenubarItem className="flex md:hidden cursor-pointer hover:font-semibold">
64-
Sync updates <MenubarShortcut><FcUpload className="size-4" /></MenubarShortcut>
65-
</MenubarItem>
66-
<MenubarItem className="flex md:hidden cursor-pointer hover:font-semibold">
67-
Settings <MenubarShortcut><FcSettings className="size-4" /></MenubarShortcut>
68-
</MenubarItem>
69-
<MenubarSeparator />
70-
<MenubarItem className="cursor-pointer hover:font-semibold">
71-
help center <MenubarShortcut><FcInfo className="size-4" /></MenubarShortcut>
72-
</MenubarItem>
73-
</MenubarContent>
74-
</MenubarMenu>
75-
</Menubar>
15+
<Menu />
7616
</div>
7717

7818
{/* MID SECTION */}
79-
<div className="font-semibold">Untitled Presentation</div>
19+
<Title />
8020

8121
{/* RIGHT SECTION */}
8222
<div className="hidden md:flex space-x-2 capitalize">
83-
{/* SAVE BUTTON */}
84-
<Button variant="outline" className="flex justify-center items-center capitalize">
85-
<FcUpload className="!size-5" />
86-
<span>Sync updates</span>
87-
</Button>
23+
{/* SYNC BUTTON */}
24+
<SyncBtn />
8825

8926
{/* SETTINGS BUTTON */}
90-
<Dialog>
91-
<DialogTrigger>
92-
<Button variant="outline" className="flex justify-center items-center capitalize">
93-
<FcSettings className="!size-5" />
94-
<span>Settings</span>
95-
</Button>
96-
</DialogTrigger>
97-
<DialogContent>
98-
<DialogHeader>
99-
<DialogTitle>Are you absolutely sure?</DialogTitle>
100-
<DialogDescription>
101-
This action cannot be undone. This will permanently delete your account
102-
and remove your data from our servers.
103-
</DialogDescription>
104-
</DialogHeader>
105-
</DialogContent>
106-
</Dialog>
107-
27+
<Settings />
10828
</div>
10929
</nav>
11030
)

‎src/components/common/index.ts

+6
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,8 @@
11
export { default as Navbar } from './Navbar'
22
export { default as Footer } from './Footer'
3+
export { default as Menu } from './left-section/Menu'
4+
export { default as Title } from './mid-section/Title'
5+
export { default as SyncBtn } from './right-section/SyncBtn'
6+
export { default as Settings } from './right-section/Settings'
7+
8+

‎src/components/common/left-section/Menu.tsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
// UI
2+
import {
3+
Menubar,
4+
MenubarContent,
5+
MenubarItem,
6+
MenubarMenu,
7+
MenubarSeparator,
8+
MenubarShortcut,
9+
MenubarTrigger,
10+
} from "@/components/ui/menubar"
11+
12+
// ICONS
13+
import { TiThMenu } from "react-icons/ti";
14+
import { FcFile } from "react-icons/fc";
15+
import { FcOpenedFolder } from "react-icons/fc";
16+
import { FcInfo } from "react-icons/fc";
17+
import { FcSettings } from "react-icons/fc";
18+
import { FcUpload } from "react-icons/fc";
19+
20+
21+
export default function Menu() {
22+
return (
23+
<Menubar>
24+
<MenubarMenu>
25+
<MenubarTrigger className="flex space-x-2 cursor-pointer">
26+
<TiThMenu className="!size-5" />
27+
{/* <span>
28+
Menu
29+
</span> */}
30+
</MenubarTrigger>
31+
<MenubarContent className="capitalize">
32+
<MenubarItem className="cursor-pointer hover:font-semibold">
33+
Create new <MenubarShortcut><FcFile className="size-4" /></MenubarShortcut>
34+
</MenubarItem>
35+
<MenubarItem className="cursor-pointer hover:font-semibold">
36+
open saved file <MenubarShortcut><FcOpenedFolder className="size-4" /></MenubarShortcut>
37+
</MenubarItem>
38+
<MenubarSeparator className="flex md:hidden" />
39+
<MenubarItem className="flex md:hidden cursor-pointer hover:font-semibold">
40+
Sync updates <MenubarShortcut><FcUpload className="size-4" /></MenubarShortcut>
41+
</MenubarItem>
42+
<MenubarItem className="flex md:hidden cursor-pointer hover:font-semibold">
43+
Settings <MenubarShortcut><FcSettings className="size-4" /></MenubarShortcut>
44+
</MenubarItem>
45+
<MenubarSeparator />
46+
<MenubarItem className="cursor-pointer hover:font-semibold">
47+
help center <MenubarShortcut><FcInfo className="size-4" /></MenubarShortcut>
48+
</MenubarItem>
49+
</MenubarContent>
50+
</MenubarMenu>
51+
</Menubar>
52+
)
53+
}

‎src/components/common/mid-section/Title.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
3+
export default function Title() {
4+
return (
5+
<div className="font-semibold">Untitled Presentation</div>
6+
)
7+
}

‎src/components/common/right-section/Settings.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
2+
// UI
3+
import { Button } from "@/components/ui/button"
4+
import {
5+
Dialog,
6+
DialogContent,
7+
DialogDescription,
8+
DialogHeader,
9+
DialogTitle,
10+
DialogTrigger,
11+
} from "@/components/ui/dialog"
12+
13+
// ICONS
14+
import { FcSettings } from "react-icons/fc"
15+
16+
export default function Settings() {
17+
return (
18+
<Dialog>
19+
<DialogTrigger>
20+
<Button variant="outline" className="flex justify-center items-center capitalize">
21+
<FcSettings className="!size-5" />
22+
<span>Settings</span>
23+
</Button>
24+
</DialogTrigger>
25+
<DialogContent>
26+
<DialogHeader>
27+
<DialogTitle>Are you absolutely sure?</DialogTitle>
28+
<DialogDescription>
29+
This action cannot be undone. This will permanently delete your account
30+
and remove your data from our servers.
31+
</DialogDescription>
32+
</DialogHeader>
33+
</DialogContent>
34+
</Dialog>
35+
)
36+
}

‎src/components/common/right-section/SyncBtn.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// UI
2+
import { Button } from "@/components/ui/button";
3+
4+
// ICONS
5+
import { FcUpload } from "react-icons/fc";
6+
7+
export default function SyncBtn() {
8+
return (
9+
<Button variant="outline" className="flex justify-center items-center capitalize">
10+
<FcUpload className="!size-5" />
11+
<span>Sync updates</span>
12+
</Button>
13+
)
14+
}

0 commit comments

Comments
 (0)