Initial commit

3 files changed, 84 insertions, 0 deletions

diff --git a/src/modules/profile-card/components/Dropdown.tsx b/src/modules/profile-card/components/Dropdown.tsx
new file mode 100644
index 0000000..f6f58c9
--- /dev/null
+++ b/src/modules/profile-card/components/Dropdown.tsx
@@ -0,0 +1,36 @@
+"use client";
+import { DropdownItem, DropdownMenu, DropdownTrigger, Dropdown as UIDropdown } from "@nextui-org/react"
+import { MoreVerticalIcon } from "lucide-react"
+import { deleteCookie } from "cookies-next"
+import { useRouter } from "next/navigation";
+
+const Dropdown = () => {
+  const router = useRouter()
+
+  const logout = () => {
+    deleteCookie('credential')
+    router.push('/login')
+  }
+
+  return (
+    <UIDropdown>
+      <DropdownTrigger>
+        <button type="button" className="p-1">
+          <MoreVerticalIcon size={20} />
+        </button>
+      </DropdownTrigger>
+      <DropdownMenu>
+        <DropdownItem
+          key="logout"
+          className="text-danger-600"
+          color="danger"
+          onPress={logout}
+        >
+          Logout
+        </DropdownItem>
+      </DropdownMenu>
+    </UIDropdown>
+  )
+}
+
+export default Dropdown
\ No newline at end of file
diff --git a/src/modules/profile-card/index.tsx b/src/modules/profile-card/index.tsx
new file mode 100644
index 0000000..08c4478
--- /dev/null
+++ b/src/modules/profile-card/index.tsx
@@ -0,0 +1,37 @@
+import { Credential } from "@/common/types/auth"
+import { Avatar, AvatarIcon, Card, CardBody } from '@nextui-org/react';
+import { teamAliases } from '@/common/constants/team';
+import styles from "./profile-card.module.css"
+import Dropdown from './components/Dropdown';
+import { cookies } from 'next/headers';
+
+const ProfileCard = () => {
+  const credentialStr = cookies().get('credential')?.value
+  const credential: Credential | null = credentialStr ? JSON.parse(credentialStr) : null
+
+  return credential && (
+    <Card shadow='sm'>
+      <CardBody className={styles.cardBody}>
+        <Avatar icon={<AvatarIcon />} size='sm' isBordered color='primary' classNames={{ icon: 'text-white' }} />
+        <div>
+          <div className={styles.name}>{credential.name}</div>
+          <div className={styles.description}>
+            <span>
+              {credential.company.name}
+            </span>
+            &#183;
+            <span>
+              Tim {teamAliases[credential.team].name}
+            </span>
+          </div>
+        </div>
+
+        <div className="ml-auto">
+          <Dropdown />
+        </div>
+      </CardBody>
+    </Card>
+  )
+}
+
+export default ProfileCard
\ No newline at end of file
diff --git a/src/modules/profile-card/profile-card.module.css b/src/modules/profile-card/profile-card.module.css
new file mode 100644
index 0000000..b0b05ef
--- /dev/null
+++ b/src/modules/profile-card/profile-card.module.css
@@ -0,0 +1,11 @@
+.cardBody {
+  @apply flex flex-row items-center gap-x-4;
+}
+
+.name {
+  @apply font-medium;
+}
+
+.description {
+  @apply text-sm text-neutral-500 flex gap-x-1;
+}