Skip to content

Commit 425c407

Browse files
FooChaoFooChao
committed
Merge remote-tracking branch 'origin/master' into add-user-service
# Conflicts: # frontend/src/app/match/page.tsx # frontend/src/app/page.tsx
2 parents 004c415 + f039ee9 commit 425c407

File tree

6 files changed

+345
-2
lines changed

6 files changed

+345
-2
lines changed

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import ContentPage from "../components/collab/ContentPage";
2+
import SessionHeader from "../components/collab/SessionHeader";
3+
4+
export default function CollabPage() {
5+
return (
6+
<main className="bg-stone-900 h-screen flex flex-col items-center">
7+
<SessionHeader />
8+
<ContentPage />
9+
</main>
10+
);
11+
}

‎frontend/src/app/components/collab/ContentPage.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export default function ContentPage() {
2+
return (
3+
<div className="text-white flex h-full w-full">
4+
{/* Question Section */}
5+
<div className="bg-stone-800 h-full w-[25%]"></div>
6+
7+
{/* Coding Section */}
8+
<div className="h-full w-[50%]"></div>
9+
10+
{/* Chat Section */}
11+
12+
<div className="bg-stone-800 h-full w-[25%]"></div>
13+
</div>
14+
);
15+
}

‎frontend/src/app/components/collab/SessionHeader.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function SessionHeader() {
2+
return (
3+
<header className="bg-stone-800 w-full h-[5%] text-white border-b-2 border-stone-700">
4+
Session Header
5+
</header>
6+
);
7+
}

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
"use client";
2+
3+
import { useState } from "react";
4+
import { Button } from "@/components/ui/button";
5+
import { Spinner } from "@/components/ui/shadcn-io/spinner";
6+
import {
7+
Dialog,
8+
DialogContent,
9+
DialogDescription,
10+
DialogHeader,
11+
DialogTitle,
12+
DialogTrigger,
13+
} from "@/components/ui/dialog";
14+
15+
export default function SearchComponent() {
16+
const [searchStatus, setSearchStatus] = useState(false);
17+
18+
function initializeSearch() {
19+
setSearchStatus(true);
20+
}
21+
22+
return (
23+
<Dialog>
24+
<DialogTrigger asChild>
25+
<Button className="mb-15 w-[80%] bg-black text-white" variant="outline">
26+
Start Searching
27+
</Button>
28+
</DialogTrigger>
29+
<DialogContent className="w-[30%] flex flex-col items-center">
30+
<DialogHeader className="flex items-center">
31+
<DialogTitle>Searching for a match....</DialogTitle>
32+
<DialogDescription>Hold on tight .....</DialogDescription>
33+
</DialogHeader>
34+
<Spinner variant="circle-filled" />
35+
</DialogContent>
36+
</Dialog>
37+
);
38+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Button } from "@/components/ui/button";
21
import TopicsComponent from "../components/match/TopicsComponent";
32
import DifficultyComponent from "../components/match/DifficultyComponent";
3+
import SearchComponent from "../components/match/SearchComponent";
44

