Main

src/app/dev/page.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import Border from '@/components/Border';
+import { Suspense } from 'react';
+import UserCard from '@/components/UserCard';
+
+// For dev (delete soon)
+export default function page() {
+  return (
+    <Suspense>
+      <Login />
+    </Suspense>
+  );
+}
+
+function Login() {
+  return (
+    <Border variant="dark-pink">
+      <UserCard />
+
+      <div className="w-4/5 h-4/5 ">
+        <UserCard />
+      </div>
+
+      {/* Break if the size is too small because the texts' sizes */}
+      <div className="w-1/2 h-1/2">
+        <UserCard />
+      </div>
+    </Border>
+  );
+}

src/components/UserCard.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import TV from '@public/user-card/tv.png';
+import EditIcon from '@public/user-card/edit-icon.svg';
+import Image from 'next/image';
+import { useAuth } from '@/context/AuthContext';
+import { useRouter } from 'next/navigation';
+
+const UserCard = () => {
+  const router = useRouter();
+  const { user } = useAuth();
+  const name = `${user?.firstname} ${user?.lastname}`;
+  const studentId = user?.email.split('@')[0];
+  const photo_url = user?.photo_url;
+
+  return (
+    <div className="relative w-full h-full flex justify-center items-center p-4">
+      <Image
+        src={TV}
+        alt="tv"
+        className="w-full h-auto object-cover"
+      />
+      <div className="absolute top-[15%] left-[9%] w-[65%] h-[65%] flex flex-col items-center justify-center p-4 bg-blue-900 rounded-lg">
+        <div className="w-[35%] h-[50%] overflow-hidden rounded-full">
+          {photo_url && (
+            <img
+              src={photo_url}
+              alt="user-picture"
+              className="w-full h-full object-cover"
+            />
+          )}
+        </div>
+        <div className="text-center">
+          <h2 className="text-sm text-yellow-400 font-bold mt-2">{name}</h2>
+          <p className="text-xs text-white">รหัสนิสิต {studentId}</p>
+        </div>
+      </div>
+      <div
+        className="absolute top-[5%] right-[2%] w-[20%]"
+        onClick={() => router.push('/edit')}
+      >
+        <Image
+          src={EditIcon}
+          alt="edit-icon"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default UserCard;