From 4ef5ac249ad33974b55d4c5e65c015bd82f5454a Mon Sep 17 00:00:00 2001 From: Amama-Fatima Date: Fri, 3 May 2024 00:49:40 +0500 Subject: [PATCH] style: project cards accordion --- package.json | 1 + pnpm-lock.yaml | 58 +++++++++++++++++++++++++++++++++ src/components/project-card.tsx | 22 +++++++++---- src/components/ui/accordion.tsx | 58 +++++++++++++++++++++++++++++++++ 4 files changed, 133 insertions(+), 6 deletions(-) create mode 100644 src/components/ui/accordion.tsx diff --git a/package.json b/package.json index 8dc9a15..7848b62 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ }, "dependencies": { "@hookform/resolvers": "^3.3.4", + "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5320a6d..2f3f98e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ dependencies: '@hookform/resolvers': specifier: ^3.3.4 version: 3.3.4(react-hook-form@7.51.1) + '@radix-ui/react-accordion': + specifier: ^1.1.2 + version: 1.1.2(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-avatar': specifier: ^1.0.4 version: 1.0.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0) @@ -2237,6 +2240,34 @@ packages: '@babel/runtime': 7.24.0 dev: false + /@radix-ui/react-accordion@1.1.2(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.0 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-collapsible': 1.0.3(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-collection': 1.0.3(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.73)(react@18.2.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.73)(react@18.2.0) + '@radix-ui/react-direction': 1.0.1(@types/react@18.2.73)(react@18.2.0) + '@radix-ui/react-id': 1.0.1(@types/react@18.2.73)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.73)(react@18.2.0) + '@types/react': 18.2.73 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-arrow@1.0.3(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==} peerDependencies: @@ -2307,6 +2338,33 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /@radix-ui/react-collapsible@1.0.3(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.0 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.73)(react@18.2.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.73)(react@18.2.0) + '@radix-ui/react-id': 1.0.1(@types/react@18.2.73)(react@18.2.0) + '@radix-ui/react-presence': 1.0.1(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.73)(react@18.2.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.73)(react@18.2.0) + '@types/react': 18.2.73 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-collection@1.0.3(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==} peerDependencies: diff --git a/src/components/project-card.tsx b/src/components/project-card.tsx index 24ac039..1d95919 100644 --- a/src/components/project-card.tsx +++ b/src/components/project-card.tsx @@ -1,6 +1,12 @@ import React from 'react'; import { Icons } from '@/components/icons'; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from '@/components/ui/accordion'; import { Badge } from '@/components/ui/badge'; import { Card, @@ -70,12 +76,16 @@ const ProjectCard = ({ -

- Details: {description} -

-

- Team: {team} -

+ + + Details + {description} + + + Team + {team} + + diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx new file mode 100644 index 0000000..2f81f14 --- /dev/null +++ b/src/components/ui/accordion.tsx @@ -0,0 +1,58 @@ +'use client'; + +import * as AccordionPrimitive from '@radix-ui/react-accordion'; +import { ChevronDown } from 'lucide-react'; +import * as React from 'react'; + +import { cn } from '@/lib/utils'; + +const Accordion = AccordionPrimitive.Root; + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AccordionItem.displayName = 'AccordionItem'; + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180', + className + )} + {...props} + > + {children} + + + +)); +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName; + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)); + +AccordionContent.displayName = AccordionPrimitive.Content.displayName; + +export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };