88379caee2
Implement ProductCard component with: - Renders product details (name, price, description) - "Ask about this" button disabled when out of stock - Shows "Currently unavailable" badge when out of stock - Calls onInquire callback when clicked Implement ServiceCard component with: - Renders service details (name, formatted duration, price) - Clickable button card that calls onSelect with service id - formatDuration helper for human-readable time format Both components include CSS modules with hover effects and proper styling. All 4 tests pass (2 for each component). Claude-Session: https://claude.ai/code/session_01NhxA4npAXAxmCDEJt6kxSH
26 lines
704 B
TypeScript
26 lines
704 B
TypeScript
import type { Service } from '../data/services'
|
|
import styles from './ServiceCard.module.css'
|
|
|
|
interface ServiceCardProps {
|
|
service: Service
|
|
onSelect?: (serviceId: string) => void
|
|
}
|
|
|
|
function formatDuration(minutes: number): string {
|
|
const hours = Math.floor(minutes / 60)
|
|
const rest = minutes % 60
|
|
return rest === 0 ? `${hours}h` : `${hours}h ${rest}m`
|
|
}
|
|
|
|
function ServiceCard({ service, onSelect }: ServiceCardProps) {
|
|
return (
|
|
<button type="button" className={styles.card} onClick={() => onSelect?.(service.id)}>
|
|
<h3>{service.name}</h3>
|
|
<p>{formatDuration(service.durationMinutes)}</p>
|
|
<p>From ${service.priceFrom}</p>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default ServiceCard
|