Oph 24 33 all faculties page

src/components/Event/EventContainer.tsx

@@ -1,6 +1,6 @@
+import { FACULTIES } from "@/data/events";
 import { useState } from "react";
 import EventBox, { type EventBoxProps } from "./EventBox";
-import { FACULTIES } from "./TestData";
 
 const DEFAULT_CHOSEN_FACULTY_VALUE = "คณะ / Faculty";
 

src/components/FAQs/TextBox.astro

@@ -0,0 +1,18 @@
+---
+export interface Props {
+  question: string;
+  answer: string;
+}
+
+const { question, answer } = Astro.props;
+---
+
+<div
+  class="mx-4 my-8 rounded-2xl border-2 border-white bg-transparent px-10 py-7 text-white shadow-inner shadow-white md:px-20"
+>
+  <span class="font-bold">Q:</span>
+  {question}
+  <br />
+  <span class="font-bold">A:</span>
+  {answer}
+</div>

src/components/Faculties/Card.tsx

@@ -0,0 +1,44 @@
+export interface CardProps {
+  nameThai: string;
+  nameEnglish: string;
+  instagram?: string;
+  facebook?: string;
+  isActive: boolean;
+  link: string;
+}
+const Card: React.FC<CardProps> = ({
+  nameThai,
+  nameEnglish,
+  instagram,
+  facebook,
+  isActive,
+  link,
+}) => {
+  return (
+    <div className="mx-4 my-2 flex h-60 min-h-full max-w-[29rem] flex-col justify-between rounded-2xl border-2 border-white bg-transparent bg-gradient-to-t from-pink-400/50 to-white/5 text-base font-medium text-white shadow-inner shadow-white">
+      <div className="flex w-full flex-col p-6">
+        <p className="text-2xl font-bold">{nameThai}</p>
+        <p className="pb-2 pt-1">{nameEnglish}</p>
+        <div className="mb-2 inline-block w-fit rounded-2xl bg-white px-3 py-1 text-sm text-pink-550">
+          {!isActive && "ไม่ได้"}จัดงาน OPH ในวันที่ 20-21 ม.ค.
+        </div>
+        <div className="flex items-center py-1">
+          <p className="icon-[mdi--instagram] mr-1 h-6 w-6"></p>
+          <p>{instagram ?? "-"}</p>
+        </div>
+        <div className="flex items-center pt-1">
+          <p className="icon-[mdi--facebook] mr-1 h-6 w-6"></p>
+          <p>{facebook ?? "-"}</p>
+        </div>
+      </div>
+      <a
+        href={link}
+        className="flex h-11 w-full items-center justify-between rounded-b-2xl bg-indigo-900 bg-gradient-to-r from-indigo-900 to-pink-550 px-6"
+      >
+        <p>รายละเอียด / Details</p>
+        <i className="icon-[mdi--navigate-next] h-10 w-10"></i>
+      </a>
+    </div>
+  );
+};
+export default Card;

src/components/Faculties/FacultiesCard.tsx

@@ -0,0 +1,23 @@
+import { FACULTIES } from "@/data/faculties.ts";
+import Card from "./Card.tsx";
+
+const FacultiesCard = () => {
+  return (
+    <div className="mt-12 grid w-full max-w-md grid-cols-1 gap-4 md:max-w-5xl md:grid-cols-2">
+      {FACULTIES.map((e) => {
+        return (
+          <Card
+            key={e.nameEnglish}
+            nameThai={e.nameThai}
+            nameEnglish={e.nameEnglish}
+            instagram={e.instagram}
+            facebook={e.facebook}
+            link={e.link}
+            isActive={e.isActive}
+          />
+        );
+      })}
+    </div>
+  );
+};
+export default FacultiesCard;

src/components/Faculties/Selector.tsx

