- "content": "import { DollarSign } from \"lucide-react\";\nimport { Link } from \"react-router\";\nimport { useCreatePath, useListContext, useRecordContext } from \"ra-core\";\nimport { ReferenceManyField } from \"@/components/admin/reference-many-field\";\nimport { Card } from \"@/components/ui/card\";\n\nimport { Avatar as ContactAvatar } from \"../contacts/Avatar\";\nimport type { Company } from \"../types\";\nimport { CompanyAvatar } from \"./CompanyAvatar\";\n\nexport const CompanyCard = (props: { record?: Company }) => {\n const createPath = useCreatePath();\n const record = useRecordContext<Company>(props);\n if (!record) return null;\n\n return (\n <Link\n to={createPath({\n resource: \"companies\",\n id: record.id,\n type: \"show\",\n })}\n className=\"no-underline\"\n >\n <Card className=\"h-[200px] flex flex-col justify-between p-4 hover:bg-muted\">\n <div className=\"flex flex-col items-center gap-1\">\n <CompanyAvatar />\n <div className=\"text-center mt-1\">\n <h6 className=\"text-sm font-medium\">{record.name}</h6>\n <p className=\"text-xs text-muted-foreground\">{record.sector}</p>\n </div>\n </div>\n <div className=\"flex flex-row w-full justify-between gap-2\">\n <div className=\"flex items-center\">\n {record.nb_contacts ? (\n <ReferenceManyField reference=\"contacts\" target=\"company_id\">\n <AvatarGroupIterator />\n </ReferenceManyField>\n ) : null}\n </div>\n {record.nb_deals ? (\n <div className=\"flex items-center ml-2 gap-0.5\">\n <DollarSign className=\"w-4 h-4 text-muted-foreground\" />\n <span className=\"text-sm font-medium\">{record.nb_deals}</span>\n <span className=\"text-xs text-muted-foreground\">\n {record.nb_deals\n ? record.nb_deals > 1\n ? \"deals\"\n : \"deal\"\n : \"deal\"}\n </span>\n </div>\n ) : null}\n </div>\n </Card>\n </Link>\n );\n};\n\nconst AvatarGroupIterator = () => {\n const { data, total, error, isPending } = useListContext();\n if (isPending || error) return null;\n\n const MAX_AVATARS = 3;\n return (\n <div className=\"*:data-[slot=avatar]:ring-background flex -space-x-0.5 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\">\n {data.slice(0, MAX_AVATARS).map((record: any) => (\n <ContactAvatar\n key={record.id}\n record={record}\n width={25}\n height={25}\n title={`${record.first_name} ${record.last_name}`}\n />\n ))}\n {total > MAX_AVATARS && (\n <span\n className=\"relative flex size-8 shrink-0 overflow-hidden rounded-full w-[25px] h-[25px]\"\n data-slot=\"avatar\"\n >\n <span className=\"bg-muted flex size-full items-center justify-center rounded-full text-[10px]\">\n +{total - MAX_AVATARS}\n </span>\n </span>\n )}\n </div>\n );\n};\n",
0 commit comments