Merge pull request #65 from isd-sgcu/feature/rkm66-70-home-page-e-stamp

Feature/rkm66 70 home page e stamp

src/components/Estamp/Home/components/Accessibility.tsx

@@ -0,0 +1,25 @@
+import { CameraIcon, QrCodeIcon } from '@heroicons/react/24/solid';
+import { useRouter } from 'next/router';
+
+const Accessibility = () => {
+    const router = useRouter();
+    return (
+        <>
+            <button
+                className="mt-6 flex h-12 w-4/5 items-center justify-center rounded-xl bg-pink-400 text-xl font-bold ring-4 ring-pink-400/40 transition-all duration-300 ease-in-out hover:ring-8 md:w-1/2"
+                onClick={() => router.push('/')}
+            >
+                <QrCodeIcon className="mx-2 h-8 w-8" />
+                <h1>My E-Ticket</h1>
+            </button>
+            <button
+                className="my-6 flex h-12 w-4/5 items-center justify-center rounded-xl bg-green text-xl font-bold ring-4 ring-green/40 transition-all duration-300 ease-in-out hover:ring-8 md:w-1/2"
+                onClick={() => router.push('/')}
+            >
+                <CameraIcon className="mx-2 h-6 w-6" />
+                <h1>Check-in / Check-out</h1>
+            </button>
+        </>
+    );
+};
+export default Accessibility;

src/components/Estamp/Home/components/Profile.tsx

@@ -0,0 +1,55 @@
+import { HomeIcon, PencilSquareIcon } from '@heroicons/react/24/solid';
+import placeHolder from '@/public/images/pfp-placeholder.svg';
+import Image from 'next/image';
+import { useAuth } from '@/context/AuthContext';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { getBaan } from '@/utils/baan';
+import { IUser } from '@/types/user';
+const Profile = () => {
+    const { user } = useAuth();
+    const router = useRouter();
+    const [baanName, setBaanName] = useState<string | null>(null);
+    useEffect(() => {
+        async function getBaanName(user: IUser | null): Promise<void> {
+            const baan = await getBaan(user?.baanId || '');
+            setBaanName(baan?.name || null);
+        }
+        getBaanName(user || null);
+    }, [baanName]);
+    return (
+        <div className="flex h-52 w-80 justify-center rounded-3xl bg-white ring-4 ring-white/40">
+            <div className="justify-cente mx-8 flex items-center">
+                <div className="relative aspect-square h-36 w-24 max-w-full rounded-xl ring-4 ring-blue-950">
+                    <Image
+                        src={user?.imageUrl || placeHolder}
+                        fill
+                        alt="Photo"
+                        className="relative rounded-xl object-cover"
+                    />
+                </div>
+            </div>
+            <div className="flex flex-col items-center justify-center text-lg font-bold text-purple-400">
+                <div className="flex flex-col">
+                    <h1>{user?.firstname || 'No First Name'}</h1>
+                    <h1>{user?.lastname || 'No Surname'}</h1>
+                </div>
+                <div className="my-3 flex h-auto w-32 justify-center rounded-xl border-2 border-pink-400 px-4 py-1 text-pink-400">
+                    <HomeIcon className="h-4 w-4" />
+                    <p className="mx-1 text-sm">{baanName || 'Homeless'}</p>
+                </div>
+                <button
+                    className="mt-1 h-8 w-28 rounded-md bg-purple-400 ring-4 ring-gray-300"
+                    onClick={() => router.push('/edit')}
+                >
+                    <div className="flex justify-center py-1 text-sm text-white">
+                        <p>แก้ไขข้อมูล</p>
+                        <PencilSquareIcon className="ml-1 h-5 w-4" />
+                    </div>
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default Profile;

src/components/Estamp/Home/components/Stamp.tsx

@@ -0,0 +1,42 @@
+import { CheckBadgeIcon } from '@heroicons/react/24/solid';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import StampPiece from './StampPiece';
+import { StampInfo } from '@/types/stamp';
+import { stampPiecePicture } from '@/utils/estamp/stamps';
+
+const Stamp = () => {
+    const router = useRouter();
+    return (
+        <div className="my-3 flex w-4/5 flex-col items-center justify-center text-xl font-bold md:w-1/2">
+            <div className="relative aspect-square h-auto w-full max-w-full">
+                <Image
+                    src={'/images/eStampBorder.svg'}
+                    alt="background"
+                    fill
+                    className="absolute -z-10"
+                />
+                <div className="flex-block grid h-full w-full grid-cols-2 gap-1 p-3">
+                    {stampPiecePicture.map((e: StampInfo) => {
+                        return (
+                            <StampPiece
+                                key={e.stampId}
+                                stampId={e.stampId}
+                                check={e.check}
+                                imgUrl={e.imgUrl}
+                            />
+                        );
+                    })}
+                </div>
+            </div>
+            <button
+                className="my-8 flex h-12 w-full items-center justify-center rounded-xl bg-yellow ring-4 ring-yellow/40 transition-all duration-300 ease-in-out hover:ring-8"
+                onClick={() => router.push('/')}
+            >
+                <CheckBadgeIcon className="mx-2 h-8 w-8" />
+                <h1>Redeem Ticket</h1>
+            </button>
+        </div>
+    );
+};
+export default Stamp;

src/components/Estamp/Home/components/StampPiece.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useState } from 'react';
+import Image from 'next/image';
+import { StampInfo } from '@/types/stamp';
+
+const StampPiece: React.FC<StampInfo> = ({ stampId, check, imgUrl }) => {
+    const [isStampCheck, setStamp] = useState<boolean>(check);
+    return (
+        <div className="relative">
+            <Image
+                src={imgUrl}
+                alt={stampId}
+                fill
+                priority
+                onClick={() => setStamp(!isStampCheck)}
+                className={!isStampCheck ? 'grayscale' : ''}
+            />
+        </div>
+    );
+};
+
+export default StampPiece;

src/components/Estamp/Home/index.tsx

@@ -0,0 +1,15 @@
+import Accessibility from '@/components/Estamp/Home/components/Accessibility';
+import Profile from '@/components/Estamp/Home/components/Profile';
+import Stamp from '@/components/Estamp/Home/components/Stamp';
+
+const EstampHome = () => {
+    return (
+        <div className="flex min-h-screen w-full flex-col items-center px-6 py-10">
+            <Profile />
+            <Accessibility />
+            <Stamp />
+        </div>
+    );
+};
+
+export default EstampHome;

src/pages/estamp-home.tsx

@@ -0,0 +1,3 @@
+import EstampHome from '@/components/Estamp/Home';
+
+export default EstampHome;

src/types/stamp.ts

@@ -0,0 +1,5 @@
+export interface StampInfo {
+    stampId: string;
+    imgUrl: string;
+    check: boolean;
+}

src/utils/estamp/stamps.ts

@@ -0,0 +1,25 @@
+import { StampInfo } from '@/types/stamp';
+import placeHolderPic from '@/public/images/pfp-placeholder.svg';
+
+export const stampPiecePicture: StampInfo[] = [
+    {
+        stampId: 'E-Stamp-01',
+        imgUrl: placeHolderPic,
+        check: true,
+    },
+    {
+        stampId: 'E-Stamp-02',
+        imgUrl: placeHolderPic,
+        check: false,
+    },
+    {
+        stampId: 'E-Stamp-03',
+        imgUrl: placeHolderPic,
+        check: false,
+    },
+    {
+        stampId: 'E-Stamp-04',
+        imgUrl: placeHolderPic,
+        check: true,
+    },
+];