feat:team members card

devsoc24-portal-fe/package.json

@@ -25,6 +25,7 @@
     "next": "^14.1.0",
     "next-themes": "^0.2.1",
     "react": "18.2.0",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.50.1",
     "tailwind-merge": "^2.2.1",
@@ -38,6 +39,7 @@
     "@types/eslint": "^8.56.2",
     "@types/node": "^20.11.20",
     "@types/react": "^18.2.57",
+    "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^7.0.2",

devsoc24-portal-fe/src/app/page.tsx

@@ -5,6 +5,7 @@ import { useEffect } from "react";
 import Logo from "@/components/logo";
 import Dashtitle from "@/assets/images/titleDashboard.svg";
 import CustomCard from "@/components/customCard";
+import TeamCard from "@/components/teamCard";
 
 export default function HomePage() {
   const noTeamCard = [
@@ -35,12 +36,12 @@ export default function HomePage() {
   //   }
   // });
   return (
-    <main className="flex min-h-screen flex-col items-start bg-[#F4F5FA]">
+    <main className="flex min-h-screen flex-col items-start bg-[#F4F5FA] overflow-x-hidden">
       <div className="flex h-[10%] w-full items-center gap-x-8 bg-background px-6 py-2">
         <Logo className="h-9/10 w-auto" />
         <Image src={Dashtitle as HTMLImageElement} alt="title" />
       </div>
-      <div className="ml-4 mt-4 flex flex-col md:flex-row gap-4">
+      <div className="mt-4 flex flex-col md:flex-row md:flex-wrap gap-4 w-full px-4">
         <CustomCard
           title="Your Devsoc Team"
           cardImage="teamCardImg"
@@ -55,6 +56,7 @@ export default function HomePage() {
           cardDesc="Submit Your Idea Before < date > < time >"
           buttonDetails={ideaCard}
         />
+        <TeamCard />
       </div>
     </main>
   );

devsoc24-portal-fe/src/components/customCard.tsx

@@ -17,7 +17,7 @@ function CustomCard(props: CardProps) {
 
   return (
     <>
-      <div className="h-fit w-screen rounded-xl bg-white md:w-fit">
+      <div className="h-fit rounded-xl bg-white w-full md:w-fit">
         <div className="pl-3 pt-2 font-semibold text-[#45464E]">{title}</div>
         <div className="flex flex-col items-center justify-center p-8">
           <div className="rounded-full border-[#E1E2E9] bg-[#F4F5FA] p-8">
@@ -39,17 +39,16 @@ function CustomCard(props: CardProps) {
                   <DialogTrigger
                     key={index}
                     className="w-36 rounded-md bg-primary p-2 font-semibold text-white"
-                    onClick={() => handleDialogTriggerClick(button.modalType!)} // Handle click event
+                    onClick={() => handleDialogTriggerClick(button.modalType!)}
                   >
                     {button.text}
                   </DialogTrigger>
                 ) : (
-                  <Button key={index} className="w-28">
+                  <Button key={index} className="w-28" >
                     {button.text}
                   </Button>
                 ),
               )}
-              {/* Render the appropriate DialogContent based on selectedModal */}
               {showModal === "JoinTeam" && <JoinTeam />}
               {showModal === "CreateTeam" && <CreateTeam />}
             </Dialog>

devsoc24-portal-fe/src/components/team/createTeam.tsx

@@ -1,11 +1,7 @@
 import {
-    Dialog,
     DialogContent,
-    DialogDescription,
     DialogHeader,
     DialogTitle,
-    DialogTrigger,
-    DialogFooter,
   } from "@/components/ui/dialog";
   import { Label } from "@/components/ui/label";
   import { Button } from "@/components/ui/button";

devsoc24-portal-fe/src/components/team/joinTeam.tsx

@@ -1,11 +1,7 @@
 import {
-  Dialog,
   DialogContent,
-  DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
-  DialogFooter,
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";

devsoc24-portal-fe/src/components/teamCard.tsx

@@ -0,0 +1,74 @@
+"use client";
+import { useState } from "react";
+import { Crown, BadgeMinus, Files, Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+const team = {
+  memberName: "John dobecrazy",
+  teamName: "Team valhalla",
+  isLeader: true,
+  teamMembers: [
+    { name: "John doe", isLeader: false },
+    { name: "John doe", isLeader: false },
+    { name: "John doe", isLeader: false },
+  ],
+  teamCode: "123456",
+};
+
+function TeamCard() {
+  const [isCopied, setIsCopied] = useState(false);
+  const onCopyText = () => {
+    setIsCopied(true);
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 1000);
+  };
+  return (
+    <>
+      <div>
+        <div className="h-fit w-full rounded-xl bg-white md:w-[400px]">
+          <div className="pl-3 pt-2 font-semibold text-[#45464E]">
+            Your Devsoc Team
+          </div>
+          <div className="flex flex-col items-center justify-center p-8">
+            <p className="text-2xl font-semibold">{team.teamName}</p>
+            <p className="pb-4 text-sm text-[#8B8D97]">Team Members</p>
+            <div className="mb-2 flex w-full items-center justify-between rounded-lg border-2 border-[#B6B6B6] p-3">
+              {team.memberName}
+              {team.isLeader && (
+                <span className="text-[#FFBE3D]">
+                  <Crown />
+                </span>
+              )}
+            </div>
+            {team.teamMembers.map((member, index) => (
+              <div
+                key={index}
+                className="mb-2 flex w-full items-center justify-between rounded-lg border-2 border-[#B6B6B6] p-3"
+              >
+                <span>{member.name}</span>
+                {member.isLeader ? (
+                  <span className="text-[#FFBE3D]">
+                    <Crown />
+                  </span>
+                ) : (
+                  <span className="text-[#AD1136]">
+                    <BadgeMinus />
+                  </span>
+                )}
+              </div>
+            ))}
+            <CopyToClipboard text={team.teamCode} onCopy={onCopyText}>
+              <Button className="mt-4 self-center flex items-center gap-x-2">
+                <span className="text-white">{isCopied ? <Check size={20} /> : <Files size={20} />}</span>
+                {team.teamCode}
+              </Button>
+            </CopyToClipboard>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default TeamCard;

devsoc24-portal-fe/src/styles/globals.css

@@ -57,3 +57,35 @@
     @apply bg-background text-foreground;
   }
 }
+
+::-webkit-scrollbar {
+  width: 2.5px;
+  /* Width of the scrollbar */
+}
+::-webkit-scrollbar:hover {
+  width: 3.5px;
+  /* Width of the scrollbar */
+}
+
+/* Define the style for the scrollbar handle (thumb) */
+::-webkit-scrollbar-thumb {
+  background-color: #484848;
+  /* Yellow color */
+  border-radius: 10px;
+  /* Rounded corners */
+}
+
+/* Define the style for the scrollbar track */
+::-webkit-scrollbar-track {
+  background-color: #020202;
+  /* Black color */
+
+  /* Rounded corners */
+}
+
+::-webkit-scrollbar-track:hover {
+  background-color: #c4c4c4;
+  /* Black color */
+
+  /* Rounded corners */
+}