Skip to content

Commit aac1480

Browse files
edum0edum0
committed
final commit
2 parents 9938c71 + d1df7f3 commit aac1480

File tree

17 files changed

+370
-161
lines changed

17 files changed

+370
-161
lines changed

‎app/globals.css‎

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
--popover: #111a14;
7474
--popover-foreground: #f5f5f5;
7575

76-
--primary: #1ba94c;
76+
--primary: #242424;
7777
--primary-foreground: #ffffff;
7878

7979
--secondary: #1f2a24;
@@ -150,25 +150,3 @@ body {
150150
code {
151151
font-family: "Inter", monospace;
152152
}
153-
154-
155-
button:hover {
156-
transform: scale(1.02);
157-
cursor: pointer;
158-
}
159-
160-
button:active {
161-
transform: scale(1);
162-
}
163-
164-
.btn-green {
165-
background: linear-gradient(90deg, #32ca67, #26ad55);
166-
background-size: 200% 100%;
167-
background-position: left;
168-
color: #ffffff;
169-
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.35);
170-
}
171-
172-
.btn-green:hover {
173-
background-position: right;
174-
}

‎app/layout.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Metadata } from "next";
22
import { Inter, Roboto } from "next/font/google";
33
import "./globals.css";
4+
import Header from "@/components/Header/Header";
45

