added table

.vscode/settings.json

@@ -5,5 +5,8 @@
     "editor.defaultFormatter": "Prisma.prisma"
   },
   "editor.tabSize": 2,
-  "files.autoSave": "onFocusChange"
+  "files.autoSave": "onFocusChange",
+  "editor.quickSuggestions": {
+    "strings": true
+  }
 }

app/leaderboard/page.module.css

@@ -0,0 +1,3 @@
+.LeaderboardWrapper {
+  padding-top: 6rem;
+}

app/leaderboard/page.tsx

@@ -1,12 +1,17 @@
 import CFLeaderboard from '@/components/Leaderboard/CFLeaderboard'
+import InfoTable from '@/components/Leaderboard/Table/InfoTable'
 import { NextPage } from 'next'
+import styles from './page.module.css'
 
 interface Props {}
 
 const Page: NextPage<Props> = ({}) => {
   return (
     <>
-      <CFLeaderboard />
+      {/* <CFLeaderboard /> */}
+      <div className={styles.LeaderboardWrapper}>
+        <InfoTable />
+      </div>
     </>
   )
 }

components/Hero/HeroSecondry.tsx

@@ -7,7 +7,7 @@ const HeroSecondry = ({}) => {
 
   return (
     <>
-      <section className="bg-center bg-no-repeat bg-[url('/Hero/JumbotronImages/1080_img.jpg')]  sm:bg-[url('/Hero/JumbotronImages/small_dev_580px.jpg')] md:bg-[url('/Hero/JumbotronImages/1080_img.jpg')] lg:bg-[url('/Hero/JumbotronImages/1080_img.jpg')] xl:bg-[url('/Hero/JumbotronImages/1080_img.jpg')] bg-gray-700 bg-blend-multiply">
+      <section className="bg-center bg-no-repeat bg-[url('/Hero/JumbotronImages/1080_img.jpg')]  sm:bg-[url('/Hero/JumbotronImages/1080_img.jpg')] md:bg-[url('/Hero/JumbotronImages/1080_img.jpg')] lg:bg-[url('/Hero/JumbotronImages/1080_img.jpg')] xl:bg-[url('/Hero/JumbotronImages/1080_img.jpg')] bg-gray-700 bg-blend-multiply">
         <div className='px-4 mx-auto h-screen max-w-screen-xl text-center py-36 md:py-40 lg:py-80'>
           <h1 className='mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-100 md:text-7xl lg:text-6xl'>
             Coding Club, IIT Dharwad

components/Leaderboard/Table/Heading.tsx

@@ -0,0 +1,21 @@
+interface Props {
+  headings: string[]
+}
+
+const Heading = ({ headings }: Props) => {
+  return (
+    <thead className='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400'>
+      <tr>
+        {headings.map(heading => {
+          return (
+            <th scope='col' className='px-6 py-3'>
+              {heading}
+            </th>
+          )
+        })}
+      </tr>
+    </thead>
+  )
+}
+
+export default Heading

components/Leaderboard/Table/IndividualCol.tsx

@@ -0,0 +1,34 @@
+import { it } from 'node:test'
+
+interface Props {
+  data_items: string[]
+  index_row: number
+}
+
+const IndividualCol = ({ index_row, data_items }: Props) => {
+  return (
+    <tr
+      className='border-b dark:bg-gray-800 dark:border-gray-700 odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700'
+      key={index_row}
+    >
+      {data_items.map((item, index) => {
+        if (index === 0) {
+          return (
+            <th
+              scope='row'
+              className='px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap'
+            >
+              {item}
+            </th>
+          )
+        }
+        if (index === data_items.length - 1) {
+          return <td className='px-6 py-4 text-right'>{item}</td>
+        }
+        return <td className='px-6 py-4'>{item}</td>
+      })}
+    </tr>
+  )
+}
+
+export default IndividualCol

components/Leaderboard/Table/InfoTable.tsx

@@ -0,0 +1,31 @@
+import Heading from './Heading'
+import IndividualCol from './IndividualCol'
+
+interface Props {}
+
+const InfoTable = ({}: Props) => {
+  const heading_cf: string[] = [
+    'RollNumber',
+    'User Handle',
+    'Rating',
+    'Contests',
+  ]
+  const data_reg1: string[] = ['210020047', 'shubhagarwal539', '1100', '1816']
+  const data_reg2: string[] = ['2100200048', 'RoopikaKaPreemi', '1169', '1812']
+  return (
+    <>
+      <div className='flex justify-center'>
+        <div className='relative overflow-x-auto shadow-md px-4 sm:px-8 md:px-12 lg:px-36 xl:px-56'>
+          <table className='w-full text-sm text-left text-gray-500 dark:text-gray-400'></table>
+          <Heading headings={heading_cf} />
+          <tbody>
+            <IndividualCol data_items={data_reg1} index_row={0} />
+            <IndividualCol data_items={data_reg2} index_row={1} />
+          </tbody>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default InfoTable

prisma/schema.prisma

@@ -6,8 +6,9 @@ generator client {
 }
 
 datasource db {
-  provider = "postgresql"
-  url      = env("DATABASE_URL")
+  provider  = "postgresql"
+  url       = env("DATABASE_URL")
+  // directUrl = env("DIRECT_URL")S
 }
 
 model Members {