47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { ReminderInstance } from '../../types';
|
|
import { ClockIcon, getReminderIcon } from '../icons/Icons';
|
|
|
|
interface ReminderCardProps {
|
|
reminder: ReminderInstance;
|
|
}
|
|
|
|
const ReminderCard: React.FC<ReminderCardProps> = ({ reminder }) => {
|
|
const timeString = reminder.scheduledTime.toLocaleTimeString([], {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
});
|
|
const ReminderIcon = getReminderIcon(reminder.icon);
|
|
const titleId = `reminder-${reminder.id}-title`;
|
|
|
|
return (
|
|
<li
|
|
tabIndex={0}
|
|
aria-labelledby={titleId}
|
|
className='shadow-md rounded-lg p-4 flex flex-col justify-between transition-all duration-300 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-400 dark:focus:ring-offset-slate-900'
|
|
>
|
|
<div>
|
|
<div className='flex justify-between items-start'>
|
|
<div className='flex items-center space-x-3'>
|
|
<ReminderIcon className='w-7 h-7 text-sky-500 dark:text-sky-400 flex-shrink-0' />
|
|
<div>
|
|
<h4
|
|
id={titleId}
|
|
className='font-bold text-lg text-slate-800 dark:text-slate-100'
|
|
>
|
|
{reminder.title}
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className='flex items-center space-x-2 mt-4 font-semibold text-lg text-slate-500 dark:text-slate-400'>
|
|
<ClockIcon className='w-5 h-5' />
|
|
<span>{timeString}</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
);
|
|
};
|
|
|
|
export default ReminderCard;
|