73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import * as React from 'react';
|
||
|
|
import { Timer } from 'lucide-react';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
|
||
|
|
interface DurationPickerProps {
|
||
|
|
duration: number; // Duration in minutes
|
||
|
|
setDuration: (duration: number) => void;
|
||
|
|
label?: string;
|
||
|
|
isDark?: boolean;
|
||
|
|
options?: number[]; // Optional custom duration options
|
||
|
|
}
|
||
|
|
|
||
|
|
export function DurationPicker({
|
||
|
|
duration,
|
||
|
|
setDuration,
|
||
|
|
label,
|
||
|
|
isDark = false,
|
||
|
|
options = [15, 30, 45, 60, 120]
|
||
|
|
}: DurationPickerProps) {
|
||
|
|
// Format duration display
|
||
|
|
const formatDuration = (minutes: number) => {
|
||
|
|
if (minutes < 60) {
|
||
|
|
return `${minutes}m`;
|
||
|
|
}
|
||
|
|
const hours = Math.floor(minutes / 60);
|
||
|
|
const mins = minutes % 60;
|
||
|
|
return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
|
||
|
|
};
|
||
|
|
|
||
|
|
const displayDuration = duration ? formatDuration(duration) : 'Select duration';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-3">
|
||
|
|
{label && (
|
||
|
|
<label className={cn(
|
||
|
|
"text-sm font-semibold",
|
||
|
|
isDark ? "text-gray-300" : "text-gray-700"
|
||
|
|
)}>
|
||
|
|
{label}
|
||
|
|
</label>
|
||
|
|
)}
|
||
|
|
<div className="flex flex-wrap gap-2">
|
||
|
|
{options.map((option) => {
|
||
|
|
const isSelected = duration === option;
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
key={option}
|
||
|
|
type="button"
|
||
|
|
onClick={() => setDuration(option)}
|
||
|
|
className={cn(
|
||
|
|
"px-4 py-3 rounded-lg text-sm font-medium transition-all min-w-[80px]",
|
||
|
|
isSelected
|
||
|
|
? isDark
|
||
|
|
? "bg-blue-600 text-white shadow-md"
|
||
|
|
: "bg-blue-600 text-white shadow-md"
|
||
|
|
: isDark
|
||
|
|
? "bg-gray-800 text-gray-300 hover:bg-gray-700 border border-gray-600"
|
||
|
|
: "bg-white text-gray-700 hover:bg-gray-50 border border-gray-200"
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{formatDuration(option)}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|