Spaces:
Sleeping
Sleeping
File size: 4,985 Bytes
89b8989 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
import React from 'react';
import { useState } from 'react';
import { PlusIcon, MinusIcon } from '@heroicons/react/24/outline';
export default function WaterTracker() {
const [waterIntake, setWaterIntake] = useState(0);
const goal = 2000; // 每日目標 (ml)
const addWater = (amount) => {
setWaterIntake(prev => Math.min(prev + amount, 5000));
};
const removeWater = (amount) => {
setWaterIntake(prev => Math.max(prev - amount, 0));
};
const progress = (waterIntake / goal) * 100;
return (
<div className="space-y-6">
<div className="bg-white p-6 rounded-lg shadow">
<h2 className="text-2xl font-semibold text-gray-800 mb-6">今日飲水追蹤</h2>
{/* 進度顯示 */}
<div className="mb-8">
<div className="flex justify-between mb-2">
<span className="text-sm font-medium text-gray-700">目前進度</span>
<span className="text-sm font-medium text-gray-700">{waterIntake} / {goal} ml</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-4">
<div
className="bg-blue-600 h-4 rounded-full transition-all duration-300"
style={{ width: `${Math.min(progress, 100)}%` }}
></div>
</div>
</div>
{/* 快速添加按鈕 */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
<button
onClick={() => addWater(200)}
className="flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
>
<PlusIcon className="h-5 w-5 mr-2" />
200ml
</button>
<button
onClick={() => addWater(300)}
className="flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
>
<PlusIcon className="h-5 w-5 mr-2" />
300ml
</button>
<button
onClick={() => addWater(500)}
className="flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
>
<PlusIcon className="h-5 w-5 mr-2" />
500ml
</button>
<button
onClick={() => removeWater(200)}
className="flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700"
>
<MinusIcon className="h-5 w-5 mr-2" />
取消
</button>
</div>
{/* 自定義輸入 */}
<div className="flex gap-4">
<div className="flex-1">
<label htmlFor="custom-amount" className="block text-sm font-medium text-gray-700">
自定義添加量 (ml)
</label>
<input
type="number"
id="custom-amount"
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
placeholder="輸入毫升數"
min="0"
step="50"
/>
</div>
<button
className="mt-7 px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
>
添加
</button>
</div>
</div>
{/* 今日記錄 */}
<div className="bg-white p-6 rounded-lg shadow">
<h3 className="text-xl font-semibold text-gray-800 mb-4">今日記錄</h3>
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">時間</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">數量 (ml)</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">14:30</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">300</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12:00</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">500</td>
</tr>
<tr>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">09:15</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">200</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
);
}
|