✨ feat : Create a group select page layout

- Users can see a page where they can choose which groups they belong to

Related issue: #50

Author: Lainari

src/app/components/group/Created.tsx

@@ -0,0 +1,11 @@
+const Created = () => {
+  return (
+    <>
+      <div className="border rounded-lg w-80 h-72 border-gray-300 mr-10 mb-10 text-black">
+        Created Group
+      </div>
+    </>
+  );
+};
+
+export default Created;

src/app/components/group/Favorite.tsx

@@ -0,0 +1,11 @@
+const Favorite = () => {
+  return (
+    <>
+      <div className="border rounded-lg w-80 h-72 border-gray-300 mr-10 mb-10 text-black">
+        Favorite Group
+      </div>
+    </>
+  );
+};
+
+export default Favorite;

src/app/components/group/Header.tsx

@@ -0,0 +1,16 @@
+import Image from 'next/image';
+import {folder} from '@/public/svgs/group';
+
+const Header = () => {
+  return (
+    <div className="mt-6">
+      <div className="flex items-center justify-between me-10">
+        <h1 className="text-black text-5xl font-medium">Groups</h1>
+        <Image src={folder} width={70} height={70} alt={'folder'} />
+      </div>
+      <div className="border border-gray-200 w-11/12 mt-4"></div>
+    </div>
+  );
+};
+
+export default Header;

src/app/components/group/Invite.tsx

@@ -0,0 +1,5 @@
+const Invite = () => {
+  return <>invite page</>;
+};
+
+export default Invite;

src/app/components/group/Joined.tsx

@@ -0,0 +1,18 @@
+import {Favorite, Created} from '.';
+
+const Joined = () => {
+  return (
+    <>
+      <Favorite />
+      <Created />
+      <div className="border rounded-lg w-80 h-72 border-gray-300 mr-10 mb-10 text-black">
+        Normal Group1
+      </div>
+      <div className="border rounded-lg w-80 h-72 border-gray-300 mr-10 mb-10 text-black">
+        Normal Group2
+      </div>
+    </>
+  );
+};
+
+export default Joined;

src/app/components/group/Main.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import React, {useState} from 'react';
+import {Favorite, Created, Joined, Invite, Waiting} from '.';
+import {Dashboard, TabsMapping} from '@/src/components/dashboard';
+import Header from './Header';
+
+const Main = () => {
+  const tabs = ['Joined', 'Created', 'Favorite', 'Invite', 'Waiting'];
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  const tabMapping = {
+    Joined: <Joined />,
+    Created: <Created />,
+    Favorite: <Favorite />,
+    Invite: <Invite />,
+    Waiting: <Waiting />,
+  };
+
+  return (
+    <div className="flex h-full ms-10 bg-gray-200">
+      <div className="flex-grow bg-white">
+        <Header />
+        <Dashboard
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+          tabs={tabs}
+        />
+        <div className="flex flex-wrap ms-2 mt-12 ">
+          <TabsMapping activeTab={activeTab} tabMapping={tabMapping} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Main;

src/app/components/group/Waiting.tsx

@@ -0,0 +1,5 @@
+const Waiting = () => {
+  return <>waiting page</>;
+};
+
+export default Waiting;

src/app/components/group/index.ts

@@ -0,0 +1,8 @@
+import Main from './Main';
+import Favorite from './Favorite';
+import Created from './Created';
+import Invite from './Invite';
+import Waiting from './Waiting';
+import Joined from './Joined';
+
+export {Main, Favorite, Created, Invite, Waiting, Joined};

src/app/page.tsx

@@ -1,7 +1,9 @@
+import {Main} from './components/group';
+
 export default function Page() {
   return (
-    <div>
-      <h1>yuminnk-nextjs-template</h1>
-    </div>
+    <>
+      <Main />
+    </>
   );
 }