39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
// src/components/ui/OrganizationCard.tsx
|
|
import React from 'react';
|
|
import { ChevronRight } from 'lucide-react';
|
|
import type { Organization } from '@/types/organization';
|
|
import { organizationTypeIcon } from '@/components/shared/organizationTypeIcon';
|
|
|
|
interface OrganizationCardProps {
|
|
organization: Organization;
|
|
onSelect: (id: string) => void;
|
|
}
|
|
|
|
export const OrganizationCard: React.FC<OrganizationCardProps> = ({
|
|
organization,
|
|
onSelect,
|
|
}) => {
|
|
const Icon = organizationTypeIcon(organization.type);
|
|
const typeText = organization.type === 'CLINIC' ? 'Dental Clinic' : 'Dental Lab';
|
|
|
|
return (
|
|
<button
|
|
onClick={() => onSelect(organization.id)}
|
|
className="w-full surface-card p-6 hover:border-primary/60 transition-all text-left flex items-center gap-4 group"
|
|
>
|
|
<div className="p-3 bg-primary-soft rounded-[var(--radius-sm)] text-primary">
|
|
<Icon className="h-8 w-8 icon-flat" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-lg font-semibold text-text-primary">{organization.name}</h3>
|
|
<p className="text-sm text-text-secondary">{typeText}</p>
|
|
{organization.plan && (
|
|
<p className="text-xs text-text-muted mt-1">
|
|
Plan: {organization.plan.name} • {organization.plan.maxUsers} users
|
|
</p>
|
|
)}
|
|
</div>
|
|
<ChevronRight className="h-5 w-5 icon-flat text-text-muted group-hover:text-primary transition-colors" />
|
|
</button>
|
|
);
|
|
}; |