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 72 73 74 75 76 77 78 79 80 81 82 83 84 | 1x 18x 18x 18x | // src/features/flyer/FlyerDisplay.tsx
import React from 'react';
import { formatDateRange } from '../../utils/dateUtils';
import type { Store } from '../../types';
import { ScanIcon } from '../../components/icons/ScanIcon';
export interface FlyerDisplayProps {
imageUrl: string | null;
store?: Store;
validFrom?: string | null;
validTo?: string | null;
storeAddress?: string | null;
onOpenCorrectionTool: () => void;
}
export const FlyerDisplay: React.FC<FlyerDisplayProps> = ({
imageUrl,
store,
validFrom,
validTo,
storeAddress,
onOpenCorrectionTool,
}) => {
const dateRange = formatDateRange(validFrom, validTo, { verbose: true });
// Determine the correct image source. If imageUrl is already a full URL (starts with http)
// or is an absolute path (starts with /), use it directly. Otherwise, assume it's a relative
// filename from the database and prepend the correct path.
const imageSrc =
imageUrl && (imageUrl.startsWith('http') || imageUrl.startsWith('/'))
? imageUrl
: `/flyer-images/${imageUrl}`;
return (
<div className="w-full rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 shadow-sm bg-white dark:bg-gray-900 flex flex-col">
{(store || dateRange) && (
<div className="p-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 flex items-center space-x-4 pr-4">
{store?.logo_url && (
<img
src={store.logo_url}
alt={`${store.name || 'Store'} Logo`}
className="h-12 w-12 object-contain rounded-md"
/>
)}
<div className="grow text-center sm:text-left min-w-0">
{store?.name && (
<h3 className="text-gray-900 dark:text-white text-lg font-bold tracking-wide">
{store.name}
</h3>
)}
{dateRange && (
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">{dateRange}</p>
)}
{storeAddress && (
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{storeAddress}</p>
)}
</div>
<button
onClick={onOpenCorrectionTool}
className="ml-auto shrink-0 flex items-center px-3 py-2 bg-yellow-500 text-white text-sm font-semibold rounded-md hover:bg-yellow-600 transition-colors"
title="Manually correct flyer data"
>
<ScanIcon className="w-5 h-5 mr-2" />
Correct Data
</button>
</div>
)}
<div className="bg-gray-100 dark:bg-gray-800">
{imageUrl ? (
<img
src={imageSrc}
alt="Grocery Flyer"
className="w-full h-auto object-contain max-h-[60vh] dark:invert dark:hue-rotate-180"
/>
) : (
<div className="w-full h-64 bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
<p className="text-gray-500">Flyer image will be displayed here</p>
</div>
)}
</div>
</div>
);
};
|