Update - Melhoria na listagem de suplementos (#249)

Author: xlucaix

src/components/Chip/Chip.tsx

@@ -5,23 +5,32 @@ import { cva } from 'class-variance-authority';
 const Chip = React.forwardRef<HTMLDivElement, IChipProps>((props, ref) => {
   const { label, className, variant = 'info', ...rest } = props;
 
-  const variants = cva('px-4 py-1.5 font-medium text-sm md:text-md rounded-2xl', {
-    variants: {
-      variant: {
-        warn: 'bg-light-yellow',
-        success: 'bg-light-green',
-        danger: 'bg-light-red',
-        alert: 'bg-light-orange',
-        info: 'bg-light-blue',
+  const variants = cva(
+    'px-4 py-1.5 font-medium text-sm md:text-md rounded-2xl',
+    {
+      variants: {
+        variant: {
+          warn: 'bg-light-yellow',
+          success: 'bg-light-green',
+          danger: 'bg-light-red',
+          alert: 'bg-light-orange',
+          info: 'bg-light-blue',
+          moreInfo: 'bg-gray-200 text-black-600',
+        },
       },
-    },
-    defaultVariants: {
-      variant: 'info',
-    },
-  });
+      defaultVariants: {
+        variant: 'info',
+      },
+    }
+  );
 
   return (
-    <span tabIndex={0} ref={ref} {...rest} className={variants({ className, variant })}>
+    <span
+      tabIndex={0}
+      ref={ref}
+      {...rest}
+      className={variants({ className, variant })}
+    >
       {label}
     </span>
   );

src/components/Chip/types.ts

@@ -1,4 +1,4 @@
-export type ChipVariant = 'info' | 'success' | 'warn' | 'danger';
+export type ChipVariant = 'info' | 'success' | 'warn' | 'danger' | 'moreInfo';
 
 export interface IChipProps extends React.ComponentPropsWithoutRef<'div'> {
   label: string;

src/pages/Home/components/ShelterSupplyCategoryRow/ShelterSupplyCategoryRow.tsx

@@ -13,6 +13,10 @@ const ShelterSupplyCategoryRow = React.forwardRef<
 
   if (tags.length === 0) return <Fragment />;
 
+  const moreInfoLabel = () => {
+    return `+${tags.length - 10} ${tags.length > 11 ? 'itens' : 'item'}`;
+  };
+
   return (
     <div className={cn('flex flex-col gap-3', className)} ref={ref} {...rest}>
       <Separator className="mt-2" />
@@ -21,9 +25,13 @@ const ShelterSupplyCategoryRow = React.forwardRef<
       </p>
       {description && <p>{description}</p>}
       <div className="flex gap-2 flex-wrap">
-        {tags.map((s, idx) => (
+        {tags.slice(0, 10).map((s, idx) => (
           <Chip key={idx} {...s} />
         ))}
+
+        {tags.length > 10 && (
+          <Chip label={moreInfoLabel()} variant="moreInfo" />
+        )}
       </div>
     </div>
   );