diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 6440a5c3..af3e3777 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -5,23 +5,32 @@ import { cva } from 'class-variance-authority'; const Chip = React.forwardRef((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 ( - + {label} ); diff --git a/src/components/Chip/types.ts b/src/components/Chip/types.ts index 22bfb972..f660a809 100644 --- a/src/components/Chip/types.ts +++ b/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; diff --git a/src/pages/Home/components/ShelterSupplyCategoryRow/ShelterSupplyCategoryRow.tsx b/src/pages/Home/components/ShelterSupplyCategoryRow/ShelterSupplyCategoryRow.tsx index a711f3f0..f8f3aa79 100644 --- a/src/pages/Home/components/ShelterSupplyCategoryRow/ShelterSupplyCategoryRow.tsx +++ b/src/pages/Home/components/ShelterSupplyCategoryRow/ShelterSupplyCategoryRow.tsx @@ -13,6 +13,10 @@ const ShelterSupplyCategoryRow = React.forwardRef< if (tags.length === 0) return ; + const moreInfoLabel = () => { + return `+${tags.length - 10} ${tags.length > 11 ? 'itens' : 'item'}`; + }; + return (
@@ -21,9 +25,13 @@ const ShelterSupplyCategoryRow = React.forwardRef<

{description &&

{description}

}
- {tags.map((s, idx) => ( + {tags.slice(0, 10).map((s, idx) => ( ))} + + {tags.length > 10 && ( + + )}
);