31 change UI

.eslintrc.json

@@ -1,6 +1,12 @@
 {
   "parser": "@typescript-eslint/parser",
-  "extends": ["eslint:recommended", "next", "next/core-web-vitals", "prettier", "plugin:@typescript-eslint/recommended"],
+  "extends": [
+    "eslint:recommended",
+    "next",
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:@typescript-eslint/recommended"
+  ],
   "rules": {
     "prefer-const": "warn",
     "no-undef": "off",
@@ -16,4 +22,4 @@
     "@next/next/no-img-element": "off",
     "@typescript-eslint/no-empty-interface": "off"
   }
-}
+}

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,7 +4,6 @@ about: Provide guideline for a new PR
 title: ''
 labels: ''
 assignees: plzfday
-
 ---
 
 ## What is this feature?
@@ -13,6 +12,6 @@ assignees: plzfday
 
 ## Task Details
 
-- [ ] 
+- [ ]
 
 ## Reference Materials (Optional)

.github/workflows/ci.yml

@@ -47,4 +47,4 @@ jobs:
         run: yarn run lint
 
       - name: Run prettier
-        run: yarn run prettier
+        run: yarn run prettier:check

.gitignore

@@ -34,3 +34,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+

README.md

@@ -1,4 +1,5 @@
 # bibimbap-frontend
+
 The frontend of Bibimbap
 
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

__tests__/pages/landing.test.tsx

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
+
 import Home from '@/app/page';
 
 it('renders 6 change logs', () => {

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package.json

@@ -9,6 +9,7 @@
     "start": "next start",
     "lint": "next lint",
     "prettier": "npx prettier --config ./.prettierrc --write **/*.{ts,tsx}",
+    "prettier:check": "npx prettier --config ./.prettierrc --check **/*.{ts,tsx}",
     "test": "jest",
     "test:watch": "jest --watch"
   },

src/app/contests/page.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import React from 'react';
+import { Plus, Trophy } from 'lucide-react';
+
+import ContestTable, { Contest } from '@/components/ContestTable';
+import contestsData from '@/data/contestsData';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Button } from '@/components/ui/button';
+import ContestCards from '@/components/ContestCards';
+import Footer from '@/components/Footer';
+
+export default function ContestsPage() {
+  const [contests, setContests] = React.useState<Contest[]>(contestsData);
+
+  const [favoriteOnly, setFavoriteOnly] = React.useState(false);
+
+  const onClickFavorite = (id: Contest['id']) => {
+    setContests((prev) =>
+      prev.map((c) => (c.id === id ? { ...c, isFavorite: !c.isFavorite } : c)),
+    );
+  };
+
+  const filteredContests = React.useMemo(
+    () => (favoriteOnly ? contests.filter((p) => p.isFavorite) : contests),
+    [contests, favoriteOnly],
+  );
+
+  const onEnter = (id: Contest['id']) => {
+    // TODO: enter the contest/{id} detail edit page
+    console.log('enter', id);
+  };
+
+  const onDelete = (id: Contest['id']) => {
+    // TODO: delete the contest/{id} immediately
+    const ok = window.confirm('Are you sure you want to delete this?');
+    if (!ok) return;
+    setContests((prev) => prev.filter((c) => c.id !== id));
+  };
+
+  return (
+    <div className='min-h-screen bg-gradient-to-br from-gray-50 to-gray-100'>
+      <div className='container px-4 py-6 mx-auto'>
+        <div className='flex items-center justify-between mb-6'>
+          <div>
+            <h1 className='text-3xl font-bold text-gray-900 flex items-center gap-3'>
+              <Trophy className='h-8 w-8 text-primary' />
+              Contests
+            </h1>
+            <p className='text-gray-600 mt-1'>
+              {filteredContests.length} contests available
+            </p>
+          </div>
+          <div className='flex items-center gap-4'>
+            <div className='flex items-center gap-2'>
+              <Checkbox
+                id='favorites'
+                checked={favoriteOnly}
+                onCheckedChange={(v) => setFavoriteOnly(Boolean(v))}
+                aria-controls='contests-table'
+              />
+              <label htmlFor='favorites' className='text-sm cursor-pointer'>
+                Only favorite
+              </label>
+            </div>
+            {/* TODO: get user-info, and add filter function and onClick state */}
+            <div className='flex items-center gap-2'>
+              <Checkbox id='activity' />
+              <label htmlFor='activity' className='text-sm'>
+                Only my activity
+              </label>
+            </div>
+            <Button
+              onClick={() => console.log('Creating new contests!')}
+              className='inline-flex flex-row flex-nowrap items-center gap-2 whitespace-nowrap leading-none
+                   bg-amber-400 hover:bg-amber-500 text-white px-4 py-2 h-auto rounded-xl shadow'
+            >
+              <Plus className='h-4 w-4 shrink-0' />
+              <span className='font-medium inline-block'>Create Contest</span>
+            </Button>
+          </div>
+        </div>
+
+        <ContestTable
+          contests={filteredContests}
+          onClickFavorite={onClickFavorite}
+          onEnter={onEnter}
+          onDelete={onDelete}
+        />
+        <ContestCards contests={filteredContests} />
+      </div>
+      <Footer />
+    </div>
+  );
+}

src/app/globals.css

@@ -1,3 +1,63 @@
+@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600&display=swap');
+
+@layer base {
+  :root {
+    --font-logo: 'Baloo 2', sans-serif;
+  }
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --font-logo: 'Baloo 2', sans-serif;
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    /* --primary: 36 100% 50%; */
+    --primary: 45 100% 60%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    /* --ring: 36 100% 50%; */
+    --ring: 45 100% 60%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 45 100% 60%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    /* --primary: 36 100% 50%; */
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    /* --ring: 36 100% 50%; */
+    --ring: 45 100% 60%;
+  }
+}

src/app/layout.tsx

@@ -5,11 +5,12 @@ import { Container, ThemeProvider } from '@mui/material';
 import theme from '../theme';
 
 import './globals.css';
-import Navigation from '@/components/Navigation';
+// import Navigation from '@/components/Navigation';
+import Header from '@/components/Header';
 
 export const metadata: Metadata = {
-  title: 'Bibimbap',
-  description: 'A delicious Korean dish',
+  title: 'coduck',
+  description: 'coduck~',
 };
 
 export default function RootLayout({
@@ -22,8 +23,9 @@ export default function RootLayout({
       <body>
         <AppRouterCacheProvider>
           <ThemeProvider theme={theme}>
-            <Container component='main'>
-              <Navigation />
+            <Container component='main' maxWidth={false} disableGutters>
+              {/* <Navigation /> */}
+              <Header />
               {children}
             </Container>
           </ThemeProvider>