## what
  - add api endpoint `/api/poll`

  ## how

  ## why
  - this will be used get the latest problem submissions

  ## where
  - ./src/app/api/poll/route.ts

  ## usage

  ## what
  - change `Problem.status` type to `string`

  ## how

  ## why
  - the upstream api will return as a number
  - the NextJS api will convert number to a string

  ## where
  - ./src/types/index.ts

  ## usage

  ## what
  - add object `ProblemStatus`

  ## how

  ## why
  - will be used to convert `Problem` property `status` from a number to
    a string

  ## where
  - ./src/types/index.ts

  ## usage

  ## what
  - convert Problem `status` to a string
    - number
      - 0: Unavailable
      - 1: Normal
      - 2: Special Judge

  ## how
  - use object `ProblemStatus` from `@/types/index.ts` to convert a
    number into a string

  ## why
  - don't need the client side to convert the data

  ## where
  - ./src/app/api/problems/[problemNum]/route.ts
  - ./src/app/api/problems/route.ts

  ## usage

…blems/:problemNum`

  ## what
  - add docs on what the key is used for in endpoint `/api/problems/:problemNum`

  ## how
  - obtained from
    - https://uhunt.onlinejudge.org/api
      - `Problem List` section

  ## why
  - for better clarity

  ## where
  - ./src/app/api/problems/route.ts

  ## usage

…/poll`

  ## what
  - mutate the data returned from upstream for endpoint `/api/poll`
    - convert `verdict ID` to a string
      - use object to map through the IDs
    - convert `language ID` to a string
      - use object to map through the IDs
    - convert `rank` to a string
      - return '-' if rank below 0.
      - return the provided value if rank is above 0
    - add problem number as an object property
    - add problem title as an object property

  ## how
  - map through each element in the array

  ## why
  - better to do preprocessing server side than client side
    - ex: getting the `problem number` from `problem id`

  ## where
  - ./src/app/api/poll/route.ts

  ## usage

  ## what
  - move endpoint `/api/poll` to `/api/poll/:pollId`

  ## how

  ## why
  - this required because of the way polling works in the upstream api
  - the first time when polling the polling ID would be 0
  - after that the polling ID would be the latest `submission ID`

  ## where
  - ./src/app/api/poll/route.ts -> ./src/app/api/poll/[pollId]/route.ts

  ## usage

  ## what
  - add `Verdict` number to string map

  ## how

  ## why

  ## where
  - ./src/types/index.ts

  ## usage

  ## what
  - add `Language` number to string map

  ## how

  ## why

  ## where
  - ./src/types/index.ts

  ## usage

  ## what
  - add type `Submission`

  ## how

  ## why

  ## where
  - ./src/types/index.ts

  ## usage

  ## what
  - compile project to `ESNext`

  ## how

  ## why

  ## where
  - ./tsconfig.json

  ## usage

