update

swadhinbiswas committed 2 years ago
ce5d72c
1 parent 1661c90
commit ce5d72c
9 files changed
+122 -16
▼frontend/callapp/app/(root)/(home)/layout.tsx
+28-0
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
-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
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
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
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
-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
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
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
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
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