Skip to content

Commit 39358a7

Browse files
Oscar-ggOscar-gg
authored
Merge pull request #42 from RoBorregos/styling
style: problem table and resources scroll
2 parents a09d4fc + 65bc0d4 commit 39358a7

File tree

6 files changed

+103
-81
lines changed

6 files changed

+103
-81
lines changed

‎prisma/schema.prisma‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@ model Week {
6464
isBlocked Boolean
6565
color String
6666
resources String[]
67-
detailResources Resource[]
6867
problems Problem[]
68+
detailResources Resource[]
6969
}
7070

7171
model Resource {
@@ -97,8 +97,8 @@ model AdditionalContent {
9797
}
9898

9999
enum Difficulty {
100-
WARMUP
101100
MEDIUM
102-
HARDER
103101
INSANE
102+
WARMUP
103+
HARDER
104104
}

‎src/app/(pages)/resources/page.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
'use client';
1+
"use client";
22
import { useState } from "react";
33
import { motion, AnimatePresence } from "framer-motion";
44
import Resources from "~/app/_components/nav/navResources";
@@ -8,27 +8,27 @@ const HomeResources = () => {
88
const [selectedResource, setSelectedResource] = useState("Resources Page");
99

1010
return (
11-
<div className="flex">
11+
<div className="flex">
1212
<div className="w-1/4 overflow-y-auto">
13-
<Resources onSelect={setSelectedResource} selected={selectedResource}/>
13+
<Resources onSelect={setSelectedResource} selected={selectedResource} />
1414
</div>
15-
<div className="w-3/4 overflow-y-auto">
15+
<div className="w-3/4 overflow-y-auto">
1616
<AnimatePresence mode="wait">
1717
<motion.div
1818
key={selectedResource}
1919
initial={{ opacity: 0, y: 10 }}
2020
animate={{ opacity: 1, y: 0 }}
2121
exit={{ opacity: 0, y: -10 }}
2222
transition={{ duration: 0.35 }}
23-
className="p-6 flex-1 text-white relative"
23+
className="relative flex-1 p-6 text-white"
2424
>
25-
<h1 className="text-4xl font-bold mb-4">{selectedResource}</h1>
26-
<ResourceContent topic={selectedResource}/>
25+
<h1 className="mb-4 text-4xl font-bold">{selectedResource}</h1>
26+
<ResourceContent topic={selectedResource} />
2727
</motion.div>
2828
</AnimatePresence>
2929
</div>
3030
</div>
3131
);
3232
};
3333

34-
export default HomeResources;
34+
export default HomeResources;

‎src/app/_components/nav/navResources.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
type NavResourcesProps = {
22
onSelect: (topic: string) => void;
33
selected: string;
4-
}
4+
};
55

