Skip to content

Commit f9360e6

Browse files
nikhil-ravinikhil-ravi
committed
Changed questions list to grid layout and added paidonly and solutionsAvailable tags.
1 parent 2e1d40a commit f9360e6

File tree

13 files changed

+241
-106
lines changed

13 files changed

+241
-106
lines changed

‎src/app/globals.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,3 +75,8 @@ ul {
7575
margin-right: 1rem;
7676
padding: 1rem;
7777
}
78+
79+
/* div {
80+
border-width: 2px;
81+
border-color: brown;
82+
} */

‎src/app/head.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ export default function Head() {
55
<meta content="width=device-width, initial-scale=1" name="viewport" />
66
<meta name="description" content="Generated by create next app" />
77
<link rel="icon" href="/favicon.ico" />
8-
<script
8+
{/* <script
99
async
1010
src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_GOOGLE_ADSENSE}`}
1111
crossOrigin="anonymous"
12-
></script>
12+
></script> */}
1313
</>
1414
);
1515
}

‎src/app/layout.jsx

Lines changed: 5 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import "./globals.css";
2-
import Link from "next/link";
3-
import { AiFillLinkedin, AiFillGithub } from "react-icons/ai";
4-
import { SiGooglescholar } from "react-icons/si";
5-
import { Providers } from "./Providers";
2+
import { Providers } from "@/components/Providers";
63
import Script from "next/script";
74
import * as gtag from "../lib/gtag";
8-
import { DarkModeButton } from "./DarkModeButton";
95
import Head from "./head";
6+
import NavigationBar from "@/components/NavigationBar";
107

