🎨style: add day label and align items

OpenUp-LabTakizawa · Oct 1, 2024 · cef1882 · cef1882
1 parent 6245c91
commit cef1882
Showing 1 changed file with 12 additions and 7 deletions.
diff --git a/app/history/programs.tsx b/app/history/programs.tsx
@@ -6,24 +6,29 @@ export function Programs({
 }: Readonly<{ programs: Program[] }>): JSX.Element {
   return (
     <section className="bg-amber-50 mx-auto relative w-full">
-      <b className="absolute bg-sky-400 justify-self-start left-0 p-1 top-0">
+      <b className="absolute bg-sky-400 hidden justify-self-start left-0 p-1 top-0 sm:block">
         開催日時
       </b>
       <ul>
-        {programs.map((program) => (
+        {programs.map((program, index) => (
           <li
             key={program.date.month + program.date.day + program.venue}
             className="border-b p-2 space-y-1"
           >
-            <p>
-              {program.date.year}年{program.date.month}月{program.date.day}日(
-              {program.date.dayOfWeek})
+            <p className="flex items-center justify-center max-w-80 mx-auto sm:max-w-96">
+              <b className="bg-gray-100 border border-current px-1.5 rounded-3xl text-xs w-fit">
+                Day{index + 1}
+              </b>
+              <span className="w-56 sm:w-80">
+                {program.date.year}年{program.date.month}月{program.date.day}日(
+                {program.date.dayOfWeek})
+              </span>
             </p>
-            <p className="space-x-1">
+            <p className="flex items-center justify-center max-w-80 mx-auto sm:max-w-96">
               <b className="bg-gray-100 border border-current px-1.5 rounded-3xl text-xs w-fit">
                 場所
               </b>
-              <span>{program.venue}</span>
+              <span className="w-56 sm:w-80">{program.venue}</span>
             </p>
           </li>
         ))}