style: add table overflow-scroll (#27)

CE-SMART-CAREER · Nov 10, 2024 · 348695a · 348695a
1 parent 27a6015
commit 348695a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 34 deletions.
diff --git a/src/modules/home/_components/seminar-table.tsx b/src/modules/home/_components/seminar-table.tsx
@@ -7,35 +7,37 @@ type Props = {
 
 export function SeminarTable({ seminars }: Props) {
   return (
-    <table className="w-full border-collapse overflow-scroll rounded-lg border-none bg-linear-gray-orange">
-      <thead>
-        <tr>
-          <th className="md:pl-15 mx-6 w-1/3 border-none py-3 pl-10 text-left md:py-6 lg:py-8 lg:pl-20">
-            เวลา
-          </th>
-          <th className="w-1/3 border-none py-3 pl-10 text-left md:py-6 lg:py-8 lg:pl-20">
-            ห้องที่ 1 (001)
-          </th>
-          <th className="w-1/3 border-none py-3 pl-10 text-left md:py-6 lg:py-8 lg:pl-20">
-            ห้องที่ 2 (002)
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        {seminars.map((seminar, index) => (
-          <tr key={index}>
-            <td className="md:pl-15 mx-6 w-1/3 border-none py-3 pl-10 md:py-6 lg:py-8 lg:pl-20">
-              {`${fTime(seminar.startAt, formatStr.time24Hr)}-${fTime(seminar.endAt, formatStr.time24Hr)}`}
-            </td>
-            <td className="w-1/3 border-none py-3 pl-10 md:py-6 lg:py-8 lg:pl-20">
-              {seminar.room1}
-            </td>
-            <td className="w-1/3 border-none py-3 pl-10 md:py-6 lg:py-8 lg:pl-20">
-              {seminar.room2}
-            </td>
+    <div className="h-[60svh] overflow-auto rounded-lg">
+      <table className="w-full table-auto border-collapse rounded-lg border-none bg-linear-gray-orange">
+        <thead>
+          <tr>
+            <th className="md:pl-15 mx-6 w-1/3 border-none py-3 pl-10 text-left md:py-6 lg:py-8 lg:pl-20">
+              เวลา
+            </th>
+            <th className="w-1/3 border-none py-3 pl-10 text-left md:py-6 lg:py-8 lg:pl-20">
+              ห้องที่ 1 (001)
+            </th>
+            <th className="w-1/3 border-none py-3 pl-10 text-left md:py-6 lg:py-8 lg:pl-20">
+              ห้องที่ 2 (002)
+            </th>
           </tr>
-        ))}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {seminars.map((seminar, index) => (
+            <tr key={index}>
+              <td className="md:pl-15 mx-6 w-1/3 border-none py-3 pl-10 md:py-6 lg:py-8 lg:pl-20">
+                {`${fTime(seminar.startAt, formatStr.time24Hr)}-${fTime(seminar.endAt, formatStr.time24Hr)}`}
+              </td>
+              <td className="w-1/3 border-none py-3 pl-10 md:py-6 lg:py-8 lg:pl-20">
+                {seminar.room1}
+              </td>
+              <td className="w-1/3 border-none py-3 pl-10 md:py-6 lg:py-8 lg:pl-20">
+                {seminar.room2}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 }
diff --git a/src/modules/home/_sections/seminar.tsx b/src/modules/home/_sections/seminar.tsx
@@ -18,25 +18,26 @@ export default async function Seminar() {
           className="object-cover"
         />
       </div>
-      <div className="absolute left-0 top-0 h-72 w-72 rounded-full bg-orange-200 opacity-30 blur-2xl"></div>
+      <div className="absolute left-6 top-0 h-20 w-20 rounded-full bg-orange-100 opacity-25 blur-2xl sm:h-16 sm:w-16 md:h-48 md:w-48 xl:left-10 xl:h-60 xl:w-60"></div>
+      <div className="absolute left-0 top-0 h-24 w-32 rounded-full bg-orange-200 opacity-25 blur-3xl sm:h-28 sm:w-36 md:h-64 md:w-80 xl:left-14 xl:h-96 xl:w-72"></div>
 
       <div className="relative mx-auto flex w-10/12 flex-col pt-[8%] md:w-3/4">
         <h2 className="w-full text-3xl font-bold sm:text-3xl md:text-4xl">
           กำหนดการสัมมนา
         </h2>
         {seminarList.length <= 0 && (
-          <p className="mt-4 w-full text-2xl font-bold md:text-2xl">
+          <p className="mt-2 w-full text-2xl font-bold md:text-2xl">
             ไม่พบกำหนดการ
           </p>
         )}
 
-        <Tabs defaultValue="day1" className="flex flex-col gap-2">
-          <TabsList className="mx-0 my-4 flex w-fit flex-row flex-wrap gap-4 sm:mx-10 sm:my-6 md:mx-2 md:gap-8 lg:gap-20">
+        <Tabs defaultValue="day1" className="flex flex-col">
+          <TabsList className="mx-0 my-2 flex w-fit flex-row flex-wrap gap-2 sm:mx-10 sm:my-3 md:mx-2 md:gap-6 lg:gap-20">
             {seminarList.map((seminarSlot, index) => (
               <TabsTrigger
                 key={index + 1}
                 value={`day${index + 1}`}
-                className="flex flex-row flex-wrap items-baseline gap-2 text-xl text-gray-400 transition-colors duration-300 hover:text-white data-[state=active]:border-b-2 data-[state=active]:border-b-orange-300 data-[state=active]:text-orange-300 sm:gap-5 sm:py-3 md:text-2xl"
+                className="flex flex-row flex-wrap items-baseline gap-2 text-xl text-gray-400 transition-colors duration-300 hover:text-white data-[state=active]:border-b-4 data-[state=active]:border-b-orange-300 data-[state=active]:text-orange-300 sm:gap-5 sm:py-2 md:text-2xl"
               >
                 <span className="text-lg font-bold sm:text-xl md:text-2xl">
                   Day {index + 1}{' '}