Skip to content

Commit ed132d6

Browse files
NinePTHNinePTH
committed
Add: meta data and icon
1 parent cc8fa9f commit ed132d6

File tree

2 files changed

+142
-16
lines changed

2 files changed

+142
-16
lines changed

‎app/layout.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,17 @@ const kanit = Kanit({
1919
});
2020

2121
export const metadata: Metadata = {
22-
title: "Create Next App",
23-
description: "Generated by create next app",
22+
title: "Pet Trial",
23+
description: "Pet Trial is a platform for pet lovers to try out pet adoption or owning before committing to a long-term pet ownership.",
24+
icons: {
25+
icon: [
26+
{
27+
url: "/images/logo.svg",
28+
type: "image/svg+xml",
29+
},
30+
],
31+
shortcut: ["/images/logo.svg"],
32+
},
2433
};
2534

2635
export default function RootLayout({

‎app/return/page.tsx‎

Lines changed: 131 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,50 @@
22

33
import { useState, Suspense } from "react"
44
import React from "react"
5-
import { ArrowLeft, CreditCard, FileCheck, Calendar, Clipboard, Package, Check } from "lucide-react"
5+
import { ArrowLeft, CreditCard, FileCheck, Calendar, Clipboard, Package, Check, Upload, X } from "lucide-react"
66
import Link from "next/link"
77
import { useSearchParams } from "next/navigation"
88
import { FeedbackDialog } from "@/components/feedback-dialog"
99
import { Button } from "@/components/ui/button"
10+
import { Checkbox } from "@/components/ui/checkbox"
11+
import Image from "next/image"
1012

1113
function ReturnContent() {
1214
const searchParams = useSearchParams()
1315
const petName = searchParams.get('petName') || 'สัตว์เลี้ยง'
1416

1517
const [completed, setCompleted] = useState(false)
1618
const [isProcessing, setIsProcessing] = useState(false)
19+
const [checkItems, setCheckItems] = useState({
20+
health: false,
21+
injury: false,
22+
behavior: false,
23+
equipment: false
24+
})
25+
const [uploadedFile, setUploadedFile] = useState<File | null>(null)
26+
const [previewUrl, setPreviewUrl] = useState<string | null>(null)
27+
28+
const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
29+
const file = event.target.files?.[0]
30+
if (file) {
31+
setUploadedFile(file)
32+
// Create preview URL for images
33+
if (file.type.startsWith('image/')) {
34+
const url = URL.createObjectURL(file)
35+
setPreviewUrl(url)
36+
} else {
37+
setPreviewUrl(null)
38+
}
39+
}
40+
}
41+
42+
const removeFile = () => {
43+
setUploadedFile(null)
44+
if (previewUrl) {
45+
URL.revokeObjectURL(previewUrl)
46+
setPreviewUrl(null)
47+
}
48+
}
1749

1850
// Steps for the entire process (showing all steps with step 6 active)
1951
const steps = [
@@ -122,23 +154,108 @@ function ReturnContent() {
122154
<p className="text-blue-600 mb-4">กำลังตรวจสอบสภาพสัตว์เลี้ยงก่อนรับคืน</p>
123155

124156
<div className="bg-white p-4 rounded-lg shadow-sm mb-4">
157+
<div className="mb-6">
158+
<h4 className="font-medium text-gray-800 mb-2">อัพโหลดรูปภาพหรือเอกสารยืนยัน:</h4>
159+
<div className="flex items-center justify-center w-full">
160+
<label htmlFor="file-upload" className={`flex flex-col items-center justify-center w-full h-64 border-2 border-dashed rounded-lg cursor-pointer hover:bg-gray-50 ${uploadedFile ? 'border-green-300 bg-green-50' : 'border-gray-300'}`}>
161+
{!uploadedFile ? (
162+
<div className="flex flex-col items-center justify-center pt-5 pb-6">
163+
<Upload className="w-8 h-8 mb-3 text-gray-400" />
164+
<p className="mb-2 text-sm text-gray-500 px-2">
165+
<span className="font-semibold">คลิกเพื่ออัพโหลดไฟล์</span> หรือลากและวางที่นี่
166+
</p>
167+
<p className="text-xs text-gray-500">PNG, JPG, PDF ขนาดไม่เกิน 10MB</p>
168+
</div>
169+
) : (
170+
<div className="relative w-full h-full flex items-center justify-center">
171+
{previewUrl ? (
172+
<Image src={previewUrl} alt="Preview" className="max-h-full max-w-full object-contain rounded" />
173+
) : (
174+
<div className="flex items-center">
175+
<FileCheck className="w-6 h-6 text-green-500 mr-2" />
176+
<span className="text-green-500">{uploadedFile.name}</span>
177+
</div>
178+
)}
179+
<button
180+
onClick={(e) => {
181+
e.preventDefault()
182+
removeFile()
183+
}}
184+
className="absolute top-2 right-2 p-1 bg-red-100 rounded-full hover:bg-red-200"
185+
>
186+
<X className="w-4 h-4 text-red-500" />
187+
</button>
188+
</div>
189+
)}
190+
<input
191+
id="file-upload"
192+
type="file"
193+
className="hidden"
194+
accept="image/*,.pdf"
195+
onChange={handleFileUpload}
196+
/>
197+
</label>
198+
</div>
199+
{uploadedFile && (
200+
<div className="mt-2 text-sm text-gray-500">
201+
ไฟล์ที่อัพโหลด: {uploadedFile.name} ({(uploadedFile.size / (1024 * 1024)).toFixed(2)} MB)
202+
</div>
203+
)}
204+
</div>
205+
125206
<h4 className="font-medium text-gray-800 mb-2">รายการตรวจสอบ:</h4>
126-
<ul className="text-left text-sm space-y-2">
127-
<li className="flex items-center">
128-
<Check className="w-4 h-4 text-green-500 mr-2" />
129-
<span>สุขภาพสัตว์เลี้ยงปกติ</span>
207+
<ul className="text-left text-sm space-y-4">
208+
<li className="flex items-center space-x-3">
209+
<Checkbox
210+
id="health"
211+
checked={checkItems.health}
212+
onCheckedChange={(checked) =>
213+
setCheckItems(prev => ({ ...prev, health: checked === true }))
214+
}
215+
className="data-[state=checked]:bg-green-500 data-[state=checked]:border-green-500"
216+
/>
217+
<label htmlFor="health" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
218+
สุขภาพสัตว์เลี้ยงปกติ
219+
</label>
130220
</li>
131-
<li className="flex items-center">
132-
<Check className="w-4 h-4 text-green-500 mr-2" />
133-
<span>ไม่มีบาดแผลหรือการบาดเจ็บ</span>
221+
<li className="flex items-center space-x-3">
222+
<Checkbox
223+
id="injury"
224+
checked={checkItems.injury}
225+
onCheckedChange={(checked) =>
226+
setCheckItems(prev => ({ ...prev, injury: checked === true }))
227+
}
228+
className="data-[state=checked]:bg-green-500 data-[state=checked]:border-green-500"
229+
/>
230+
<label htmlFor="injury" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
231+
ไม่มีบาดแผลหรือการบาดเจ็บ
232+
</label>
134233
</li>
135-
<li className="flex items-center">
136-
<Check className="w-4 h-4 text-green-500 mr-2" />
137-
<span>พฤติกรรมปกติ</span>
234+
<li className="flex items-center space-x-3">
235+
<Checkbox
236+
id="behavior"
237+
checked={checkItems.behavior}
238+
onCheckedChange={(checked) =>
239+
setCheckItems(prev => ({ ...prev, behavior: checked === true }))
240+
}
241+
className="data-[state=checked]:bg-green-500 data-[state=checked]:border-green-500"
242+
/>
243+
<label htmlFor="behavior" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
244+
พฤติกรรมปกติ
245+
</label>
138246
</li>
139-
<li className="flex items-center">
140-
<Check className="w-4 h-4 text-green-500 mr-2" />
141-
<span>อุปกรณ์ครบถ้วน</span>
247+
<li className="flex items-center space-x-3">
248+
<Checkbox
249+
id="equipment"
250+
checked={checkItems.equipment}
251+
onCheckedChange={(checked) =>
252+
setCheckItems(prev => ({ ...prev, equipment: checked === true }))
253+
}
254+
className="data-[state=checked]:bg-green-500 data-[state=checked]:border-green-500 mb-2"
255+
/>
256+
<label htmlFor="equipment" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
257+
อุปกรณ์ครบถ้วน
258+
</label>
142259
</li>
143260
</ul>
144261
</div>

0 commit comments

Comments
 (0)