2025-exam-order-system/app.js at main · hexschool/2025-exam-order-system · GitHub

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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
// 餐點資料
const menuData = [
	{
		id: 1,
		name: "經典漢堡",
		price: 120,
		image:
			"https://images.unsplash.com/photo-1568901346375-23c9450c58cd?w=300&h=200&fit=crop",
	},
	{
		id: 2,
		name: "起司披薩",
		price: 280,
		image:
			"https://images.unsplash.com/photo-1513104890138-7c749659a591?w=300&h=200&fit=crop",
	},
	{
		id: 3,
		name: "炸雞套餐",
		price: 180,
		image:
			"https://images.unsplash.com/photo-1626082927389-6cd097cdc6ec?w=300&h=200&fit=crop",
	},
	{
		id: 4,
		name: "鮮蝦義大利麵",
		price: 220,
		image:
			"https://images.unsplash.com/photo-1621996346565-e3dbc646d9a9?w=300&h=200&fit=crop",
	},
	{
		id: 5,
		name: "凱薩沙拉",
		price: 150,
		image:
			"https://images.unsplash.com/photo-1546793665-c74683f339c1?w=300&h=200&fit=crop",
	},
	{
		id: 6,
		name: "珍珠奶茶",
		price: 65,
		image:
			"https://images.unsplash.com/photo-1525385133512-2f3bdd039054?w=300&h=200&fit=crop",
	},
];

function App() {
	return (
		<div className="container mx-auto max-w-6xl px-4">
			<h1 className="text-4xl font-bold text-center mb-8 text-amber-800">
				線上點餐系統
			</h1>

			<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
				{/* 左側：餐點列表 */}
				<div className="lg:col-span-2">
					<h2 className="text-2xl font-semibold mb-4 text-gray-800">菜單</h2>
					<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
						<div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition">
							<img
								src={
									"https://images.unsplash.com/photo-1568901346375-23c9450c58cd?w=300&h=200&fit=crop"
								}
								alt={"餐點名稱"}
								className="w-full h-48 object-cover"
							/>
							<div className="p-4">
								<h3 className="text-xl font-semibold mb-2">餐點名稱</h3>
								<div className="flex justify-between items-center">
									<span className="text-2xl font-bold text-amber-600">
										$120
									</span>
									<button
										onClick={() => {}}
										className="px-4 py-2 bg-amber-500 text-white rounded-lg hover:bg-amber-600 transition"
									>
										加入購物車
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>

				{/* 右側：購物車 */}
				<div className="lg:col-span-1">
					<div className="bg-white rounded-lg shadow-lg p-6 sticky top-8">
						<h2 className="text-2xl font-semibold mb-4 text-gray-800">
							購物車
						</h2>

						{/* 購物車項目列表 */}
						<p className="text-center text-gray-400 py-8">購物車是空的</p>
						<div className="space-y-3 mb-4 max-h-96 overflow-y-auto">
							<div className="bg-gray-50 p-3 rounded-lg">
								<div className="flex justify-between items-start mb-2">
									<h3 className="font-semibold">餐點名稱</h3>
									<button
										onClick={() => {}}
										className="text-red-500 hover:text-red-700"
									>
										✕
									</button>
								</div>
								<div className="flex justify-between items-center">
									<div className="flex items-center gap-2">
										<button
											onClick={() => {}}
											className="w-7 h-7 bg-gray-300 rounded hover:bg-gray-400 transition"
										>
											-
										</button>
										<span className="w-8 text-center font-semibold">1</span>
										<button
											onClick={() => {}}
											className="w-7 h-7 bg-amber-500 text-white rounded hover:bg-amber-600 transition"
										>
											+
										</button>
									</div>
									<span className="font-bold text-amber-600">$120</span>
								</div>
							</div>
						</div>

						{/* 總金額和清空按鈕 */}
						<div className="border-t pt-4">
							<div className="flex justify-between items-center mb-4">
								<span className="text-xl font-semibold">總金額：</span>
								<span className="text-2xl font-bold text-amber-600">$0</span>
							</div>
							<button
								onClick={() => {}}
								className="w-full py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition disabled:bg-gray-300 disabled:cursor-not-allowed"
							>
								清空購物車
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	);
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);