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 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | 1x 1x 1x 1x 1x 1x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 2x 9x 11x 11x 11x 11x 11x 1x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x | // Icons
import { HolidayIcon } from './HolidayIcon';
// Utils
import { combineClasses } from '@shared/utils';
import { isToday, formatDate } from '@/utils';
// Components
import { VoteProgressBar } from '../VoteProgressBar';
// Constants
import { FALLBACK_SRC } from '@shared/constants';
export interface DayCardProps {
id: string;
image?: string;
alt?: string;
date: string;
isHoliday: boolean;
dislikes: number;
likes: number;
}
export const ViewOnlyDayCard = (props: DayCardProps) => {
const {
id,
image: rawImage,
alt = 'Meal',
date,
isHoliday,
likes: countLike,
dislikes: countDislike,
} = props;
const fallbackImage = FALLBACK_SRC.DEFAULT;
const image = rawImage || fallbackImage;
const isTodayMeal = isToday(date);
const dayLabel = formatDate(date);
const disabledVote = true;
return (
<div
className="day-card snap-center w-full h-full meal-md shrink-0 bg-transparent flex flex-col snap-start justify-center items-center mt-4"
data-today={isTodayMeal ? 'true' : 'false'}
data-visible="false"
data-date={date}
>
<div className="justify-center items-center flex flex-col">
<div className="meal-md">
{/* Date label */}
<div
data-section="date"
className={combineClasses('flex flex-col justify-end')}
>
{isHoliday && <HolidayIcon />}
<p
className={combineClasses(
'text-lg md:text-4xs tracking-[0.8px] sm:tracking-[0.5px] text-center uppercase mt-1.5 mb-1.5',
isTodayMeal ? 'text-secondary' : 'text-ocean',
)}
>
{dayLabel}
</p>
</div>
<div className="relative h-meal flex-shrink-0 rounded-[20px] md:rounded-[10px] box-shadow-image">
<div className="h-full w-full overflow-hidden rounded-[20px] md:rounded-[10px] bg-white">
<img
src={image}
alt={alt}
height={300}
width={200}
loading="lazy"
className={combineClasses(
image === fallbackImage
? 'object-contain bg-tertiary-foreground'
: 'object-cover bg-white',
'w-full h-full',
'animated-load',
)}
data-loaded="false"
onLoad={(e) =>
e.currentTarget.setAttribute('data-loaded', 'true')
}
onError={(e) => (e.currentTarget.src = fallbackImage)}
/>
</div>
</div>
<div className="mobile-only-visible-section w-full mt-6 mb-3">
{/* Vote */}
{/* <div
data-section="vote"
className={combineClasses(
'min-h-[55px] flex items-center mt-5.5 sm:mt-1.5',
)}
>
<VoteReaction
id={id}
countLike={countLike}
countDislike={countDislike}
disabled={disabledVote}
/>
</div> */}
<VoteProgressBar likes={countLike} dislikes={countDislike} />
</div>
</div>
</div>
</div>
);
};
|