Merge pull request #20 from CS3219-AY2425S1/chore/tidy-questions-layout-code

chore(tidy-code/UI): Add breadcrumbs-wrapper

Author: SeeuSim

frontend/src/assets/questions.ts

@@ -170,7 +170,7 @@ export const questions = [
     id: 20,
     title: 'Trips and Users',
     description:
-      "Given table `Trips` with columns `id`, `client_id`, `driver_id`, `city_id`, `status`, and `request_at`, where `id` is the primary key. The table holds all taxi trips. Each trip has a unique `id`, while `client_id` and `driver_id` are foreign keys to the `users_id` in the `Users` table.\n\nStatus is an ENUM (category) type of ('completed', 'cancelled_by_driver', 'cancelled_by_client').\n\nGiven table `Users` with columns `users_id`, `banned`, and `role`, users_id is the primary key (column with unique values) for htis table. The table holds all users. Each user has a unique `users_id` and `role` is an ENUM type of ('client', 'driver', 'partner'). `banned` is an ENUM category of type ('Yes', 'No'). The cancellation rate is computed by dividing the number of canceled (by client or driver) requests with unbanned users by the total number of requests with unbanned users on that day.\n\nWrite a solution to find the cancellation rate of requests with unbanned users (both client and driver must not be banned) each day between \"2013-10-01\" and \"2013-10-03\". Round the cancellation rate to two decimal points.",
+      "Given table `Trips` with columns `id`, `client_id`, `driver_id`, `city_id`, `status`, and `request_at`, where `id` is the primary key. The table holds all taxi trips. Each trip has a unique `id`, while `client_id` and `driver_id` are foreign keys to the `users_id` in the `Users` table.\n\nStatus is an `ENUM` (category) type of (`'completed'`, `'cancelled_by_driver'`, `'cancelled_by_client'`).\n\nGiven table `Users` with columns `users_id`, `banned`, and `role`, `users_id` is the primary key (column with unique values) for this table. The table holds all users. Each user has a unique `users_id` and `role` is an `ENUM` type of (`'client'`, `'driver'`, `'partner'`). `banned` is an `ENUM` category of type (`'Yes'`, `'No'`). The cancellation rate is computed by dividing the number of canceled (by client or driver) requests with unbanned users by the total number of requests with unbanned users on that day.\n\nWrite a solution to find the cancellation rate of requests with unbanned users (both client and driver must not be banned) each day between `\"2013-10-01\"` and `\"2013-10-03\"`. Round the cancellation rate to two decimal points.",
     topics: ['Databases'],
     difficulty: 'Hard',
     leetcode: 'https://leetcode.com/problems/trips-and-users/',

frontend/src/components/blocks/authed/with-nav-banner.tsx

@@ -1,3 +1,6 @@
+import { Fragment, type FC, type PropsWithChildren } from 'react';
+import { Link } from 'react-router-dom';
+
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -6,9 +9,7 @@ import {
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb';
 import { cn } from '@/lib/utils';
-import { BreadCrumb } from '@/stores/breadcrumb-store';
-import { FC, Fragment, PropsWithChildren } from 'react';
-import { Link } from 'react-router-dom';
+import type { BreadCrumb } from '@/lib/routes';
 
 type IBreadCrumbBannerProps = {
   crumbs: Array<BreadCrumb>;

frontend/src/components/ui/badge.tsx

@@ -14,6 +14,10 @@ const badgeVariants = cva(
         destructive:
           'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow',
         outline: 'text-foreground',
+        hard: 'border-transparent bg-rose-200/70 text-rose-800 dark:bg-rose-900 dark:text-rose-200',
+        medium:
+          'border-transparent bg-amber-200/70 text-amber-800 dark:bg-amber-900 dark:text-amber-200',
+        easy: 'border-transparent bg-emerald-200/70 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200',
       },
     },
     defaultVariants: {

frontend/src/lib/hooks/index.ts

@@ -1 +1,3 @@
 export * from './use-router-location';
+export * from './use-page-title';
+export * from './use-crumbs';

frontend/src/lib/hooks/use-crumbs.ts

@@ -1,5 +1,5 @@
-import { BreadCrumb } from '@/stores/breadcrumb-store';
-import { getBreadCrumbs } from '../routes';
+import { type BreadCrumb, getBreadCrumbs } from '@/lib/routes';
+
 import { useRouterLocation } from './use-router-location';
 
 export const useCrumbs = (...extraCrumbs: Array<BreadCrumb>) => {

frontend/src/lib/routes.ts

@@ -1,5 +1,3 @@
-import type { BreadCrumb } from '@/stores/breadcrumb-store';
-
 export const ROUTES = {
   LOGIN: '/login',
   SIGNUP: '/signup',
@@ -19,6 +17,11 @@ const TOP_LEVEL_AUTHED_ROUTES = {
   ],
 };
 
+export type BreadCrumb = {
+  path: string;
+  title: string;
+};
+
 export const getBreadCrumbs = (path: string): Array<BreadCrumb> => {
   for (const key of Object.keys(TOP_LEVEL_AUTHED_ROUTES)) {
     if (path.startsWith(key)) {

frontend/src/routes/questions/details.tsx

@@ -48,7 +48,10 @@ export const QuestionDetails = () => {
                   </CardTitle>
                 </div>
                 <div className='flex flex-wrap items-center gap-1'>
-                  <Badge variant='secondary' className='flex w-min grow-0'>
+                  <Badge
+                    variant={details.difficulty.toLowerCase() as 'easy' | 'medium' | 'hard'}
+                    className='flex w-min grow-0'
+                  >
                     {details.difficulty}
                   </Badge>
                   <Separator orientation='vertical' className='mx-2 h-4' />