| import { cn } from "@/lib/cn"; |
| import { |
| getWeekDays, |
| getWeekdayLetter, |
| getDayOfMonth, |
| isSameDayAs, |
| isToday, |
| getPreviousWeek, |
| getNextWeek, |
| } from "@/utils/dates"; |
| import { ChevronLeftIcon, ChevronRightIcon } from "@/components/ui"; |
|
|
| interface WeekStripProps { |
| selectedDate: Date; |
| onDateSelect: (date: Date) => void; |
| } |
|
|
| export function WeekStrip({ selectedDate, onDateSelect }: WeekStripProps) { |
| const weekDays = getWeekDays(selectedDate); |
|
|
| const handlePreviousWeek = () => { |
| onDateSelect(getPreviousWeek(selectedDate)); |
| }; |
|
|
| const handleNextWeek = () => { |
| onDateSelect(getNextWeek(selectedDate)); |
| }; |
|
|
| const handleTodayClick = () => { |
| onDateSelect(new Date()); |
| }; |
|
|
| const showTodayButton = !isToday(selectedDate); |
|
|
| return ( |
| <div className="mb-6 md:mb-8 overflow-hidden"> |
| <div |
| className={cn( |
| "bg-white/60 backdrop-blur-md", |
| "rounded-3xl border border-white/60 shadow-sm", |
| "px-1.5 py-1.5 bp-717:px-3 bp-717:py-3", |
| "overflow-hidden" |
| )} |
| > |
| <div className="flex items-center gap-1 bp-717:gap-2"> |
| <button |
| onClick={handlePreviousWeek} |
| className={cn( |
| "flex-none w-8 h-8 bp-717:w-10 bp-717:h-10", |
| "flex items-center justify-center rounded-xl", |
| "bg-white/40 hover:bg-white/80", |
| "text-content-secondary hover:text-content", |
| "transition-all duration-200", |
| "focus:outline-none focus:ring-2 focus:ring-primary-500/50" |
| )} |
| aria-label="Previous week" |
| > |
| <ChevronLeftIcon size={18} /> |
| </button> |
| |
| <div className="flex-1 no-scrollbar flex items-center justify-between gap-0.5 bp-717:gap-1"> |
| {weekDays.map((date, index) => { |
| const isSelected = isSameDayAs(date, selectedDate); |
| const isTodayDate = isToday(date); |
| |
| return ( |
| <button |
| key={index} |
| onClick={() => onDateSelect(date)} |
| className={cn( |
| "relative flex flex-col items-center justify-center", |
| "flex-1 min-w-[36px] h-[68px] bp-717:h-[74px] rounded-xl bp-717:rounded-2xl", |
| "transition-all duration-200", |
| isSelected |
| ? "bg-gradient-to-b from-[#667EEA] to-[#764BA2] text-white shadow-button-glow" |
| : "bg-white/40 hover:bg-white/80 text-content-secondary hover:text-content", |
| isTodayDate && !isSelected && "ring-2 ring-[#667EEA]/30" |
| )} |
| style={{ |
| animationDelay: `${index * 50}ms`, |
| }} |
| > |
| <span |
| className={cn( |
| "text-[10px] bp-717:text-xs font-medium uppercase tracking-wide", |
| isSelected ? "text-white/80" : "text-content-tertiary" |
| )} |
| > |
| {getWeekdayLetter(date)} |
| </span> |
| <span |
| className={cn( |
| "text-sm bp-717:text-lg font-semibold mt-0.5 leading-none", |
| isSelected ? "text-white" : "text-content" |
| )} |
| > |
| {getDayOfMonth(date)} |
| </span> |
| |
| {isTodayDate && ( |
| <span |
| className={cn( |
| "absolute bottom-1.5 left-1/2 -translate-x-1/2", |
| "w-1 h-1 rounded-full", |
| isSelected ? "bg-white" : "bg-[#667EEA]" |
| )} |
| /> |
| )} |
| </button> |
| ); |
| })} |
| </div> |
| |
| <button |
| onClick={handleNextWeek} |
| className={cn( |
| "flex-none w-8 h-8 bp-717:w-10 bp-717:h-10", |
| "flex items-center justify-center rounded-xl", |
| "bg-white/40 hover:bg-white/80", |
| "text-content-secondary hover:text-content", |
| "transition-all duration-200", |
| "focus:outline-none focus:ring-2 focus:ring-primary-500/50" |
| )} |
| aria-label="Next week" |
| > |
| <ChevronRightIcon size={18} /> |
| </button> |
| </div> |
| |
| {showTodayButton && ( |
| <div className="flex justify-center mt-2"> |
| <button |
| onClick={handleTodayClick} |
| className={cn( |
| "px-3 py-1 text-xs font-medium rounded-full", |
| "bg-primary-100 text-primary-700", |
| "hover:bg-primary-200 transition-colors" |
| )} |
| > |
| Go to Today |
| </button> |
| </div> |
| )} |
| </div> |
| </div> |
| ); |
| } |
|
|