66
const topics = [
77
"Complexities and Analysis of Algorithm",
@@ -29,16 +29,12 @@ const topics = [
2929

3030
const Resources = ({ onSelect, selected }: NavResourcesProps) => {
3131
return (
32-
<nav className="flex flex-col gap-2 p-4 text-white min-w-[200px] h-screen overflow-y-auto">
32+
<nav className="flex max-h-[75vh] min-w-[200px] flex-col gap-2 overflow-y-auto p-4 text-white">
3333
{topics.map((topic) => (
3434
<button
3535
key={topic}
3636
onClick={() => onSelect(topic)}
37-
className={`
38-
text-left p-2 rounded duration-300
39-
hover:bg-gray-700 hover:scale-105
40-
${selected === topic ? "underline font-semibold bg-gray-800" : ""}
41-
`}
37+
className={`rounded p-2 text-left duration-300 hover:scale-105 hover:bg-gray-700 ${selected === topic ? "bg-gray-800 font-semibold underline" : ""} `}
4238
>
4339
{topic}
4440
</button>
@@ -47,4 +43,4 @@ const Resources = ({ onSelect, selected }: NavResourcesProps) => {
4743
);
4844
};
4945

50-
export default Resources;
46+
export default Resources;

‎src/app/_components/week/weekCard.tsx‎

Lines changed: 46 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,55 @@
1+
"use client";
12
import Link from "next/link";
3+
import { useRouter } from "next/navigation";
24
import { cn } from "utils/merge";
35
import { FaLock } from "react-icons/fa6";
46

57
interface CardProps {
6-
title: string,
7-
description: string,
8-
id: string,
9-
isBlocked: boolean,
10-
bgColor: string,
11-
textColor: string
12-
};
8+
title: string;
9+
description: string;
10+
id: string;
11+
isBlocked: boolean;
12+
bgColor: string;
13+
textColor: string;
14+
}
1315

14-
const WeekCard = ({ title, description, id, isBlocked, bgColor, textColor }: CardProps) => {
16+
const WeekCard = ({
17+
title,
18+
description,
19+
id,
20+
isBlocked,
21+
bgColor,
22+
textColor,
23+
}: CardProps) => {
24+
const router = useRouter();
1525

16-
return (
17-
<div className={cn(bgColor || "bg-blue-500", ' rounded-xl p-4 flex flex-col hover:-translate-y-1 hover:-translate-x-1')}>
18-
<div className="flex flex-row items-center text-white justify-between">
19-
<div className="text-lg font-semibold">
20-
{title}
21-
</div>
22-
{isBlocked && (
23-
<FaLock className="text-xl" />
24-
)}
25-
</div>
26-
<div className="text-white font-extralight pb-5">
27-
{description}
28-
</div>
29-
{!isBlocked && (
30-
<Link href={`week/${id}`} className={`${textColor} bg-white text-sm rounded-full px-3 py-1 w-fit`}>
31-
Check it out
32-
</Link>
33-
)}
34-
</div>
35-
)
36-
}
26+
return (
27+
<div
28+
className={cn(
29+
bgColor || "bg-blue-500",
30+
"flex flex-col rounded-xl p-4 hover:-translate-x-1 hover:-translate-y-1",
31+
)}
32+
onClick={(e) => {
33+
if (!isBlocked) {
34+
router.push(`/week/${id}`);
35+
}
36+
}}
37+
>
38+
<div className="flex flex-row items-center justify-between text-white">
39+
<div className="text-lg font-semibold">{title}</div>
40+
{isBlocked && <FaLock className="text-xl" />}
41+
</div>
42+
<div className="pb-5 font-extralight text-white">{description}</div>
43+
{!isBlocked && (
44+
<Link
45+
href={`week/${id}`}
46+
className={`${textColor} w-fit rounded-full bg-white px-3 py-1 text-sm`}
47+
>
48+
Check it out
49+
</Link>
50+
)}
51+
</div>
52+
);
53+
};
3754

3855
export default WeekCard;

‎src/app/_components/week/weekInfo.tsx‎

Lines changed: 39 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@ import Link from "next/link";
99

1010
const getLevelStyles = (level: string) => {
1111
switch (level) {
12-
case 'WARMUP':
13-
return 'bg-teal-500/60 text-teal-100 border-teal-400/50';
14-
case 'MEDIUM':
15-
return 'bg-yellow-500/60 text-yellow-100 border-yellow-400/50';
16-
case 'HARDER':
17-
return 'bg-orange-500/60 text-orange-100 border-orange-400/50';
18-
case 'INSANE':
19-
return 'bg-red-500/60 text-red-100 border-red-400/50';
12+
case "WARMUP":
13+
return "bg-teal-500/60 text-teal-100 border-teal-400/50";
14+
case "MEDIUM":
15+
return "bg-yellow-500/60 text-yellow-100 border-yellow-400/50";
16+
case "HARDER":
17+
return "bg-orange-500/60 text-orange-100 border-orange-400/50";
18+
case "INSANE":
19+
return "bg-red-500/60 text-red-100 border-red-400/50";
2020
default:
21-
return 'bg-gray-500/60 text-gray-100 border-gray-400/50';
21+
return "bg-gray-500/60 text-gray-100 border-gray-400/50";
2222
}
2323
};
2424

@@ -51,20 +51,26 @@ const WeekInfo = async ({ id }: { id: string }) => {
5151
<div className="font-main text-primary-foreground">
5252
{week.description}
5353
</div>
54-
<ul className="text-white list-disc pl-4">
54+
<ul className="list-disc pl-4 text-white">
5555
{week.resources.map((resource, index) => (
56-
<li key={index} className="text-primary-foreground ">
56+
<li key={index} className="text-primary-foreground">
5757
{resource}
5858
</li>
5959
))}
6060
</ul>
6161
</div>
6262

63-
<div className="rounded-xl bg-primary-light p-4 w-max">
63+
<div className="w-max rounded-xl bg-primary-light p-4">
6464
<Subtitle label="Resources" />
65-
<div className="font-main text-sm text-primary-foreground flex flex-col pr-5">
65+
<div className="flex flex-col pr-5 font-main text-sm text-primary-foreground">
6666
{week.detailResources.map((resource, index) => (
67-
<Link href={resource.url} key={index} target="_blank" rel="noopener noreferrer" className="underline hover:text-gray-100 text-nowrap">
67+
<Link
68+
href={resource.url}
69+
key={index}
70+
target="_blank"
71+
rel="noopener noreferrer"
72+
className="text-nowrap underline hover:text-gray-100"
73+
>
6874
{resource.title}
6975
</Link>
7076
))}
@@ -77,41 +83,45 @@ const WeekInfo = async ({ id }: { id: string }) => {
7783
<table className="w-full">
7884
<thead>
7985
<tr className="border-b border-white text-left font-semibold text-white">
80-
<th> Problem </th>
81-
<th> Level </th>
82-
<th> Solved by </th>
83-
<th> Status </th>
86+
<th className="pb-2"> Problem </th>
87+
<th className="pb-2"> Level </th>
88+
<th className="pb-2"> Solved by </th>
89+
<th className="pb-2"> Status </th>
8490
</tr>
8591
</thead>
8692
<tbody>
8793
{week.problems.map((problem) => (
88-
<tr key={problem.id} className="text-white">
89-
<td>
94+
<tr key={problem.id} className="text-white transition duration-300 hover:scale-[1.01] hover:bg-gray-800/50 cursor-pointer">
95+
<td className="py-2">
9096
<a
9197
href={problem.leetcodeUrl}
9298
target="_blank"
9399
rel="noopener noreferrer"
94100
className="hover:underline"
95101
>
96102
<div className="flex flex-row items-center gap-2">
97-
{problem.recommended && (
98-
<IoIosStar />
99-
)}
103+
{problem.recommended && <IoIosStar />}
100104
{problem.name}
101105
</div>
102106
</a>
103107
</td>
104-
<td>
105-
<span className={`px-2 py-1 rounded-full text-xs font-medium border ${getLevelStyles(problem.level)}`}>
106-
{problem.level.charAt(0).toUpperCase() + problem.level.slice(1).toLowerCase()}
108+
<td className="py-2">
109+
<span
110+
className={`rounded-full border px-2 py-1 text-xs font-medium ${getLevelStyles(problem.level)}`}
111+
>
112+
{problem.level.charAt(0).toUpperCase() +
113+
problem.level.slice(1).toLowerCase()}
107114
</span>
108115
</td>
109-
<td>{problem.solvedBy?.length ?? 0}</td>
110-
<td>
116+
<td className="py-2">{problem.solvedBy?.length ?? 0}</td>
117+
<td className="py-2">
111118
{userId ? (
112119
<SolvedToggle
113120
problemId={problem.id}
114-
initialSolved={problem.solvedBy?.some((u) => u.id === userId) ?? false}
121+
initialSolved={
122+
problem.solvedBy?.some((u) => u.id === userId) ??
123+
false
124+
}
115125
userId={userId}
116126
/>
117127
) : (

‎src/app/layout.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,12 @@ export default function RootLayout({
1919
}: Readonly<{ children: React.ReactNode }>) {
2020
return (
2121
<html lang="en" className={`${GeistSans.variable}`}>
22-
<body className="bg-primary min-h-screen">
22+
<body className="min-h-screen bg-primary">
2323
<SessionProvider>
2424
<TRPCReactProvider>
2525
<Navbar />
26-
<div className="px-20 pt-28 pb-10 min-h-screen">
27-
{children}
28-
</div>
26+
{/* consider the height of navbar and footer */}
27+
<div className="min-h-[92vh] px-20 pb-10 pt-28">{children}</div>
2928
<Footer />
3029
</TRPCReactProvider>
3130
</SessionProvider>

0 commit comments

Comments
 (0)