Skip to content

Commit cccb125

Browse files
LemonDrewLemonDrew
committed
Refactor page into separate components
1 parent dff9891 commit cccb125

File tree

4 files changed

+249
-1
lines changed

4 files changed

+249
-1
lines changed

‎frontend/src/app/components/home/WelcomeComponent.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@ import { Card, CardTitle, CardHeader, CardContent } from "@/components/ui/card";
44
import { Button } from "@/components/ui/button";
55

66
export default function WelcomePage() {
7+
8+
function directToHome() {
9+
window.location.href = "/match";
10+
}
11+
712
return (
813
<Card className="m-10 h-[20%]">
914
<CardHeader>
@@ -15,7 +20,7 @@ export default function WelcomePage() {
1520
</CardHeader>
1621

1722
<CardContent>
18-
<Button className="w-30 bg-white border-black text-black border-2 border-black">
23+
<Button className="w-30 bg-white border-black text-black border-2 border-black" onClick={() => directToHome()}>
1924
Start
2025
</Button>
2126
</CardContent>

‎frontend/src/app/components/match/TopicsComponent.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
2+
"use client"
3+
4+
import { IoIosSettings } from "react-icons/io";
5+
import { CiBookmark } from "react-icons/ci";
6+
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
7+
import { Button } from "@/components/ui/button";
8+
9+
export default function TopicsComponent() {
10+
return (
11+
<Card className="w-[80%] flex-1 m-10">
12+
<div className="flex w-full ">
13+
<CiBookmark className="ml-3 mt-1 text-2xl" />
14+
<CardHeader className="ml-5 flex-1 ml-0 pl-3">
15+
<CardTitle className="text-2xl font-bold">
16+
Topics
17+
</CardTitle>
18+
<CardDescription>
19+
Choose the topics that you want to focus on
20+
</CardDescription>
21+
</CardHeader>
22+
</div>
23+
24+
<CardContent className="flex justify-evenly h-full items-center gap-3">
25+
<Button className="flex-1 h-[50%] bg-gray-200 text-black">
26+
Strings
27+
</Button>
28+
29+
<Button className="flex-1 h-[50%] bg-gray-200 text-black">
30+
Linked Lists
31+
</Button>
32+
33+
<Button className="flex-1 h-[50%] bg-gray-200 text-black">
34+
Dyanmic Programming
35+
</Button>
36+
37+
</CardContent>
38+
</Card>
39+
)
40+
}

‎frontend/src/app/match/page.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
2+
import { IoIosSettings } from "react-icons/io";
3+
import { CiBookmark } from "react-icons/ci";
4+
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
5+
import { Button } from "@/components/ui/button";
6+
import TopicsComponent from "../components/match/TopicsComponent";
7+
8+
export default function MatchPage() {
9+
return (
10+
<div className="h-screen flex flex-col items-center justify-center">
11+
<div className="text-center">
12+
<h1 className="text-5xl font-bold mt-30">
13+
Find your coding partner
14+
</h1>
15+
<h1 className="text-lg m-2">
16+
Set your preferences and we will find the best match for you!
17+
</h1>
18+
</div>
19+
20+
<Card className="w-[80%] flex-1 m-10">
21+
<div className="flex w-full ">
22+
<IoIosSettings className="ml-3 mt-1 text-2xl" />
23+
<CardHeader className="ml-5 flex-1 ml-0 pl-3">
24+
<CardTitle className="text-2xl font-bold">
25+
Difficult Level
26+
</CardTitle>
27+
<CardDescription>
28+
Select one of more difficulty levels that you would like to practice
29+
</CardDescription>
30+
</CardHeader>
31+
</div>
32+
33+
<CardContent className="flex justify-evenly h-full items-center gap-3">
34+
<Button className="flex-1 h-[50%] bg-green-200 text-black">
35+
Easy
36+
</Button>
37+
38+
<Button className="flex-1 h-[50%] bg-yellow-200 text-black">
39+
Medium
40+
</Button>
41+
42+
<Button className="flex-1 h-[50%] bg-red-200 text-black">
43+
Hard
44+
</Button>
45+
46+
</CardContent>
47+
</Card>
48+
49+
<TopicsComponent/>
50+
51+
52+
53+
<Button className="mb-15 w-[80%]">
54+
Find my partner
55+
</Button>
56+
57+
58+
</div>
59+
)
60+
}

‎frontend/src/components/ui/dialog.tsx‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as DialogPrimitive from "@radix-ui/react-dialog"
5+
import { XIcon } from "lucide-react"
6+
7+
import { cn } from "@/lib/utils"
8+
9+
function Dialog({
10+
...props
11+
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
12+
return <DialogPrimitive.Root data-slot="dialog" {...props} />
13+
}
14+
15+
function DialogTrigger({
16+
...props
17+
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
18+
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
19+
}
20+
21+
function DialogPortal({
22+
...props
23+
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
24+
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
25+
}
26+
27+
function DialogClose({
28+
...props
29+
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
30+
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
31+
}
32+
33+
function DialogOverlay({
34+
className,
35+
...props
36+
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
37+
return (
38+
<DialogPrimitive.Overlay
39+
data-slot="dialog-overlay"
40+
className={cn(
41+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
42+
className
43+
)}
44+
{...props}
45+
/>
46+
)
47+
}
48+
49+
function DialogContent({
50+
className,
51+
children,
52+
showCloseButton = true,
53+
...props
54+
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
55+
showCloseButton?: boolean
56+
}) {
57+
return (
58+
<DialogPortal data-slot="dialog-portal">
59+
<DialogOverlay />
60+
<DialogPrimitive.Content
61+
data-slot="dialog-content"
62+
className={cn(
63+
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
64+
className
65+
)}
66+
{...props}
67+
>
68+
{children}
69+
{showCloseButton && (
70+
<DialogPrimitive.Close
71+
data-slot="dialog-close"
72+
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
73+
>
74+
<XIcon />
75+
<span className="sr-only">Close</span>
76+
</DialogPrimitive.Close>
77+
)}
78+
</DialogPrimitive.Content>
79+
</DialogPortal>
80+
)
81+
}
82+
83+
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
84+
return (
85+
<div
86+
data-slot="dialog-header"
87+
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
88+
{...props}
89+
/>
90+
)
91+
}
92+
93+
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
94+
return (
95+
<div
96+
data-slot="dialog-footer"
97+
className={cn(
98+
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
99+
className
100+
)}
101+
{...props}
102+
/>
103+
)
104+
}
105+
106+
function DialogTitle({
107+
className,
108+
...props
109+
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
110+
return (
111+
<DialogPrimitive.Title
112+
data-slot="dialog-title"
113+
className={cn("text-lg leading-none font-semibold", className)}
114+
{...props}
115+
/>
116+
)
117+
}
118+
119+
function DialogDescription({
120+
className,
121+
...props
122+
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
123+
return (
124+
<DialogPrimitive.Description
125+
data-slot="dialog-description"
126+
className={cn("text-muted-foreground text-sm", className)}
127+
{...props}
128+
/>
129+
)
130+
}
131+
132+
export {
133+
Dialog,
134+
DialogClose,
135+
DialogContent,
136+
DialogDescription,
137+
DialogFooter,
138+
DialogHeader,
139+
DialogOverlay,
140+
DialogPortal,
141+
DialogTitle,
142+
DialogTrigger,
143+
}

0 commit comments

Comments
 (0)