118
export default function RootLayout({ children }) {
129
return (
@@ -32,35 +29,9 @@ export default function RootLayout({ children }) {
3229
{/* <Head /> */}
3330
<body>
3431
<Providers>
35-
<main className="dark:bg-primary-800 min-h-screen px-10 flex-col overflow-y-scroll">
36-
<section title="Navigation Bar" className="min-w-full mx-auto">
37-
<nav className="flex pt-10 mb-12">
38-
<div className="flex-grow">
39-
<h1 className="text-xl font-burtons text-left">
40-
<Link href="/">scuffedcode</Link>
41-
</h1>
42-
</div>
43-
<ul className="flex space-x-5 list-none m-0 p-0 text-right">
44-
<li>
45-
<DarkModeButton />
46-
</li>
47-
<li>
48-
<Link href="https://www.linkedin.com/in/nikhil--ravi/">
49-
<AiFillLinkedin className="cursor-pointer text-xl" />
50-
</Link>
51-
</li>
52-
<li>
53-
<Link href="https://scholar.google.com/citations?user=Ka5q7nIAAAAJ&hl=en">
54-
<SiGooglescholar className="cursor-pointer text-xl" />
55-
</Link>
56-
</li>
57-
<li>
58-
<Link href="https://github.com/ChrisLawrieNikhilRavi/leetcode-nextjs">
59-
<AiFillGithub className="cursor-pointer text-xl" />
60-
</Link>
61-
</li>
62-
</ul>
63-
</nav>
32+
<main className="dark:bg-primary-800 min-h-screen px-10 flex-col">
33+
<section title="Navigation Bar" className="mx-auto">
34+
<NavigationBar />
6435
</section>
6536
<section className="flex flex-grow">{children}</section>
6637
</main>

‎src/app/not-found.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
"use client";
2+
import { Chip } from "@material-tailwind/react";
3+
import Link from "next/link";
4+
import { AiFillHome } from "react-icons/ai";
5+
6+
export default function FourOhFour() {
7+
return (
8+
<div className="flex-col w-full mx-auto box-border min-h-[100vh] items-center text-center justify-center">
9+
<div>
10+
<div className="px-4 mx-auto">
11+
<div className="mt-[10em] -mx-4 relative min-h-[1px] px-4">
12+
<div class="flex min-h-[1px] px-4 justify-center items-center mx-auto mb-4">
13+
<strong className="font-sedgwick text-9xl">404</strong>
14+
</div>
15+
16+
<div class="min-h-[1px] px-4 msg">
17+
<h2>
18+
<strong>Page Not Found</strong>
19+
</h2>
20+
<p>Sorry, but that question has not yet been developed...</p>
21+
<br />
22+
<Link href="/" className="text-center">
23+
<Chip
24+
value="Back to Questions"
25+
className="text-primary-800 dark:text-primary-100 bg-inherit border-[#ccc]"
26+
icon={
27+
<AiFillHome className="text-primary-800 dark:text-primary-100 text-lg" />
28+
}
29+
/>
30+
</Link>
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
);
37+
}

‎src/app/page.jsx

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,14 @@ import { BsSearch } from "react-icons/bs";
44
import { useEffect, useState } from "react";
55
import QuestionsList from "@/components/QuestionsList";
66
import { getQuestionsList } from "@/utils/controllers";
7+
import { IconButton, Input, Tooltip } from "@material-tailwind/react";
8+
import { FaRandom } from "react-icons/fa";
9+
import Link from "next/link";
710

811
export default function Home() {
912
const [searchTerm, setSearchTerm] = useState("");
1013
const [isLoading, setLoading] = useState(false);
14+
const [randomEl, setRandomEl] = useState(1);
1115
const [data, setData] = useState([]);
1216
useEffect(() => {
1317
setLoading(true);
@@ -17,47 +21,41 @@ export default function Home() {
1721
}
1822
getData(searchTerm).then((data) => {
1923
setData(data);
24+
setRandomEl(Math.floor(Math.random() * data.length));
2025
setLoading(false);
2126
});
2227
}, [searchTerm]);
2328

2429
return (
2530
<div className="min-w-full mx-auto">
26-
<section title="Heading">
31+
<div className="max-w-6xl mx-auto">
2732
<div>
2833
<h3 className="text-center text-2xl mb-3">Questions</h3>
2934
</div>
30-
</section>
31-
<section title="Search Bar">
32-
<div className="text-center align-middle my-4 ">
33-
<label
34-
htmlFor="Search"
35-
className="flex rounded-md border-2 items-end space-x-2 px-2"
36-
>
37-
<span className="py-2">
38-
<BsSearch />
39-
</span>
40-
<div className="text-left flex-grow">
41-
<input
42-
type="text"
43-
className="p-1 bg-inherit md:border-dotted min-w-[100%] focus:border-dashed focus:none text-primary-800 dark:text-primary-100"
44-
placeholder="Search..."
45-
value={searchTerm}
46-
onChange={(event) => setSearchTerm(event.target.value)}
47-
/>
48-
</div>
49-
</label>
35+
<div className="flex items-center gap-2">
36+
<Input
37+
label="Search..."
38+
icon={<BsSearch />}
39+
onChange={(event) => setSearchTerm(event.target.value)}
40+
/>
41+
<Tooltip content="Pick a question at random">
42+
<IconButton variant="outlined" color="gray">
43+
<Link href={`/questions/${randomEl}`}>
44+
<FaRandom />
45+
</Link>
46+
</IconButton>
47+
</Tooltip>
5048
</div>
51-
</section>
52-
{isLoading ? (
53-
<p>Loading...</p>
54-
) : !data ? (
55-
<p>No questions matching the current search...</p>
56-
) : (
57-
<section title="Questions List">
49+
{isLoading ? (
50+
<p className="text-center p-10">Loading...</p>
51+
) : !data ? (
52+
<p className="text-center p-10">
53+
No questions matching the current search...
54+
</p>
55+
) : (
5856
<QuestionsList questions={data} />
59-
</section>
60-
)}
57+
)}
58+
</div>
6159
</div>
6260
);
6361
}

‎src/app/questions/[qid]/not-found.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
"use client";
22
import { Chip } from "@material-tailwind/react";
3-
import Image from "next/image";
43
import Link from "next/link";
54
import { AiFillHome } from "react-icons/ai";
65

‎src/app/questions/[qid]/page.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { getQuestion, getSimilarQuestions } from "@/utils/controllers";
2-
import QuestionNavigator from "@components/QuestionNavigator";
3-
import { QuestionBody } from "@components/QuestionBody";
4-
import { SolutionWrapper } from "@components/SolutionWrapper";
2+
import QuestionNavigator from "@/components/QuestionNavigator";
3+
import { QuestionBody } from "@/components/QuestionBody";
4+
import { SolutionWrapper } from "@/components/SolutionWrapper";
55
import { notFound } from "next/navigation";
66
import isInteger from "@/utils/isInteger";
77
isInteger;

‎src/app/questions/not-found.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
"use client";
2+
import { Chip } from "@material-tailwind/react";
3+
import Link from "next/link";
4+
import { AiFillHome } from "react-icons/ai";
5+
6+
export default function FourOhFour() {
7+
return (
8+
<div className="flex-col w-full mx-auto box-border min-h-[100vh] items-center text-center justify-center">
9+
<div>
10+
<div className="px-4 mx-auto">
11+
<div className="mt-[10em] -mx-4 relative min-h-[1px] px-4">
12+
<div class="flex min-h-[1px] px-4 justify-center items-center mx-auto mb-4">
13+
<strong className="font-sedgwick text-9xl">404</strong>
14+
</div>
15+
16+
<div class="min-h-[1px] px-4 msg">
17+
<h2>
18+
<strong>Page Not Found</strong>
19+
</h2>
20+
<p>Sorry, but that question has not yet been developed...</p>
21+
<br />
22+
<Link href="/" className="text-center">
23+
<Chip
24+
value="Back to Questions"
25+
className="text-primary-800 dark:text-primary-100 bg-inherit border-[#ccc]"
26+
icon={
27+
<AiFillHome className="text-primary-800 dark:text-primary-100 text-lg" />
28+
}
29+
/>
30+
</Link>
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
);
37+
}

‎src/components/NavigationBar.jsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import Link from "next/link";
2+
import { AiFillLinkedin, AiFillGithub } from "react-icons/ai";
3+
import { SiGooglescholar } from "react-icons/si";
4+
import { DarkModeButton } from "./DarkModeButton";
5+
6+
const NavigationBar = () => (
7+
<nav className="flex p-10 mb-4 items-center justify-between text-center">
8+
<h1 className="flex-grow text-xl md:text-2xl lg:text-3xl font-burtons text-left">
9+
<Link href="/">scuffedcode</Link>
10+
</h1>
11+
<div className="flex-shrink p-0 flex space-x-5 text-center">
12+
<DarkModeButton />
13+
<Link href="https://www.linkedin.com/in/nikhil--ravi/">
14+
<AiFillLinkedin className="cursor-pointer text-xl" />
15+
</Link>
16+
17+
<Link href="https://scholar.google.com/citations?user=Ka5q7nIAAAAJ&hl=en">
18+
<SiGooglescholar className="cursor-pointer text-xl" />
19+
</Link>
20+
21+
<Link href="https://github.com/ChrisLawrieNikhilRavi/leetcode-nextjs">
22+
<AiFillGithub className="cursor-pointer text-xl" />
23+
</Link>
24+
</div>
25+
</nav>
26+
);
27+
28+
export default NavigationBar;

‎src/components/Pagination.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const Pagination = ({
3636
}
3737
}
3838
return (
39-
<nav className="flex justify-center items-center">
39+
<nav className="flex justify-center items-center my-4">
4040
<ul className="inline-flex gap-2 list-none m-0 p-0">
4141
{pageNumbersToShow.indexOf(1) < 0 && (
4242
<>

‎src/components/QuestionCard.jsx

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import {
2+
Card,
3+
CardHeader,
4+
CardBody,
5+
CardFooter,
6+
Typography,
7+
Tooltip,
8+
} from "@material-tailwind/react";
9+
import TopicTag from "@/components/TopicTags";
10+
import Link from "next/link";
11+
import { BsLockFill } from "react-icons/bs";
12+
import { SiPython } from "react-icons/si";
13+
14+
const QuestionCard = ({
15+
QID,
16+
title,
17+
categorySlug,
18+
difficulty,
19+
topicTags,
20+
paidOnly,
21+
solutionAvailable,
22+
key,
23+
}) => {
24+
return (
25+
<Card
26+
key={key}
27+
className="mx-auto w-[320px] lg:w-[460px] bg-inherit border-gray-700 border-2 shadow-lg z-10 pb-4 "
28+
>
29+
<CardHeader
30+
floated={false}
31+
className="bg-inherit flex justify-between shadow-none items-center"
32+
>
33+
<Typography className=" text-primary-800 dark:text-primary-100">
34+
{categorySlug}
35+
</Typography>
36+
{paidOnly && (
37+
<Tooltip content="This question is paid only on Leetcode">
38+
<Typography>
39+
<BsLockFill className="text-lg text-yellow-800 flex-1" />
40+
</Typography>
41+
</Tooltip>
42+
)}
43+
{solutionAvailable && (
44+
<Tooltip content="Solution Available">
45+
<Typography>
46+
<SiPython className="text-lg text-blue-900 flex-1" />
47+
</Typography>
48+
</Tooltip>
49+
)}
50+
<Typography
51+
className={`${
52+
difficulty === "Easy"
53+
? "bg-difficulty-Easy"
54+
: difficulty === "Medium"
55+
? "bg-difficulty-Medium"
56+
: "bg-difficulty-Hard"
57+
}`}
58+
textGradient
59+
>
60+
{difficulty}
61+
</Typography>
62+
</CardHeader>
63+
<CardBody className="border-y-2 border-y-gray-400 dark:border-y-gray-700 ">
64+
<Typography
65+
variant="h4"
66+
className="text-primary-800 dark:text-primary-100"
67+
>
68+
<Link href={`/questions/${QID}`} className="flex-grow">
69+
{QID}. {title}
70+
</Link>
71+
</Typography>
72+
</CardBody>
73+
<CardFooter className="flex items-center overflow-x-scroll gap-7 py-2">
74+
{topicTags &&
75+
topicTags.map((tag) => (
76+
<TopicTag
77+
key={`${1}-${tag}`}
78+
value={tag}
79+
className="bg-primary-300 dark:bg-primary-600 text-primary-800 dark:text-primary-100"
80+
/>
81+
))}
82+
</CardFooter>
83+
</Card>
84+
);
85+
};
86+
87+
export default QuestionCard;

0 commit comments

Comments
 (0)