…erdictStr`

  ## what
  - convert `ver` number into string into property `verdictStr`

  ## how

  ## why
  - the property `ver` will be used assigning bg-color depending on the
    value

  ## where
  - ./src/app/api/poll/[pollId]/route.ts

  ## usage

  ## what
  - process submissions from endpoint `/api/poll/[pollId]`
    - reverse the array
    - group submissions by submission id (`sid`)
    - flatten the array of array
      - pick only the latest submission after grouping by `sid`
    - sort the array by submission time

  ## how

  ## why
  - the submissions contain duplicate entries
    - the first submission is in status of `In Queue`
    - the second submission is the processed submission with verdict

  ## where
  - ./src/app/api/poll/[pollId]/route.ts

  ## usage

  ## what
  - add padding to the main content

  ## how

  ## why

  ## where
  - ./src/app/layout.tsx

  ## usage

  ## what
  - add package `react-query`

  ## how

  ## why

  ## where
  - ./package-lock.json
  - ./package.json

  ## usage

  ## what
  - add Provider for `react-query`

  ## how
  - obtained from
    - https://tanstack.com/query/latest/docs/react/guides/advanced-ssr#server-components--nextjs-app-router

  ## why

  ## where
  - ./src/provider/ReactQuery.tsx

  ## usage

  ## what
  - use `react-query` provider

  ## how
  - obtained from
    - https://tanstack.com/query/latest/docs/react/guides/advanced-ssr#server-components--nextjs-app-router

  ## why

  ## where
  - ./src/app/layout.tsx

  ## usage

  ## what
  - add package `axios`

  ## how

  ## why

  ## where
  - ./package-lock.json
  - ./package.json

  ## usage

  ## what
  - add component `Table`

  ## how
  - run command
    npx shadcn-ui@latest add table

  ## why

  ## where
  - ./src/components/ui/table.tsx

  ## usage

to be removed

  ## what
  - use `axios` to fetch data

  ## how

  ## why

  ## where
  - ./src/app/api/poll/[pollId]/route.ts

  ## usage

  ## what
  - merge duplicate `tailwind.config` files

  ## how

  ## why

  ## where
  - ./components.json
  - ./tailwind.config.js
  - ./tailwind.config.ts

  ## usage

  ## what
  - add react-query hook to fetch live submissions
    - provide
      - pollId
      - fetchInterval

  ## how

  ## why
  - this will be used to fetch live submissions in an interval

  ## where
  - ./src/hooks/index.ts

  ## usage

  ## what
  - add fgColor, bgColor and title to Verdict object

  ## how

  ## why
  - this will be used in api endpoint `/api/poll/pollId`
    - it will be used for filling in the necessary data needed for the
      front end

  ## where
  - ./src/types/index.ts

  ## usage

  ## what
  - update setting `verdict` properties

  ## how

  ## why
  - to work with the change in commit 98090f4

  ## where
  - ./src/app/api/poll/[pollId]/route.ts

  ## usage

  ## what
  - add types to `Verdict` and `Language`

  ## how

  ## why
  - to be able to dynamically use the object using `[]` notation
    - typescript complains about object index type compatibility issues

  ## where
  - ./src/types/index.ts

  ## usage

  ## what
  - reword the variables being used

  ## how

  ## why
  - code is more readable

  ## where
  - ./src/app/api/poll/[pollId]/route.ts

  ## usage

  ## what
  - add component `LiveSubmissionTable`

  ## how

  ## why
  - will be used for displaying live submissions

  ## where
  - ./src/app/LiveSubmissionTable.tsx

  ## usage

  ## what
  - add docs to `VerdictType`

  ## how

  ## why

  ## where
  - ./src/types/index.ts

  ## usage

  ## what
  - remove template code

  ## how

  ## why

  ## where
  - ./src/app/page.tsx

  ## usage

  ## what
  - add docs for `useFetchLiveSubmission` hook

  ## how

  ## why

  ## where
  - ./src/hooks/index.ts

  ## usage

  ## what
  - add `staleTime` for `useFetchLiveSubmission` hook

  ## how

  ## why
  - this will set the data to be stale after the `fetchInterval` time

  ## where
  - ./src/hooks/index.ts

  ## usage

  ## what
  - fetch live submissions and display it
    - fetch data
    - display `loading` when fetching data
    - display `error` when fetching has failed
    - display live submissions after fetching data
    - refetch data after `5000ms`

  ## how
    - store the initial pollId to 0 using React `useRef`
    - fetch the data using hook `useFetchLiveSubmission`
      - requires pollId
      - refetch data after `5000ms`
    - store the pollId to the latest submission ID after a successfully
      fetching data
    - display `Loading data` when initially fetching data
    - display `Error fetching data` when there's an error fetching data
    - display the fetched data using `LiveSubmissionTable` component

  ## why
  - to display live submissions data

  ## where
  - ./src/app/page.tsx

  ## usage

  ## what
  - add a screenshot of home page

  ## how

  ## why
  - will be used to display screenshot of `README.md`

  ## where
  - ./docs/images/page-home.png

  ## usage

  ## what
  - display screenshot of `home` page

  ## how

  ## why

  ## where
  - ./README.md

  ## usage

  ## what
  - fix eslint error
    - set `config.theme.extend.keyframes.accordion-down.from.height` to a string value
    - set `config.theme.extend.keyframes.accordion-up.from.height` to a string value

  ## how

  ## why

  ## where
  - ./tailwind.config.ts

  ## usage

  ## what
  - add component `Skeleton`

  ## how
  - run command
    npx shadcn-ui@latest add skeleton

  ## why

  ## where
  - ./src/components/ui/skeleton.tsx

  ## usage

…issionTable` component

  ## what
  - add `TableRow` in TableHeader section of `LiveSubmissionTable` component

  ## how

  ## why
  - web browser is complaining `TableHeader` doesn't have `TableRow`

  ## where
  - ./src/app/LiveSubmissionTable.tsx

  ## usage

  ## what
  - add `Skeleton` when fetching data

  ## how
  - use shadcn-ui components
    - `Table`
    - `Skeleton`

  ## why
  - add better user experience when the data is being fetched

  ## where
  - ./src/app/page.tsx

  ## usage

  ## what
  - add a screenshot of home page when loading

  ## how

  ## why
  - will be used to display screenshot on `README.md`

  ## where
  - ./docs/images/page-home-loading.png

  ## usage

  ## what
  - display screenshot of `loading home` page

  ## how

  ## why

  ## where
  - ./README.md

  ## usage

  ## what
  - display `react-query-devtools` on development env

  ## how

  ## why

  ## where
  - ./src/provider/ReactQuery.tsx

  ## usage