@@ -0,0 +1,42 @@
+import { useState } from "react";
+
+const options = {
+  1: "Engineer",
+  2: "Science",
+  3: "Arts",
+};
+
+const Selector = () => {
+  const [from, setFrom] = useState(0);
+
+  return (
+    <section className="flex w-full max-w-md justify-center">
+      <div className="mx-6 w-full">
+        <div className="relative flex h-12 items-center gap-4">
+          <label className="text-xl font-bold leading-none text-white">
+            เลือก
+            <br />
+            Select:
+          </label>
+          <select
+            className="relative h-full w-full flex-1 appearance-none rounded-2xl bg-white px-4 font-medium text-pink-400"
+            onChange={(e) => setFrom(Number(e.currentTarget.value))}
+            value={from}
+          >
+            <option value="0" disabled hidden>
+              คณะ / Faculty
+            </option>
+            {Object.entries(options).map(([key, value]) => (
+              <option key={key} value={key}>
+                {value}
+              </option>
+            ))}
+          </select>
+          <i className="icon-[mdi--chevron-down] pointer-events-none absolute right-0 top-1/2 -translate-y-1/2 text-3xl text-pink-500"></i>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Selector;

src/components/IDCard/IDCard.tsx

@@ -6,7 +6,7 @@ import { useEffect, useRef, useState } from "react";
 import QRCode from "./QRCode";
 
 import chula3 from "@/assets/chula-3.svg";
-import bg from "@/assets/idCard_bg.svg";
+import bg from "@/assets/idcard-bg.svg";
 
 interface Props {
   fullName: string;

src/components/Navigator/Guide.tsx

@@ -16,7 +16,7 @@ const Guide = () => {
   return (
     <section className="flex w-full flex-col items-center gap-9">
       <div className="grid w-full grid-cols-1 gap-8 sm:grid-cols-2">
-        <div className="relative flex h-12 items-center gap-4">
+        <div className="relative grid h-12 grid-cols-[48px_minmax(0,1fr)] items-center gap-4">
           <label className="text-xl font-bold leading-none text-white">
             จาก
             <br />
@@ -38,7 +38,7 @@ const Guide = () => {
           </select>
           <i className="icon-[mdi--chevron-down] pointer-events-none absolute right-0 top-1/2 -translate-y-1/2 text-3xl text-pink-500"></i>
         </div>
-        <div className="relative flex h-12 items-center gap-4">
+        <div className="relative grid h-12 grid-cols-[48px_minmax(0,1fr)] items-center gap-4">
           <label className="text-xl font-bold leading-none text-white">
             ไปที่
             <br />

src/data/FAQs.ts

@@ -0,0 +1,122 @@
+import type { Props as TextBoxProps } from "@/components/FAQs/TextBox.astro";
+
+export const FAQS_THAI: TextBoxProps[] = [
+  {
+    question: "จุฬาฯ จะจัด Open House วันไหน?",
+    answer:
+      "งาน CU Open House 2024 ของส่วนกลางจะจัดขึ้นในวันที่ 20 - 21 มกราคม 2567 ที่จุฬาลงกรณ์มหาวิทยาลัย (ภายในศาลาพระเกี้ยว) โดยมี 8 คณะ 1 สำนักวิชา 1 สถาบัน จัดงาน Open House ที่คณะ แต่ส่วนกลาง",
+  },
+  {
+    question: "ในงานมีกิจกรรมอะไรบ้าง",
+    answer:
+      "ภายในศาลาพระเกี้ยวจะมีเวทีกลางที่เต็มไปด้วยกิจกรรมต่าง ๆ ไม่ว่าจะเป็นการแสดง กิจกรรม Talk Show โดยมีวิทยากรศิษย์เก่าชื่อดังมาร่วมพูดคุยด้วย นอกจากนี้ยังมีซุ้มกิจกรรมจากทุกคณะที่รอให้ผู้เข้าร่วมงานทุกคนมาเยี่ยมชม สำหรับข้อมูลกิจกรรม OPH ของแต่ละคณะ รอติดตามรายละเอียดเพิ่มเติมจาก IG ของแต่ละคณะ",
+  },
+  {
+    question: "กิจกรรมทั้งสองวันเหมือนกันไหม",
+    answer:
+      "กิจกรรมแนะนำคณะต่าง ๆ จะเหมือนกันทั้ง 2 วัน แต่ในส่วนของกิจกรรมพิเศษบางอย่าง จะแตกต่างกันออกไปในแต่ละวัน ทั้งนี้ สามารถดูเพิ่มเติมได้ในหน้ากิจกรรม",
+  },
+  {
+    question: "จำเป็นต้องไปทั้งสองวันไหม",
+    answer: "สามารถเลือกมาวันใดวันหนึ่งก็ได้ หรือจะเข้ามาทั้งสองวันก็ได้",
+  },
+  {
+    question: "จำกัดระดับชั้นผู้เข้าร่วมงานไหม?",
+    answer:
+      "ไม่จำกัดระดับชั้น สามารถเข้าเยี่ยมชมได้ทุกคน นอกจากนี้ ผู้ปกครองก็สามารถเข้าเยี่ยมชมได้ด้วยนะ",
+  },
+  {
+    question: "เข้าร่วมกิจกรรมแล้วได้เกียรติบัตรไหม?",
+    answer: "กิจกรรมของส่วนกลางไม่มีเกียรติบัตร",
+  },
+  {
+    question: "มีงานในส่วนออนไลน์ไหม",
+    answer:
+      "งานส่วนกลางภายในศาลาพระเกี้ยวจะมีการถ่ายทอดสดเวทีกลางผ่านทางช่องทางประชาสัมพันธ์ออนไลน์ (Facebook)",
+  },
+  {
+    question: "วันงานต้องแต่งตัวยังไง",
+    answer:
+      "สามารถใส่ชุดนักเรียน ชุดสุภาพ หรือชุดที่เหมาะสำหรับทำกิจกรรมต่าง ๆ ภายในงานและ workshop ที่เข้าร่วม",
+  },
+  {
+    question: "จำเป็นต้องลงทะเบียนหรือไม่? ใครต้องลงทะเบียนบ้าง?",
+    answer:
+      "ทุกคนต้องลงทะเบียน ถ้าผู้ปกครองไปกับนักเรียนสามารถใช้ของนักเรียนคนเดียวได้",
+  },
+  {
+    question: "เปิดให้ลงทะเบียนตอนไหน? มีปิดลงทะเบียนไหม?",
+    answer:
+      "จะมีการเริ่มลงทะเบียนผ่านทางเว็บไซต์ได้ตั้งแต่วันที่ 6 มกราคม 2567 เป็นต้นไปจนถึงวันงาน โดยไม่มีการปิดลงทะเบียน",
+  },
+  {
+    question: "สามารถไปลงทะเบียนหน้างานที่ศาลาพระเกี้ยวได้มั้ย?",
+    answer:
+      "เบื้องต้นสามารถลงทะเบียน Walk-In ที่ศาลาพระเกี้ยวได้แต่อย่างไรก็ตามยังคงแนะนำให้มีการลงทะเบียนไปก่อนถึงวันงานเพื่อความสะดวกยิ่งขึ้น",
+  },
+  {
+    question: "ถ้าลงทะเบียนไปแล้ว เราต้องไปทำอะไรหน้างานบ้าง",
+    answer:
+      "เมื่อลงทะเบียนแล้วจะได้รับ QR Code แล้วสามารถนำ QR Code ตัวนี้ไปยื่นได้ทุกคณะ รวมถึงการเข้าร่วมงานของส่วนกลางที่บริเวณศาลาพระเกี้ยวด้วย",
+  },
+];
+export const FAQS_ENG: TextBoxProps[] = [
+  {
+    question: "When is Chulalongkorn University's Open House scheduled?",
+    answer:
+      "Chulalongkorn University's Open House is set for January 20-21, 2024, at Sala Phra Kiew. Additionally, on the same days, eight faculties and two schools within the university will also be hosting their respective Open House events.",
+  },
+  {
+    question: "What activities can I expect at CU Open House 2024?",
+    answer:
+      "CU Open House 2024, held at Sala Phra Kiew, will feature a diverse range of activities. You can enjoy performances, talk with distinguished CU alumni, and more various interactive events. Moreover, each faculty and school will be showcasing their curriculum. For specific details about each faculty's activities, please refer to their respective Instagram accounts.",
+  },
+  {
+    question: "Are the activities the same on both days?",
+    answer:
+      "There will be a faculty advising session on both days. However, special activities vary on each day. Please check for more information on the activity page.",
+  },
+  {
+    question: "Is it necessary to attend both days?",
+    answer: "You're welcome to join either day, or both if you'd like.",
+  },
+  {
+    question: "Can students from any grade attend Open House?",
+    answer:
+      "Absolutely! Our Open House welcomes students from all grades. Parents are also invited to join the event.",
+  },
+  {
+    question: "Will I receive a certificate for attending CU Open House?",
+    answer: "No, certificates will not be provided for participants.",
+  },
+  {
+    question: "Are there online activities?",
+    answer:
+      "Yes, you can catch a live broadcast from the main stage at Sala Phra Kiew.",
+  },
+  {
+    question: "Is there any dress code?",
+    answer:
+      "No. A uniform is not mandatory. You’re free to wear anything you feel comfortable with, or anything suitable for the event or the workshop you’ve registered for.",
+  },
+  {
+    question: "Is registering necessary? Who needs to register?",
+    answer:
+      "Yes, everyone must register. If a student is accompanied by their parents, only the student needs to register.",
+  },
+  {
+    question: "When will registration be available?",
+    answer:
+      "Registration opens on our main website from January 6, 2024, with no closing date.",
+  },
+  {
+    question: "Is online registration necessary before the Open House day?",
+    answer:
+      "Walk-in registration is available on the event day, but it's highly recommended to complete it ahead of time.",
+  },
+  {
+    question: "I have already registered, what's the next step?",
+    answer:
+      "After registering, each student will receive their own QR code. This QR code serves as a pass for visiting all faculties, schools, and Sala Phra Kiew. Simply show the QR code to the staff at the front table.",
+  },
+];

src/components/Event/TestData.ts → src/data/events.ts

@@ -1,4 +1,4 @@
-import { type EventBoxProps } from "./EventBox";
+import type { EventBoxProps } from "@/components/Event/EventBox";
 
 // USE FOR TEST ONLY //
 

src/data/faculties.ts

@@ -0,0 +1,41 @@
+import type { CardProps } from "@/components/Faculties/Card";
+export const FACULTIES: CardProps[] = [
+  {
+    nameThai: "คณะละครสัตว์",
+    nameEnglish: "Circus",
+    instagram: "GG",
+    link: "www.google.com",
+    isActive: true,
+  },
+  {
+    nameThai: "คณะหมูกรอบ",
+    nameEnglish: "Pork",
+    instagram: "Piggy",
+    link: "www.google.com",
+    isActive: false,
+  },
+  {
+    nameThai: "คณะะะะ",
+    nameEnglish: "Kanax",
+    link: "www.google.com",
+    isActive: false,
+  },
+  {
+    nameThai: "คณะะะะ",
+    nameEnglish: "Kanad",
+    link: "www.google.com",
+    isActive: true,
+  },
+  {
+    nameThai: "คณะะะะ",
+    nameEnglish: "Kanae",
+    link: "www.google.com",
+    isActive: true,
+  },
+  {
+    nameThai: "คณะะะะ",
+    nameEnglish: "Kanaq",
+    link: "www.google.com",
+    isActive: false,
+  },
+];

src/pages/events.astro

@@ -1,16 +1,17 @@
 ---
 import BaseLayout from "@/layouts/BaseLayout.astro";
 import EventContainer from "@/components/Event/EventContainer";
-import { EVENTS } from "@/components/Event/TestData";
+import { EVENTS } from "@/data/events";
 ---
 
 <BaseLayout>
   <div
     class="flex flex-col items-center justify-center gap-16 text-center text-white"
   >
     <div class="flex flex-col text-center text-white">
-      <p class="text-4xl">Events</p>
-      <p class="text-xl underline underline-offset-8">กิจกรรมต่าง ๆ ในงาน</p>
+      <p class="text-6xl font-bold">Events</p>
+      <p class="text-3xl font-medium">กิจกรรมต่าง ๆ ในงาน</p>
+      <hr class="mt-2 w-full border border-white" />
     </div>
     <EventContainer events={EVENTS} client:load />
   </div>

src/pages/faculties.astro

@@ -0,0 +1,17 @@
+---
+import BaseLayout from "@/layouts/BaseLayout.astro";
+import Selector from "@/components/Faculties/Selector";
+import FacultiesCard from "@/components/Faculties/FacultiesCard";
+---
+
+<BaseLayout withJigsaw={false}>
+  <section class="mb-12 flex w-full max-w-4xl flex-col items-center px-4">
+    <div class="relative flex w-fit flex-col items-center text-center">
+      <h1 class="text-6xl font-bold text-white">Faculties</h1>
+      <h2 class="text-3xl font-medium text-white">รวมข้อมูลทุกคณะในจุฬาฯ</h2>
+      <hr class="mt-2 w-full border border-white" />
+    </div>
+  </section>
+  <Selector />
+  <FacultiesCard />
+</BaseLayout>