Merge pull request #49 from christian-japan-devs/design

update ticket

Author: DangHoangGeo

design/components/card/ticket.tsx

@@ -0,0 +1,33 @@
+import {Event} from '../../types/event'
+import { QRCodeSVG } from 'qrcode.react'
+import { useState, useEffect } from 'react';
+
+type Props = {
+    event?: Event,
+    onSubmit?: (id:string) => void,
+}
+
+export default function TicketCard({event,onSubmit}: Props ){
+    const [qr_code_side, setQrCodeSide] = useState(88);
+    const [qr_code_position, setQrCodePosition] = useState(" bottom-bs left-ls");
+
+    useEffect(() => {
+        if(window.innerWidth > 380){
+            setQrCodeSide(100);
+            setQrCodePosition(" bottom-bl left-ll");
+       }
+    }, []);
+
+    return (
+        <div className="max-w-sm relative">
+            <img className="z-0 justify-center" alt="" aria-hidden="true" src="/Tham_Du_Vien_Online_1.svg"/>
+            <div className={"z-10 absolute "+qr_code_position}>
+                <QRCodeSVG value="https://www.vietcatholic.jp/my-code/?code=BCDEF&email=dang.hoang.geo@gmail.com" size={qr_code_side}  fgColor="#2F86A6"/>
+            </div>
+            <div className="z-10 w-full absolute bottom-60">
+                <p className='width-full font-bold text-xl font-serif text-center text-cyan-800'>VINH SƠN</p>
+                <p className='font-bold mt-2 text-3xl font-serif text-center text-cyan-900'>HOÀNG MINH PHONG</p>
+            </div>
+        </div>
+    )
+}

design/package-lock.json

@@ -20,6 +20,7 @@
     "eslint-config-next": "13.0.5",
     "next": "13.0.5",
     "next-auth": "^4.18.6",
+    "qrcode.react": "^3.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "4.9.3"

design/package.json

@@ -4,6 +4,7 @@ import { Tab } from '@headlessui/react'
 import Disclosure from '../../../components/Disclosure'
 import Layout from '../../../components/layout/Layout'
 import {youth_day_programs} from '../../../types/sample_data/youthday'
+import TicketCard from '@/components/card/ticket'
 const meta_data = {
     title:"Đại hội giới trẻ tại Nhật bản",
     description:"Đại hội giới trẻ công giáo Việt Nam tại Nhật Bản lần thứ 2 tháng 5 năm 2023.",
@@ -48,36 +49,23 @@ export default function Event() {
                         <img className='rounded-lg' src="/youth_event/group-04.jpg" alt="" loading="lazy"/>
                     </div>
                 </div>
-                <div className="w-full max-w-3xl shadow-md rounded-xl items-center py-4 px-2 sm:px-4 bg-gradient-to-b to-pink-600 from-sky-500 bg-gray-700y-400 dark:to-gray-700 dark:from-stone-900">
-                    <h2 className="text-gray-100 text-center my-4 dark:text-gray-200 text-2xl lg:text-4xl font-semibold">
-                        CHƯƠNG TRÌNH ĐẠI HỘI
-                    </h2>
-                    <Tab.Group>
-                        <Tab.List className="flex space-x-1 rounded-xl bg-blue-900/20 p-1">
-                            {youth_day_programs.map((program, idx)=>(
-                                <Tab key={idx} onClick={()=>setSelectedTab(idx)} className={"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-blue-700 ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2 "+(selected_tab===idx?'bg-white shadow':'text-blue-100 hover:bg-white/[0.12] hover:text-white')}>{program.title}</Tab>
-                            ))}
-                        </Tab.List>
-                        <Tab.Panels>
-                            {youth_day_programs.map((program, idx)=>(
-                                <Tab.Panel key={idx}>
-                                    <div className='mt-8 py-2 px-4 backdrop-blur-md bg-white/30 rounded-box'>
-                                        <h2 className="text-gray-100 mb-4 text-center dark:text-gray-200 text-2xl font-semibold">{program.date}
-                                        </h2>
-                                        <ol className="relative border-l border-gray-200 dark:border-gray-800">
-                                            {program.details.map((detail,idx)=>(
-                                                <li key={idx} className="mb-6 ml-4">
-                                                    <div className="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-800"></div>
-                                                    <time className="text-lg font-normal text-gray-100 dark:text-gray-200">{detail.from_time} - {detail.to_time}</time>
-                                                    <Disclosure className="mt-4" title={detail.content.title} content={detail.content.detail}/>
-                                                </li>
-                                            ))}
-                                        </ol>
-                                    </div>
-                                </Tab.Panel>
-                            ))}
-                        </Tab.Panels>
-                    </Tab.Group>
+            </div>
+            <div className='items-center'>
+                <TicketCard/>
+                <div className="w-full max-w-3xl shadow-md rounded-xl items-center sm:px-4 bg-gradient-to-b to-pink-600 from-sky-500 bg-gray-700y-400 dark:to-gray-700 dark:from-stone-900">
+                    <div className="sm:hidden">
+                        <div className="max-w-sm mt-4">
+                            <img className="z-0 object-fill justify-center" alt="" aria-hidden="true" src="/ChuongTrinhNgay1DH.svg"/>
+                        </div>
+                        <div className="max-w-sm mt-4">
+                            <img className="z-0 object-fill justify-center" alt="" aria-hidden="true" src="/ChuongTrinhNgay2DH.svg"/>
+                        </div>
+                    </div>
+                    <div className='hidden sm:block'>
+                        <div className="mt-4">
+                            <img className="z-0 object-fill justify-center" alt="" aria-hidden="true" src="/ChuongTrinhNgay1-2DH.svg"/>
+                        </div> 
+                    </div>
                 </div>
             </div>
             <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-2">