55
export default function MatchPage() {
66
return (
@@ -16,7 +16,7 @@ export default function MatchPage() {
1616

1717
<TopicsComponent />
1818

19-
<Button className="mb-15 w-[80%]">Find my partner</Button>
19+
<SearchComponent />
2020
</div>
2121
);
2222
}

‎frontend/src/components/ui/shadcn-io/spinner/index.tsx‎

Lines changed: 272 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,272 @@
1+
import {
2+
LoaderCircleIcon,
3+
LoaderIcon,
4+
LoaderPinwheelIcon,
5+
type LucideProps,
6+
} from "lucide-react";
7+
import { cn } from "@/lib/utils";
8+
9+
type SpinnerVariantProps = Omit<SpinnerProps, "variant">;
10+
11+
const Default = ({ className, ...props }: SpinnerVariantProps) => (
12+
<LoaderIcon className={cn("animate-spin", className)} {...props} />
13+
);
14+
15+
const Circle = ({ className, ...props }: SpinnerVariantProps) => (
16+
<LoaderCircleIcon className={cn("animate-spin", className)} {...props} />
17+
);
18+
19+
const Pinwheel = ({ className, ...props }: SpinnerVariantProps) => (
20+
<LoaderPinwheelIcon className={cn("animate-spin", className)} {...props} />
21+
);
22+
23+
const CircleFilled = ({
24+
className,
25+
size = 24,
26+
...props
27+
}: SpinnerVariantProps) => (
28+
<div className="relative" style={{ width: size, height: size }}>
29+
<div className="absolute inset-0 rotate-180">
30+
<LoaderCircleIcon
31+
className={cn("animate-spin", className, "text-foreground opacity-20")}
32+
size={size}
33+
{...props}
34+
/>
35+
</div>
36+
<LoaderCircleIcon
37+
className={cn("relative animate-spin", className)}
38+
size={size}
39+
{...props}
40+
/>
41+
</div>
42+
);
43+
44+
const Ellipsis = ({ size = 24, ...props }: SpinnerVariantProps) => {
45+
return (
46+
<svg
47+
height={size}
48+
viewBox="0 0 24 24"
49+
width={size}
50+
xmlns="http://www.w3.org/2000/svg"
51+
{...props}
52+
>
53+
<title>Loading...</title>
54+
<circle cx="4" cy="12" fill="currentColor" r="2">
55+
<animate
56+
attributeName="cy"
57+
begin="0;ellipsis3.end+0.25s"
58+
calcMode="spline"
59+
dur="0.6s"
60+
id="ellipsis1"
61+
keySplines=".33,.66,.66,1;.33,0,.66,.33"
62+
values="12;6;12"
63+
/>
64+
</circle>
65+
<circle cx="12" cy="12" fill="currentColor" r="2">
66+
<animate
67+
attributeName="cy"
68+
begin="ellipsis1.begin+0.1s"
69+
calcMode="spline"
70+
dur="0.6s"
71+
keySplines=".33,.66,.66,1;.33,0,.66,.33"
72+
values="12;6;12"
73+
/>
74+
</circle>
75+
<circle cx="20" cy="12" fill="currentColor" r="2">
76+
<animate
77+
attributeName="cy"
78+
begin="ellipsis1.begin+0.2s"
79+
calcMode="spline"
80+
dur="0.6s"
81+
id="ellipsis3"
82+
keySplines=".33,.66,.66,1;.33,0,.66,.33"
83+
values="12;6;12"
84+
/>
85+
</circle>
86+
</svg>
87+
);
88+
};
89+
90+
const Ring = ({ size = 24, ...props }: SpinnerVariantProps) => (
91+
<svg
92+
height={size}
93+
stroke="currentColor"
94+
viewBox="0 0 44 44"
95+
width={size}
96+
xmlns="http://www.w3.org/2000/svg"
97+
{...props}
98+
>
99+
<title>Loading...</title>
100+
<g fill="none" fillRule="evenodd" strokeWidth="2">
101+
<circle cx="22" cy="22" r="1">
102+
<animate
103+
attributeName="r"
104+
begin="0s"
105+
calcMode="spline"
106+
dur="1.8s"
107+
keySplines="0.165, 0.84, 0.44, 1"
108+
keyTimes="0; 1"
109+
repeatCount="indefinite"
110+
values="1; 20"
111+
/>
112+
<animate
113+
attributeName="stroke-opacity"
114+
begin="0s"
115+
calcMode="spline"
116+
dur="1.8s"
117+
keySplines="0.3, 0.61, 0.355, 1"
118+
keyTimes="0; 1"
119+
repeatCount="indefinite"
120+
values="1; 0"
121+
/>
122+
</circle>
123+
<circle cx="22" cy="22" r="1">
124+
<animate
125+
attributeName="r"
126+
begin="-0.9s"
127+
calcMode="spline"
128+
dur="1.8s"
129+
keySplines="0.165, 0.84, 0.44, 1"
130+
keyTimes="0; 1"
131+
repeatCount="indefinite"
132+
values="1; 20"
133+
/>
134+
<animate
135+
attributeName="stroke-opacity"
136+
begin="-0.9s"
137+
calcMode="spline"
138+
dur="1.8s"
139+
keySplines="0.3, 0.61, 0.355, 1"
140+
keyTimes="0; 1"
141+
repeatCount="indefinite"
142+
values="1; 0"
143+
/>
144+
</circle>
145+
</g>
146+
</svg>
147+
);
148+
149+
const Bars = ({ size = 24, ...props }: SpinnerVariantProps) => (
150+
<svg
151+
height={size}
152+
viewBox="0 0 24 24"
153+
width={size}
154+
xmlns="http://www.w3.org/2000/svg"
155+
{...props}
156+
>
157+
<title>Loading...</title>
158+
<style>{`
159+
.spinner-bar {
160+
animation: spinner-bars-animation .8s linear infinite;
161+
animation-delay: -.8s;
162+
}
163+
.spinner-bars-2 {
164+
animation-delay: -.65s;
165+
}
166+
.spinner-bars-3 {
167+
animation-delay: -0.5s;
168+
}
169+
@keyframes spinner-bars-animation {
170+
0% {
171+
y: 1px;
172+
height: 22px;
173+
}
174+
93.75% {
175+
y: 5px;
176+
height: 14px;
177+
opacity: 0.2;
178+
}
179+
}
180+
`}</style>
181+
<rect
182+
className="spinner-bar"
183+
fill="currentColor"
184+
height="22"
185+
width="6"
186+
x="1"
187+
y="1"
188+
/>
189+
<rect
190+
className="spinner-bar spinner-bars-2"
191+
fill="currentColor"
192+
height="22"
193+
width="6"
194+
x="9"
195+
y="1"
196+
/>
197+
<rect
198+
className="spinner-bar spinner-bars-3"
199+
fill="currentColor"
200+
height="22"
201+
width="6"
202+
x="17"
203+
y="1"
204+
/>
205+
</svg>
206+
);
207+
208+
const Infinite = ({ size = 24, ...props }: SpinnerVariantProps) => (
209+
<svg
210+
height={size}
211+
preserveAspectRatio="xMidYMid"
212+
viewBox="0 0 100 100"
213+
width={size}
214+
xmlns="http://www.w3.org/2000/svg"
215+
{...props}
216+
>
217+
<title>Loading...</title>
218+
<path
219+
d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z"
220+
fill="none"
221+
stroke="currentColor"
222+
strokeDasharray="205.271142578125 51.317785644531256"
223+
strokeLinecap="round"
224+
strokeWidth="10"
225+
style={{
226+
transform: "scale(0.8)",
227+
transformOrigin: "50px 50px",
228+
}}
229+
>
230+
<animate
231+
attributeName="stroke-dashoffset"
232+
dur="2s"
233+
keyTimes="0;1"
234+
repeatCount="indefinite"
235+
values="0;256.58892822265625"
236+
/>
237+
</path>
238+
</svg>
239+
);
240+
241+
export type SpinnerProps = LucideProps & {
242+
variant?:
243+
| "default"
244+
| "circle"
245+
| "pinwheel"
246+
| "circle-filled"
247+
| "ellipsis"
248+
| "ring"
249+
| "bars"
250+
| "infinite";
251+
};
252+
253+
export const Spinner = ({ variant, ...props }: SpinnerProps) => {
254+
switch (variant) {
255+
case "circle":
256+
return <Circle {...props} />;
257+
case "pinwheel":
258+
return <Pinwheel {...props} />;
259+
case "circle-filled":
260+
return <CircleFilled {...props} />;
261+
case "ellipsis":
262+
return <Ellipsis {...props} />;
263+
case "ring":
264+
return <Ring {...props} />;
265+
case "bars":
266+
return <Bars {...props} />;
267+
case "infinite":
268+
return <Infinite {...props} />;
269+
default:
270+
return <Default {...props} />;
271+
}
272+
};

0 commit comments

Comments
 (0)