Added component VerificationBadge and used it on GroupCard.

Signed-off-by: Jan Hendrik Scheufen <j.h.scheufen@gmail.com>
Axe-DAO · Oct 20, 2024 · 4b760f6 · 4b760f6
1 parent fb3b70a
commit 4b760f6
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 5 deletions.
diff --git a/packages/quilombo/components/GroupCard.tsx b/packages/quilombo/components/GroupCard.tsx
@@ -8,7 +8,7 @@ import { ReactNode } from 'react';
 import { PATHS } from '@/config/constants';
 import { Group } from '@/types/model';
 import { getImageUrl } from '@/utils';
-import VerificationChip from './VerificationChip';
+import VerificationBadge from './VerificationBadge';
 
 type Props = { group: Group; className?: string; cardFooter?: ReactNode };
 
@@ -17,7 +17,9 @@ const GroupCard = ({ group, className = '', cardFooter = null }: Props) => {
   return (
     <Card as={Link} href={`${PATHS.groups}/${id}`}>
       <CardBody className={clsx('flex flex-row gap-3 p-2', className)}>
-        <Avatar src={getImageUrl(logo)} size="lg" />
+        <VerificationBadge verified={verified}>
+          <Avatar src={getImageUrl(logo)} size="lg" />
+        </VerificationBadge>
         <div className="flex-1 flex flex-col">
           <h3 className="flex items-center text-md">{name}</h3>
           {countryName && (
@@ -28,7 +30,6 @@ const GroupCard = ({ group, className = '', cardFooter = null }: Props) => {
               </span>
             </div>
           )}
-          <VerificationChip verified={verified} className="self-end" />
         </div>
       </CardBody>
       {cardFooter && <CardFooter className="flex-row">{cardFooter}</CardFooter>}

diff --git a/packages/quilombo/components/VerificationBadge.tsx b/packages/quilombo/components/VerificationBadge.tsx
@@ -0,0 +1,27 @@
+import { Badge, BadgeProps } from '@nextui-org/badge';
+import { Tooltip } from '@nextui-org/tooltip';
+import { CircleCheckIcon } from 'lucide-react';
+
+type Props = { verified: boolean } & BadgeProps;
+
+const VerificationBadge = ({ verified, children, ...props }: Props) => {
+  if (!verified) return children;
+  return (
+    <Badge
+      content={
+        <Tooltip content="Verified Group">
+          <CircleCheckIcon className="[&>circle]:fill-primary stroke-default-100" />
+        </Tooltip>
+      }
+      placement="top-left"
+      isOneChar
+      color="primary"
+      tooltip="Verified Group"
+      {...props}
+    >
+      {children}
+    </Badge>
+  );
+};
+
+export default VerificationBadge;
diff --git a/packages/quilombo/package.json b/packages/quilombo/package.json
@@ -19,6 +19,7 @@
     "@nextui-org/accordion": "^2.0.40",
     "@nextui-org/autocomplete": "^2.1.7",
     "@nextui-org/avatar": "^2.0.33",
+    "@nextui-org/badge": "^2.0.32",
     "@nextui-org/breadcrumbs": "^2.0.13",
     "@nextui-org/button": "2.0.38",
     "@nextui-org/card": "^2.0.34",

diff --git a/packages/quilombo/tailwind.config.js b/packages/quilombo/tailwind.config.js
@@ -84,7 +84,7 @@ module.exports = withTV({
               foreground: '#000000',
             },
             secondary: {
-              DEFAULT: '##D4A373',
+              DEFAULT: '#D4A373',
               50: '#15100b',
               100: '#2a2117',
               200: '#55412e',

diff --git a/yarn.lock b/yarn.lock
@@ -3493,7 +3493,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nextui-org/badge@npm:2.0.32":
+"@nextui-org/badge@npm:2.0.32, @nextui-org/badge@npm:^2.0.32":
   version: 2.0.32
   resolution: "@nextui-org/badge@npm:2.0.32"
   dependencies:
@@ -17101,6 +17101,7 @@ __metadata:
     "@nextui-org/accordion": "npm:^2.0.40"
     "@nextui-org/autocomplete": "npm:^2.1.7"
     "@nextui-org/avatar": "npm:^2.0.33"
+    "@nextui-org/badge": "npm:^2.0.32"
     "@nextui-org/breadcrumbs": "npm:^2.0.13"
     "@nextui-org/button": "npm:2.0.38"
     "@nextui-org/card": "npm:^2.0.34"