dishplanner/frontend-old/app/components/features/schedule/dayCard/DateBadge.tsx

import {DateTime} from "luxon";
import React from "react";
import classNames from "classnames";

interface Props {
    date: string
    className?: string;
}

const DateBadge = ({ className, date }: Props) => {
    const isToday = DateTime.fromISO(date).toFormat("yyyy-LL-dd") == DateTime.now().toFormat("yyyy-LL-dd")

    const textStyle = classNames("inline font-bold", {
        'text-accent-blue': isToday,
        'text-secondary': !isToday,
    }, className)

    return (
        <div className="flex-none w-20 text-center my-auto pb-3 px-3">
            <div className={classNames(textStyle, 'text-3xl')}>{DateTime.fromISO(date).toFormat("dd")}</div>
            <br/>
            <div className={classNames(textStyle, 'text-xl uppercase')}>{DateTime.fromISO(date).toFormat("LLL")}</div>
        </div>
    )
}

export default DateBadge