update
swadhinbiswas committed 2 years ago
ce5d72c
1 parent 1661c90
commit ce5d72c
9 files changed
+122 -16
Showing 9 changed files+122-16
frontend/callapp/app/(root)/(home)/layout.tsxfrontend/callapp/app/(root)/layout.tsxfrontend/callapp/app/(root)/meeting/[id]/page.tsxfrontend/callapp/app/layout.tsxfrontend/callapp/app/page.tsxfrontend/callapp/components/Navbar.tsxfrontend/callapp/components/Sidebar.tsxfrontend/callapp/constants/index.tsfrontend/callapp/tailwind.config.ts
▼frontend/callapp/app/(root)/(home)/layout.tsx
+28-0
| @@ -0,0 +1,28 @@ | ||
1 | +import { Metadata } from "next"; | |
2 | +import { ReactNode } from "react"; | |
3 | + | |
4 | +import Navbar from "@/components/Navbar"; | |
5 | +import Sidebar from "@/components/Sidebar"; | |
6 | + | |
7 | +export const metadata: Metadata = { | |
8 | + title: "Project Phonix", | |
9 | + description: "A workspace for developing", | |
10 | +}; | |
11 | + | |
12 | +const RootLayout = ({ children }: Readonly<{ children: ReactNode }>) => { | |
13 | + return ( | |
14 | + <main className="relative"> | |
15 | + <Navbar /> | |
16 | + | |
17 | + <div className="flex"> | |
18 | + <Sidebar /> | |
19 | + | |
20 | + <section className="flex min-h-screen flex-1 flex-col px-6 pb-6 pt-28 max-md:pb-14 sm:px-14"> | |
21 | + <div className="w-full">{children}</div> | |
22 | + </section> | |
23 | + </div> | |
24 | + </main> | |
25 | + ); | |
26 | +}; | |
27 | + | |
28 | +export default RootLayout; | |
0 | 29 | |
▼frontend/callapp/app/(root)/layout.tsx
+4-4
| @@ -1,11 +1,11 @@ | ||
1 | -import React, { ReactNode } from 'react' | |
1 | +import React, { ReactNode } from 'react'; | |
2 | 2 | |
3 | 3 | const RootLayout = ({children}:{children:ReactNode}) => { |
4 | 4 | return ( |
5 | 5 | <main> |
6 | - {children} | |
7 | - </main> | |
6 | +{children} | |
7 | +</main> | |
8 | 8 | ) |
9 | 9 | } |
10 | 10 | |
11 | -export default RootLayout | |
11 | +export default RootLayout; | |
12 | 12 | |
▼frontend/callapp/app/(root)/meeting/[id]/page.tsx
+7-0
| @@ -0,0 +1,7 @@ | ||
1 | +import React from 'react' | |
2 | +const Mettings = ({ params }: { params: { id: string } })=> { | |
3 | + return( | |
4 | + <div> Meeting Room : #{params.id}</div> | |
5 | + ) | |
6 | +} | |
7 | +export default Mettings | |
0 | 8 | |
▼frontend/callapp/app/layout.tsx
+3-3
| @@ -5,8 +5,8 @@ import "./globals.css"; | ||
5 | 5 | const inter = Inter({ subsets: ["latin"] }); |
6 | 6 | |
7 | 7 | export const metadata: Metadata = { |
8 | - title: "Create Next App", | |
9 | - description: "Generated by create next app", | |
8 | + title: "Video Calling APP ", | |
9 | + description: "The video calling app For Project Phonix", | |
10 | 10 | }; |
11 | 11 | |
12 | 12 | export default function RootLayout({ |
| @@ -16,7 +16,7 @@ export default function RootLayout({ | ||
16 | 16 | }>) { |
17 | 17 | return ( |
18 | 18 | <html lang="en"> |
19 | - <body className={inter.className}>{children}</body> | |
19 | + <body className={`${inter.className} bg-dark-2`}>{children}</body> | |
20 | 20 | </html> |
21 | 21 | ); |
22 | 22 | } |
23 | 23 | |
▼frontend/callapp/app/page.tsx
+0-9
| @@ -1,9 +0,0 @@ | ||
1 | -import { Button } from "@/components/ui/button" | |
2 | - | |
3 | -export default function Home() { | |
4 | - return ( | |
5 | - <div> | |
6 | - <Button>Click me</Button> | |
7 | - </div> | |
8 | - ) | |
9 | -} | |
10 | 0 | |
▼frontend/callapp/components/Navbar.tsx
+9-0
| @@ -0,0 +1,9 @@ | ||
1 | +import React from 'react' | |
2 | + | |
3 | +const Navbar = () => { | |
4 | + return ( | |
5 | + <div>Navbar</div> | |
6 | + ) | |
7 | +} | |
8 | + | |
9 | +export default Navbar | |
0 | 10 | |
▼frontend/callapp/components/Sidebar.tsx
+39-0
| @@ -0,0 +1,39 @@ | ||
1 | +"use client"; | |
2 | +import Image from "next/image"; | |
3 | +import Link from "next/link"; | |
4 | +import { usePathname } from "next/navigation"; | |
5 | + | |
6 | +import { sidebarLinks } from "@/constants"; | |
7 | +import { cn } from "@/lib/utils"; | |
8 | + | |
9 | +const Sidebar = () => { | |
10 | + const pathname = usePathname(); | |
11 | + | |
12 | + return ( | |
13 | + <section className="sticky left-0 top-0 flex h-screen w-fit flex-col justify-between bg-dark-1 p-6 pt-28 text-white lg:w-[264px]"> | |
14 | + <div className="flex flex-1 flex-col gap-6"> | |
15 | + {sidebarLinks.map((item) => { | |
16 | + const isActive = | |
17 | + pathname === item.route || pathname.startsWith(`${item.route}/`); | |
18 | + | |
19 | + return ( | |
20 | + <Link | |
21 | + href={item.route} | |
22 | + key={item.label} | |
23 | + className={cn( | |
24 | + "flex gap-4 items-center p-4 rounded-lg justify-start", | |
25 | + { | |
26 | + "bg-blue-1": isActive, | |
27 | + } | |
28 | + )} | |
29 | + > | |
30 | + | |
31 | + </Link> | |
32 | + ); | |
33 | + })} | |
34 | + </div> | |
35 | + </section> | |
36 | + ); | |
37 | +}; | |
38 | + | |
39 | +export default Sidebar; | |
0 | 40 | |
▼frontend/callapp/constants/index.ts
+28-0
| @@ -0,0 +1,28 @@ | ||
1 | +export const sidebarLinks = [ | |
2 | + { | |
3 | + imgURL: '/icons/Home.svg', | |
4 | + route: '/', | |
5 | + label: 'Home', | |
6 | + }, | |
7 | + | |
8 | + { | |
9 | + imgURL: '/icons/upcoming.svg', | |
10 | + route: '/upcoming', | |
11 | + label: 'Upcoming', | |
12 | + }, | |
13 | + { | |
14 | + imgURL: '/icons/previous.svg', | |
15 | + route: '/previous', | |
16 | + label: 'Previous', | |
17 | + }, | |
18 | + { | |
19 | + imgURL: '/icons/Video.svg', | |
20 | + route: '/recordings', | |
21 | + label: 'Recordings', | |
22 | + }, | |
23 | + { | |
24 | + imgURL: '/icons/add-personal.svg', | |
25 | + route: '/personal-room', | |
26 | + label: 'Personal Room', | |
27 | + }, | |
28 | +]; | |
0 | 29 | |
▼frontend/callapp/tailwind.config.ts
+4-0
| @@ -19,6 +19,10 @@ const config = { | ||
19 | 19 | }, |
20 | 20 | extend: { |
21 | 21 | colors: { |
22 | + dark:{ | |
23 | + 1:'#1C1F2E', | |
24 | + 2:'#161925', | |
25 | + }, | |
22 | 26 | border: "hsl(var(--border))", |
23 | 27 | input: "hsl(var(--input))", |
24 | 28 | ring: "hsl(var(--ring))", |
25 | 29 | |