From 6cb7beeb31ec9ccf9c4341bde2a6ec1cb7298371 Mon Sep 17 00:00:00 2001 From: NishantGupt786 Date: Tue, 5 Mar 2024 22:18:06 +0530 Subject: [PATCH] feat:team members card --- devsoc24-portal-fe/package.json | 2 + devsoc24-portal-fe/pnpm-lock.yaml | 33 ++++++++- devsoc24-portal-fe/src/app/page.tsx | 6 +- .../src/components/customCard.tsx | 7 +- .../src/components/team/createTeam.tsx | 4 - .../src/components/team/joinTeam.tsx | 4 - .../src/components/teamCard.tsx | 74 +++++++++++++++++++ devsoc24-portal-fe/src/styles/globals.css | 32 ++++++++ 8 files changed, 147 insertions(+), 15 deletions(-) create mode 100644 devsoc24-portal-fe/src/components/teamCard.tsx diff --git a/devsoc24-portal-fe/package.json b/devsoc24-portal-fe/package.json index 53a7120..eeea4b7 100644 --- a/devsoc24-portal-fe/package.json +++ b/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", diff --git a/devsoc24-portal-fe/pnpm-lock.yaml b/devsoc24-portal-fe/pnpm-lock.yaml index 1efeb6c..50faf7e 100644 --- a/devsoc24-portal-fe/pnpm-lock.yaml +++ b/devsoc24-portal-fe/pnpm-lock.yaml @@ -50,6 +50,9 @@ dependencies: react: specifier: 18.2.0 version: 18.2.0 + react-copy-to-clipboard: + specifier: ^5.1.0 + version: 5.1.0(react@18.2.0) react-dom: specifier: 18.2.0 version: 18.2.0(react@18.2.0) @@ -85,6 +88,9 @@ devDependencies: '@types/react': specifier: ^18.2.57 version: 18.2.57 + '@types/react-copy-to-clipboard': + specifier: ^5.0.7 + version: 5.0.7 '@types/react-dom': specifier: ^18.2.19 version: 18.2.19 @@ -1080,6 +1086,12 @@ packages: /@types/prop-types@15.7.11: resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==} + /@types/react-copy-to-clipboard@5.0.7: + resolution: {integrity: sha512-Gft19D+as4M+9Whq1oglhmK49vqPhcLzk8WfvfLvaYMIPYanyfLy0+CwFucMJfdKoSFyySPmkkWn8/E6voQXjQ==} + dependencies: + '@types/react': 18.2.57 + dev: true + /@types/react-dom@18.2.19: resolution: {integrity: sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==} dependencies: @@ -1603,6 +1615,12 @@ packages: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} dev: true + /copy-to-clipboard@3.3.3: + resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==} + dependencies: + toggle-selection: 1.0.6 + dev: false + /cross-spawn@7.0.3: resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} engines: {node: '>= 8'} @@ -3172,7 +3190,6 @@ packages: loose-envify: 1.4.0 object-assign: 4.1.1 react-is: 16.13.1 - dev: true /property-expr@2.0.6: resolution: {integrity: sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==} @@ -3186,6 +3203,16 @@ packages: /queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} + /react-copy-to-clipboard@5.1.0(react@18.2.0): + resolution: {integrity: sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==} + peerDependencies: + react: ^15.3.0 || 16 || 17 || 18 + dependencies: + copy-to-clipboard: 3.3.3 + prop-types: 15.8.1 + react: 18.2.0 + dev: false + /react-dom@18.2.0(react@18.2.0): resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} peerDependencies: @@ -3644,6 +3671,10 @@ packages: dependencies: is-number: 7.0.0 + /toggle-selection@1.0.6: + resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==} + dev: false + /toposort@2.0.2: resolution: {integrity: sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==} dev: false diff --git a/devsoc24-portal-fe/src/app/page.tsx b/devsoc24-portal-fe/src/app/page.tsx index e6277d5..e03a37a 100644 --- a/devsoc24-portal-fe/src/app/page.tsx +++ b/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 ( -
+
title
-
+
+
); diff --git a/devsoc24-portal-fe/src/components/customCard.tsx b/devsoc24-portal-fe/src/components/customCard.tsx index 2cc5a89..99cf601 100644 --- a/devsoc24-portal-fe/src/components/customCard.tsx +++ b/devsoc24-portal-fe/src/components/customCard.tsx @@ -17,7 +17,7 @@ function CustomCard(props: CardProps) { return ( <> -
+
{title}
@@ -39,17 +39,16 @@ function CustomCard(props: CardProps) { handleDialogTriggerClick(button.modalType!)} // Handle click event + onClick={() => handleDialogTriggerClick(button.modalType!)} > {button.text} ) : ( - ), )} - {/* Render the appropriate DialogContent based on selectedModal */} {showModal === "JoinTeam" && } {showModal === "CreateTeam" && } diff --git a/devsoc24-portal-fe/src/components/team/createTeam.tsx b/devsoc24-portal-fe/src/components/team/createTeam.tsx index 4e5b5d1..470c752 100644 --- a/devsoc24-portal-fe/src/components/team/createTeam.tsx +++ b/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"; diff --git a/devsoc24-portal-fe/src/components/team/joinTeam.tsx b/devsoc24-portal-fe/src/components/team/joinTeam.tsx index edb48ef..b510682 100644 --- a/devsoc24-portal-fe/src/components/team/joinTeam.tsx +++ b/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"; diff --git a/devsoc24-portal-fe/src/components/teamCard.tsx b/devsoc24-portal-fe/src/components/teamCard.tsx new file mode 100644 index 0000000..ac895ff --- /dev/null +++ b/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 ( + <> +
+
+
+ Your Devsoc Team +
+
+

{team.teamName}

+

Team Members

+
+ {team.memberName} + {team.isLeader && ( + + + + )} +
+ {team.teamMembers.map((member, index) => ( +
+ {member.name} + {member.isLeader ? ( + + + + ) : ( + + + + )} +
+ ))} + + + +
+
+
+ + ); +} + +export default TeamCard; diff --git a/devsoc24-portal-fe/src/styles/globals.css b/devsoc24-portal-fe/src/styles/globals.css index 00b08e3..177aef6 100644 --- a/devsoc24-portal-fe/src/styles/globals.css +++ b/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 */ +} \ No newline at end of file