Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | // src/features/store/StoreCard.tsx
import React from 'react';
interface StoreCardProps {
store: {
store_id: number;
name: string;
logo_url?: string | null;
locations?: {
address_line_1: string;
city: string;
province_state: string;
postal_code: string;
}[];
};
showLocations?: boolean;
}
/**
* A reusable component for displaying store information with optional location data.
* Used in flyer listings, deal cards, and store management views.
*/
export const StoreCard: React.FC<StoreCardProps> = ({ store, showLocations = false }) => {
const primaryLocation = store.locations && store.locations.length > 0 ? store.locations[0] : null;
const additionalLocationsCount = store.locations ? store.locations.length - 1 : 0;
return (
<div className="flex items-start space-x-3">
{/* Store Logo */}
{store.logo_url ? (
<img
src={store.logo_url}
alt={`${store.name} logo`}
className="h-12 w-12 object-contain rounded-md bg-gray-100 dark:bg-gray-700 p-1 flex-shrink-0"
/>
) : (
<div className="h-12 w-12 flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-md text-gray-400 text-xs flex-shrink-0">
{store.name.substring(0, 2).toUpperCase()}
</div>
)}
{/* Store Info */}
<div className="flex-1 min-w-0">
<h3 className="text-sm font-semibold text-gray-900 dark:text-white truncate">
{store.name}
</h3>
{showLocations && primaryLocation && (
<div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
<div className="truncate">{primaryLocation.address_line_1}</div>
<div className="truncate">
{primaryLocation.city}, {primaryLocation.province_state} {primaryLocation.postal_code}
</div>
{additionalLocationsCount > 0 && (
<div className="text-gray-400 dark:text-gray-500 mt-1">
+ {additionalLocationsCount} more location{additionalLocationsCount > 1 ? 's' : ''}
</div>
)}
</div>
)}
{showLocations && !primaryLocation && (
<div className="mt-1 text-xs text-gray-400 dark:text-gray-500 italic">
No location data
</div>
)}
</div>
</div>
);
};
|