56
const inter = Inter({
67
subsets: ["latin"],
@@ -26,6 +27,7 @@ export default function RootLayout({
2627
return (
2728
<html lang="en">
2829
<body className={`${inter.variable} ${roboto.variable} antialiased`}>
30+
<Header />
2931
{children}
3032
</body>
3133
</html>

‎app/not-found.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import React from "react";
44
import Image from "next/image";
55
import { useRouter } from "next/navigation";
6-
import { Button } from "@/components/ui/button";
6+
import Button from "@/components/ui/Button";
77

88
export default function NotFound() {
99
const router = useRouter();
@@ -26,9 +26,9 @@ export default function NotFound() {
2626

2727
{/* Home Button using your shared Button component */}
2828
<Button
29-
className="mt-12 w-32 bg-gradient-to-r from-green-500 to-green-600 text-xl px-8 py-6 font-[Ballega]"
29+
className="mt-12 text-xl px-8 py-6 font-[Ballega] font-extralight"
3030
onClick={() => router.push("/")}
31-
variant="default"
31+
variant="green"
3232
size="lg"
3333
>
3434
Home

‎app/page.tsx‎

Lines changed: 3 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,9 @@
1-
import Image from "next/image";
1+
import Link from "next/link";
22

33
export default function Home() {
44
return (
5-
<div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
6-
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
7-
<Image
8-
className="invert hue-rotate-180"
9-
src="/next.svg"
10-
alt="Next.js logo"
11-
width={180}
12-
height={38}
13-
priority
14-
/>
15-
16-
<ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
17-
<li className="mb-2 tracking-[-.01em]">
18-
Get started by editing{" "}
19-
<code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
20-
app/page.tsx
21-
</code>
22-
.
23-
</li>
24-
<li className="tracking-[-.01em]">
25-
Save and see your changes instantly.
26-
</li>
27-
</ol>
28-
29-
<div className="flex gap-4 items-center flex-col sm:flex-row">
30-
<a
31-
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
32-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
33-
target="_blank"
34-
rel="noopener noreferrer"
35-
>
36-
<Image
37-
className="dark:invert"
38-
src="/vercel.svg"
39-
alt="Vercel logomark"
40-
width={20}
41-
height={20}
42-
/>
43-
Deploy now
44-
</a>
45-
<a
46-
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#393939] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
47-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
48-
target="_blank"
49-
rel="noopener noreferrer"
50-
>
51-
Read our docs
52-
</a>
53-
</div>
54-
</main>
55-
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
56-
<a
57-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
58-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
59-
target="_blank"
60-
rel="noopener noreferrer"
61-
>
62-
<Image
63-
aria-hidden
64-
src="/file.svg"
65-
alt="File icon"
66-
width={16}
67-
height={16}
68-
/>
69-
Learn
70-
</a>
71-
<a
72-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
73-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
74-
target="_blank"
75-
rel="noopener noreferrer"
76-
>
77-
<Image
78-
aria-hidden
79-
src="/window.svg"
80-
alt="Window icon"
81-
width={16}
82-
height={16}
83-
/>
84-
Examples
85-
</a>
86-
<a
87-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
88-
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
89-
target="_blank"
90-
rel="noopener noreferrer"
91-
>
92-
<Image
93-
aria-hidden
94-
src="/globe.svg"
95-
alt="Globe icon"
96-
width={16}
97-
height={16}
98-
/>
99-
Go to nextjs.org →
100-
</a>
101-
</footer>
5+
<div className="min-h-screen">
6+
Check out the UI page <Link href="/ui">here</Link>.
1027
</div>
1038
);
1049
}

‎app/ui/page.tsx‎

Lines changed: 103 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
import Link from "next/link";
44
import Editor from "@/components/Editor/Editor";
55
import React, { useState } from "react";
6+
import Button from "@/components/ui/Button";
7+
import TabButton from "@/components/ui/TabButton";
8+
import Modal from "@/components/Modal/Modal";
9+
import QuestionWindow from "@/components/ui/QuestionWindow";
610

711
function Section({ id, children }: { id: string; children?: React.ReactNode }) {
812
return (
@@ -18,6 +22,9 @@ function Section({ id, children }: { id: string; children?: React.ReactNode }) {
1822
}
1923
export default function UIPage() {
2024
const [selectedLanguage, setSelectedLanguage] = useState("C++");
25+
const [showModal, setShowModal] = useState<
26+
"default" | "green" | "red" | "yellow" | null
27+
>(null);
2128
const languages = [
2229
"C++",
2330
"C",
@@ -29,6 +36,28 @@ export default function UIPage() {
2936
"Racket",
3037
"Ruby",
3138
];
39+
const questions = [
40+
{
41+
id: 1,
42+
title: "PROBLEM 1: HELLO WORLD",
43+
points: 10,
44+
content: [
45+
"A queue is an abstract data type that maintains order...",
46+
"A basic queue has the following operations:",
47+
"Enqueue: add to the end.",
48+
"Dequeue: remove from the front.",
49+
],
50+
},
51+
{
52+
id: 2,
53+
title: "PROBLEM 2: STACK IMPLEMENTATION",
54+
points: 15,
55+
content: [
56+
"A stack is a Last-In-First-Out (LIFO) data structure...",
57+
"Operations: Push, Pop, Peek.",
58+
],
59+
},
60+
];
3261

3362
return (
3463
<div className="p-4">
@@ -117,8 +146,31 @@ export default function UIPage() {
117146
</Section>
118147

119148
<Section id="Buttons">
120-
<button className="button">Click Me</button>
121-
<button className="btn-green">Green Button</button>
149+
<Button>Default</Button>
150+
<Button variant="destructive">Destructive</Button>
151+
<Button variant="outline">Outline</Button>
152+
<Button variant="secondary">Secondary</Button>
153+
<Button variant="ghost">Ghost</Button>
154+
<Button variant="link">Link</Button>
155+
<Button variant="green">Green Button</Button>
156+
</Section>
157+
158+
<Section id="Tab Buttons">
159+
<TabButton
160+
id={1}
161+
active={selectedLanguage === "C++"}
162+
onClick={() => setSelectedLanguage("C++")}
163+
/>
164+
<TabButton
165+
id={2}
166+
active={selectedLanguage === "Python3"}
167+
onClick={() => setSelectedLanguage("Python3")}
168+
/>
169+
<TabButton
170+
id={3}
171+
active={selectedLanguage === "Java"}
172+
onClick={() => setSelectedLanguage("Java")}
173+
/>
122174
</Section>
123175

124176
<Section id="Editor">
@@ -130,6 +182,55 @@ export default function UIPage() {
130182
timer="69:69:69"
131183
/>
132184
</Section>
185+
186+
<Section id="Question Window">
187+
<QuestionWindow questions={questions} />
188+
</Section>
189+
190+
<Section id="Modal">
191+
{(["default", "green", "destructive", "secondary"] as const).map(
192+
(variant) => {
193+
const modalVariant: "default" | "green" | "red" | "yellow" =
194+
variant === "destructive"
195+
? "red"
196+
: variant === "secondary"
197+
? "yellow"
198+
: variant;
199+
const buttonVariant:
200+
| "green"
201+
| "secondary"
202+
| "destructive"
203+
| "link"
204+
| "outline"
205+
| "ghost"
206+
| "run" = variant === "default" ? "outline" : variant;
207+
const displayName =
208+
modalVariant.charAt(0).toUpperCase() + modalVariant.slice(1);
209+
return (
210+
<div key={variant} className="mb-6">
211+
<div className="flex gap-2 mb-2">
212+
<Button
213+
variant={buttonVariant}
214+
onClick={() => setShowModal(modalVariant)}
215+
>
216+
Show {displayName} Modal
217+
</Button>
218+
</div>
219+
{showModal === modalVariant && (
220+
<Modal
221+
title={`Sample ${displayName} Modal`}
222+
message={`This is a demonstration of the ${modalVariant} Modal variant. You can customize the title, message, and variant.`}
223+
variant={modalVariant}
224+
onClose={() => setShowModal(null)}
225+
>
226+
<Button variant={buttonVariant}>Nested Button</Button>
227+
</Modal>
228+
)}
229+
</div>
230+
);
231+
}
232+
)}
233+
</Section>
133234
</div>
134235
);
135236
}

‎components/Editor/Editor.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,12 @@ import { c } from "@codemirror/legacy-modes/mode/clike";
1414
import { csharp } from "@codemirror/legacy-modes/mode/clike";
1515
import { ruby } from "@codemirror/legacy-modes/mode/ruby";
1616
import { scheme } from "@codemirror/legacy-modes/mode/scheme";
17-
18-
import LanguageSelector from "./LanguageSelector/LanguageSelector";
19-
import RoundTimer from "./RoundTimer/RoundTimer";
20-
2117
import { LanguageSupport } from "@codemirror/language";
2218
import type { EditorView } from "@codemirror/view";
23-
2419
import type { ViewUpdate } from "@codemirror/view";
20+
import LanguageSelector from "./LanguageSelector/LanguageSelector";
21+
import RoundTimer from "./RoundTimer/RoundTimer";
22+
import Button from "../ui/Button";
2523

2624
type EditorProps = {
2725
languages: string[];
@@ -127,12 +125,12 @@ export default function Editor({
127125
</button>
128126
</div>
129127
<div className="flex gap-4">
130-
<button className="text-white px-4 py-2 rounded transition">
128+
<Button variant="run" size="default">
131129
Run Code
132-
</button>
133-
<button className="btn-green text-white px-4 py-2 rounded transition">
130+
</Button>
131+
<Button variant="green" size="default">
134132
Submit Code
135-
</button>
133+
</Button>
136134
</div>
137135
</div>
138136
</div>

‎components/Header/Header.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
"use client";
2+
3+
import Image from "next/image";
4+
import { IoPersonCircleOutline } from "react-icons/io5";
5+
import { usePathname } from "next/navigation";
6+
7+
export default function Header() {
8+
const icon = "/icon.avif";
9+
const pathname = usePathname();
10+
if (pathname === "/") return null;
11+
12+
return (
13+
<header className="relative flex items-center justify-between w-full h-20 px-4 py-10 md:px-12 border-b-2 border-b-[#B7AB98] select-none">
14+
<Image
15+
src={icon}
16+
alt="CodechefVIT Logo"
17+
width={40}
18+
height={40}
19+
className="h-8 w-8 md:h-12 md:w-12"
20+
/>
21+
22+
<h1 className="font-nulshock font-bold text-2xl md:text-4xl lg:text-6xl capitalize text-center text-[#B7AB98]">
23+
COOK OFF{" "}
24+
<span
25+
className="inline-block bg-clip-text text-transparent"
26+
style={{
27+
background: "linear-gradient(90deg, #32CA67 83%, #0A8A36 93%)",
28+
WebkitBackgroundClip: "text",
29+
}}
30+
>
31+
10.0
32+
</span>
33+
</h1>
34+
35+
<IoPersonCircleOutline
36+
size={32}
37+
className="text-[#B7AB98] flex-shrink-0"
38+
/>
39+
</header>
40+
);
41+
}

0 commit comments

Comments
 (0)