Home Blog Portfolio LLMs DE 日本語

import React, { useState } from ‘react’;
import { Button } from ‘@/components/ui/button’;
import { Input } from ‘@/components/ui/input’;
import { Card, CardHeader, CardTitle, CardContent } from ‘@/components/ui/card’;
import { Separator } from ‘@/components/ui/separator’;

const TimeCalculator = () => {
const [input, setInput] = useState(‘’);
const [total, setTotal] = useState({ formatted: ‘’, decimal: ‘’ });

const parseTimeRange = (range) => {
const [start, end] = range.split(‘-‘).map(t => t.trim());

// Convert time to minutes
const getMinutes = (time) => {
  const [hours, minutes] = time.split(':').map(Number);
  return hours * 60 + minutes;
};

const startMinutes = getMinutes(start);
const endMinutes = getMinutes(end);

// Handle times past midnight
return endMinutes < startMinutes ? 
  (24 * 60 - startMinutes) + endMinutes :
  endMinutes - startMinutes;   };

const calculateTotal = () => {
try {
// Split input into lines and filter empty ones
const ranges = input.split(‘\n’).filter(line => line.trim());

  // Calculate total minutes
  const totalMinutes = ranges.reduce((sum, range) => {
    return sum + parseTimeRange(range);
  }, 0);

  // Convert to hours and minutes format
  const hours = Math.floor(totalMinutes / 60);
  const minutes = totalMinutes % 60;
  const formatted = `${hours}h${minutes ? ` ${minutes}m` : ''}`;
  
  // Convert to exact decimal hours (no rounding)
  const exactDecimal = totalMinutes / 60;
  
  setTotal({
    formatted,
    decimal: `${exactDecimal}h`
  });
} catch (error) {
  setTotal({ formatted: 'Invalid input format', decimal: '' });
}   };

return (
Time Calculator <div> <textarea value={input} onChange={(e) => setInput(e.target.value)} className="w-full h-32 p-2 border rounded" placeholder="Enter time ranges (one per line) Example: 12:05 - 15:40 18:50 - 19:30" /> </div> <Button onClick={calculateTotal} className="w-full" > Calculate Total </Button> {(total.formatted || total.decimal) && ( <div className="space-y-2 p-4 bg-slate-50 rounded-lg"> <div className="text-center font-semibold"> {total.formatted} </div> <div className="text-center font-semibold text-slate-600"> {total.decimal} </div> </div> )}
);
};

export default TimeCalculator;