fa9f78b46e
* feat: sticky calendar days * feat: partial height borders for day labels * feat: make calendar header actually sticky * fix: remove unneeded gap * refactor: add preston as co-author Co-authored-by: Preston-Cook <preston.l.cook@gmail.com> * fix: z-index issues with export sub-buttons --------- Co-authored-by: Preston-Cook <preston.l.cook@gmail.com> Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
30 lines
783 B
TypeScript
30 lines
783 B
TypeScript
import React from 'react';
|
|
|
|
interface Props {
|
|
row: number;
|
|
col: number;
|
|
}
|
|
|
|
/**
|
|
* Component representing each 1 hour time block of a calendar
|
|
*
|
|
* @param row - The row of the cell
|
|
* @param col - The column of the cell
|
|
* @returns The CalendarCell component
|
|
*/
|
|
function CalendarCell({ row, col }: Props): JSX.Element {
|
|
return (
|
|
<div
|
|
className='h-full w-full flex items-center border-b border-r border-gray-300'
|
|
style={{
|
|
gridColumn: col + 3, // start in the 3rd 1-index column
|
|
gridRow: `${2 * row + 3} / ${2 * row + 5}`, // Span 2 rows, skip 2 header rows
|
|
}}
|
|
>
|
|
<div className='h-0 w-full border-t border-gray-300/25' />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CalendarCell;
|