## [1.0.0-development.2](1.0.0-development.1...1.0.0-development.2) (2023-12-31)

### ✨ Features

* **api:poll:** process submissions from endpoint `/api/poll/[pollId]` ([ad53d2e](ad53d2e))
* **api:** add api endpoint `/api/poll` ([c60046b](c60046b))
* **api:** add endpoint `/api/problems/:problemNum` ([62ce762](62ce762))
* **api:** add endpoint `/api/problems` ([e65ce18](e65ce18))
* **api:** add some basic checks for endpoint `/api/problems/:problemNum` ([94049cc](94049cc))
* **components:** add `Navbar` component ([27c1b8f](27c1b8f))
* **components:** add component `LiveSubmissionTable` ([0278c98](0278c98))
* **hooks:** add react-query hook to fetch live submissions ([19f0d72](19f0d72))
* **page:home:** add `Skeleton` when fetching data ([dd8b5b4](dd8b5b4))
* **page:home:** fetch live submissions and display it ([1d67137](1d67137))

Bumps [@tanstack/react-query](https://github.com/TanStack/query/tree/HEAD/packages/react-query) from 5.15.5 to 5.17.0.
- [Release notes](https://github.com/TanStack/query/releases)
- [Commits](https://github.com/TanStack/query/commits/v5.17.0/packages/react-query)

---
updated-dependencies:
- dependency-name: "@tanstack/react-query"
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

Bumps [clsx](https://github.com/lukeed/clsx) from 2.0.0 to 2.1.0.
- [Release notes](https://github.com/lukeed/clsx/releases)
- [Commits](lukeed/clsx@v2.0.0...v2.1.0)

---
updated-dependencies:
- dependency-name: clsx
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

Bumps [moment](https://github.com/moment/moment) from 2.30.0 to 2.30.1.
- [Changelog](https://github.com/moment/moment/blob/develop/CHANGELOG.md)
- [Commits](moment/moment@2.30.0...2.30.1)

---
updated-dependencies:
- dependency-name: moment
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.10.5 to 20.10.6.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

---
updated-dependencies:
- dependency-name: "@types/node"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

Bumps [@tanstack/react-query-devtools](https://github.com/TanStack/query/tree/HEAD/packages/react-query-devtools) from 5.15.5 to 5.17.0.
- [Release notes](https://github.com/TanStack/query/releases)
- [Commits](https://github.com/TanStack/query/commits/v5.17.0/packages/react-query-devtools)

---
updated-dependencies:
- dependency-name: "@tanstack/react-query-devtools"
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

  ## what
  - add package `@tanstack/react-table`

  ## how

  ## why
  - will be used shadcn-ui `Table` to make a more complex table

  ## where
  - ./package-lock.json
  - ./package.json

  ## usage

  ## what
  - add component `DataTable`

  ## how
  - obtained from
    - https://ui.shadcn.com/docs/components/data-table#datatable--component

  ## why
  - this component was designed for one use, but this component will be
    used in multiple pages, so it makes sense to place it
    `src/components/ui/`
    - check end of section of the link above

  ## where
  - ./src/components/ui/data-table.tsx

  ## usage

  ## what
  - add columns properties for `DataTable` component
    - define which columns to display on the DataTable

  ## how
  - check
    - https://ui.shadcn.com/docs/components/data-table#column-definitions

  ## why
  - this will determine which columns to display

  ## where
  - ./src/app/problems/components/data-table/columns.tsx

  ## usage

  ## what
  - add react-query hook to fetch all problems

  ## how
  - fetch from api endpoint `/api/problems`

  ## why

  ## where
  - ./src/hooks/index.ts

  ## usage

  ## what
  - display all problems using `DataTable` component

  ## how
  - using component `DataTable`
  - check
    - https://ui.shadcn.com/docs/components/data-table

  ## why
  - the `DataTable` will later be changed to be able to
    - search by problem number or problem title
    - add problem to favourites
    - remove problem to favourites
    - view/hide columns
    - add pagination

  ## where
  - ./src/app/problems/page.tsx

  ## usage

  ## what
  - add pagination to `DataTable` component

  ## how
  - check
    - https://ui.shadcn.com/docs/components/data-table#pagination

  ## why
  - to not load the a huge list of elements at once
    - lighter on memory

  ## where
  - ./src/components/ui/data-table.tsx

  ## usage

  ## what
  - add column scrolling to `DataTable` component

  ## how
  - check
    - https://ui.shadcn.com/docs/components/data-table#sorting

  ## why
  - allows a column to be sorted

  ## where
  - ./src/components/ui/data-table.tsx

  ## usage

…mponent

  ## what
  - add column properties to be sortable `DataTable` component

  ## how
  - check
    - https://ui.shadcn.com/docs/components/data-table#make-header-cell-sortable

  ## why
  - to have the ability to sort the table as you please

  ## where
  - ./src/app/problems/components/data-table/columns.tsx

  ## usage

  ## what
  - add column visibility toggle for `DataTable` component

  ## how
  - check
    - https://ui.shadcn.com/docs/components/data-table#visibility

  ## why
  - this will allow the usage of toggling columns visibility

  ## where
  - ./src/components/ui/data-table.tsx

  ## usage

  ## what
  - add package `@radix-ui/react-icons`

  ## how

  ## why

  ## where
  - ./package-lock.json
  - ./package.json

  ## usage

  ## what
  - add component `Select`

  ## how
  - run command
    npx shadcn-ui@latest add select

  ## why

  ## where
  - ./package-lock.json
  - ./package.json
  - ./src/components/ui/select.tsx

  ## usage

  ## what
  - add `DataTablePagination` component

  ## how
  - obtained from
    - https://github.com/shadcn-ui/ui/blob/main/apps/www/app/examples/tasks/components/data-table-pagination.tsx

  ## why
  - the table pagination is getting complicated, so it's better to move
    it to it's own file

  ## where
  - ./src/components/ui/data-table/pagination.tsx

  ## usage

…component

  ## what
  - use component `DataTablePagination` in `DataTable` component

  ## how
  - obtained from
    - https://github.com/shadcn-ui/ui/blob/main/apps/www/app/examples/tasks/components/data-table.tsx#L123

  ## why
  - the table pagination is getting complicated, so it's better to move
    it to it's own file

  ## where
  - ./src/components/ui/data-table.tsx

  ## usage

…dex.tsx`

  ## what
  - move `DataTable` to `./src/components/ui/data-table/index.tsx`

  ## how

  ## why
  - place data-table related to it's own folder

  ## where
  - ./src/components/ui/data-table.tsx -> ./src/components/ui/data-table/index.tsx

  ## usage

…/problems`

  ## what
  - add a Link to the problem page in `DataTable` for `/problems`

  ## how

  ## why
  - need to be able to go the problem page for a specific problem number

  ## where
  - ./src/app/problems/components/data-table/columns.tsx

  ## usage

  ## what
  - use `Problem` as a type in DataTable columns

  ## how

  ## why
  - was using incorrect type for the column

  ## where
  - ./src/app/problems/components/data-table/columns.tsx

  ## usage

  ## what
  - format code

  ## how

  ## why

  ## where
  - ./src/app/problems/components/data-table/columns.tsx

  ## usage

  ## what
  - add component `Input`

  ## how
  - run command
    npx shadcn-ui@latest add input

  ## why

  ## where
  - ./src/components/ui/input.tsx

  ## usage

  ## what
  - add ability to filter any column in `DataTable` component

  ## how
  - obtained from
    - https://youtu.be/ZG2_vPlQA8Q?si=4AvVNavj5ih1A8tQ

  ## why
  - this will allow the ability to filter by any column

  ## where
  - ./src/components/ui/data-table/index.tsx

  ## usage

  ## what
  - add button to clear filter

  ## how

  ## why

  ## where
  - ./src/components/ui/data-table/index.tsx

  ## usage

  ## what
  - add icon in DataTable `columns` dropdown
  - add dropdown separator when opening the dropdown

  ## how

  ## why
  - better looking

  ## where
  - ./src/components/ui/data-table/index.tsx

  ## usage

  ## what
  - use custom string in DataTable dropdown

  ## how
  - add custom property `meta` in columns.tsx
  - check https://tanstack.com/table/v8/docs/api/core/column-def#meta

  ## why
  - add better string to display in dropdown
    - before it was displaying the column ID

  ## where
  - ./src/app/problems/components/data-table/columns.tsx
  - ./src/components/ui/data-table/index.tsx

  ## usage

  ## what
  - display link as a button

  ## how

  ## why
  - makes it more apparent that there is a link available

  ## where
  - ./src/app/problems/components/data-table/columns.tsx

  ## usage

  ## what
  - add page title

  ## how

  ## why

  ## where
  - ./src/app/problems/page.tsx

  ## usage

  ## what
  - display total number of items in the DataTable

  ## how

  ## why
  - to give the user an idea how many items are there in a table

  ## where
  - ./src/components/ui/data-table/pagination.tsx

  ## usage

  ## what
  - add column header component for DataTable
    - sort column
      - ascending
      - descending
      - default (sort by it's original order)
    - hide column

  ## how
  - obtained from
    - https://github.com/shadcn-ui/ui/blob/main/apps/www/app/examples/tasks/components/data-table-column-header.tsx

  ## why
  - this will be used by DataTable to render a more advanced column header
    - this is opt-in
  - this can only be used in a `column.tsx` file
    - check
      - https://github.com/shadcn-ui/ui/blob/fb614ac2921a84b916c56e9091aa0ae8e129c565/apps/www/app/examples/tasks/components/columns.tsx#L38-L46C4

  ## where
  - ./src/components/ui/data-table/column-header.tsx

  ## usage

…r column header

  ## what
  - use `DataTableColumnHeader` to render column header

  ## how

  ## why
  - this will add a more advanced form of column header options
    - sort column
      - ascending
      - descending
      - default
    - hide column

  ## where
  - ./src/app/problems/components/data-table/columns.tsx

  ## usage

  ## what
  - remove unused code

  ## how

  ## why

  ## where
  - ./src/app/problems/page.tsx

  ## usage

  ## what
  - disable word-wrapping for pagination number
    - show `Page 'i' of 'x'` in the same line

  ## how

  ## why

  ## where
  - ./src/components/ui/data-table/pagination.tsx

  ## usage

## what
  - add loading component for DataTable

  ## how

  ## why
  - will be used to display when fetching data

  ## where
  - ./src/components/ui/data-table/loading.tsx

  ## usage

  ## what
  - add css classnames
    - nav-link
      - highlight the link on hover
    - active-nav-link
      - highlight the link. (used when the link and current page are the
        same)

  ## how

  ## why
  - these two nav-links will be used in `Navbar` component to
    - highlight a link on hover
    - highlight a link when the current path url is the same as the nav
      link url

  ## where
  - ./src/app/globals.css

  ## usage

  ## what
  - add navbar link to `/problems` page

  ## how

  ## why

  ## where
  - ./src/components/navbar.tsx

  ## usage

  ## what
  - highlight active links

  ## how
  - use css classname from `globals.css`
    - nav-link
      - highlight link on hover
    - active-nav-link
      - highlight link when link href is the same as the url pathname

  ## why

  ## where
  - ./src/components/navbar.tsx

  ## usage

  ## what
  - display a loading component for `/problems` page

  ## how

  ## why

  ## where
  - ./src/app/problems/page.tsx

  ## usage

  ## what
  - add a screenshot of `/problems` page
    - loading
    - data loaded

  ## how

  ## why

  ## where
  - ./docs/images/page-problems-loading.png
  - ./docs/images/page-problems.png

  ## usage

  ## what
  - display screenshots of `/problems` page
    - loading
    - data loaded

  ## how

  ## why

  ## where
  - ./README.md

  ## usage

## [1.0.0-development.3](1.0.0-development.2...1.0.0-development.3) (2024-1-2)

### ✨ Features

* **components:navbar:** highlight active links ([1c21c75](1c21c75))
* **components:** add a Link to the problem page in `DataTable` for `/problems` ([e9c16f5](e9c16f5))
* **components:** add column properties to be sortable `DataTable` component ([9b1ab5d](9b1ab5d))
* **page:problems:** display all problems using `DataTable` component ([401ae1c](401ae1c))
* **shadcn:data-table:** add button to clear filter ([5072674](5072674))
* **shadcn:data-table:** add column header component for DataTable ([165aa6c](165aa6c)), closes [/github.com/shadcn-ui/ui/blob/fb614ac2921a84b916c56e9091aa0ae8e129c565/apps/www/app/examples/tasks/components/columns.tsx#L38-L46C4](https://github.com/Clumsy-Coder//github.com/shadcn-ui/ui/blob/fb614ac2921a84b916c56e9091aa0ae8e129c565/apps/www/app/examples/tasks/components/columns.tsx/issues/L38-L46C4)
* **shadcn:data-table:** add loading component for DataTable ([3851747](3851747))
* **shadcn:** add `DataTablePagination` component ([2500aa1](2500aa1))
* **shadcn:** add ability to filter any column in `DataTable` component ([5ec2df1](5ec2df1))
* **shadcn:** add column scrolling to `DataTable` component ([55f98b4](55f98b4))
* **shadcn:** add column visibility toggle for `DataTable` component ([c623e43](c623e43))
* **shadcn:** add pagination to `DataTable` component ([2c7df8e](2c7df8e))

Bumps [@tanstack/react-query](https://github.com/TanStack/query/tree/HEAD/packages/react-query) from 5.17.0 to 5.17.1.
- [Release notes](https://github.com/TanStack/query/releases)
- [Commits](https://github.com/TanStack/query/commits/v5.17.1/packages/react-query)

---
updated-dependencies:
- dependency-name: "@tanstack/react-query"
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

Bumps [@tanstack/react-query-devtools](https://github.com/TanStack/query/tree/HEAD/packages/react-query-devtools) from 5.17.0 to 5.17.1.
- [Release notes](https://github.com/TanStack/query/releases)
- [Commits](https://github.com/TanStack/query/commits/v5.17.1/packages/react-query-devtools)

---
updated-dependencies:
- dependency-name: "@tanstack/react-query-devtools"
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

Bumps [@tanstack/react-table](https://github.com/tanstack/table) from 8.11.2 to 8.11.3.
- [Release notes](https://github.com/tanstack/table/releases)
- [Commits](TanStack/table@v8.11.2...v8.11.3)

---
updated-dependencies:
- dependency-name: "@tanstack/react-table"
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

  ## what
  - add component `Badge`

  ## how
  - run command
    npx shadcn-ui@latest add badge

  ## why
  - this component will be used to display the verdict in
    `LiveSubmissions`

  ## where
  - ./src/components/ui/badge.tsx

  ## usage

  ## what
  - add `columns.tsx` for home page
  - display the `Submission ID` column

  ## how

  ## why
  - this will be used to display live submissions on the home page

  ## where
  - ./src/app/components/data-table/columns.tsx

  ## usage

  ## what
  - display the `DataTable` for live submissions

  ## how

  ## why
  - using the `DataTable` will allow
    - filter the table
    - sort columns
    - show/hide columns
    - use pagination
  - reusing code to keep the code base lean

  ## where
  - ./src/app/page.tsx

  ## usage

  ## what
  - use `DataTable` loading component

  ## how

  ## why
  - reusing code
  - easy way to display skeleton data table with varying columns and
    rows

  ## where
  - ./src/app/page.tsx

  ## usage

…ions data-table

  ## what
  - display `problem number` in live submissions data-table

  ## how

  ## why

  ## where
  - ./src/app/components/data-table/columns.tsx

  ## usage

…ons data-table

  ## what
  - display `problem title` in live submissions data-table

  ## how

  ## why

  ## where
  - ./src/app/components/data-table/columns.tsx

  ## usage

…ata-table

  ## what
  - display `username` in live submissions data-table

  ## how

  ## why

  ## where
  - ./src/app/components/data-table/columns.tsx

  ## usage

…ta-table

  ## what
  - display `verdict` in live submissions data-table

  ## how

  ## why

  ## where
  - ./src/app/components/data-table/columns.tsx

  ## usage