Skip to content

Commit 0a893d4

Browse files
LemonDrewLemonDrew
committed
Extract search logic into a separate file
1 parent c6b52e1 commit 0a893d4

File tree

3 files changed

+307
-11
lines changed

3 files changed

+307
-11
lines changed

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

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

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

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
1-
import { IoIosSettings } from "react-icons/io";
2-
import { CiBookmark } from "react-icons/ci";
3-
import {
4-
Card,
5-
CardHeader,
6-
CardTitle,
7-
CardDescription,
8-
CardContent,
9-
} from "@/components/ui/card";
10-
import { Button } from "@/components/ui/button";
111
import TopicsComponent from "../components/match/TopicsComponent";
122
import DifficultyComponent from "../components/match/DifficultyComponent";
3+
import SearchComponent from "../components/match/SearchComponent";
134

145
export default function MatchPage() {
6+
157
return (
168
<div className="h-screen flex flex-col items-center justify-center">
179
<div className="text-center">
@@ -25,7 +17,7 @@ export default function MatchPage() {
2517

2618
<TopicsComponent />
2719

28-
<Button className="mb-15 w-[80%]">Find my partner</Button>
20+
<SearchComponent />
2921
</div>
3022
);
3123
}

‎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)