wind-explorer/ecoconnect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update HBFormPage css

Browse Source
This commit is contained in:
ZacTohZY
2024-08-06 02:46:52 +08:00
parent cedc506c4b
commit 3a0622e3ca
2 changed files with 103 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/components/InsertImage.tsx
View File

@@ -1,10 +1,11 @@
import React, { useState } from 'react'; import React, { useState } from "react";
interface InsertImageProps { interface InsertImageProps {
label: string;
onImageSelected: (file: File | null) => void; onImageSelected: (file: File | null) => void;
} }
const InsertImage: React.FC<InsertImageProps> = ({ onImageSelected }) => { const InsertImage: React.FC<InsertImageProps> = ({ label, onImageSelected }) => {
const [selectedFile, setSelectedFile] = useState<File | null>(null); const [selectedFile, setSelectedFile] = useState<File | null>(null);
const [previewImage, setPreviewImage] = useState<string>(''); const [previewImage, setPreviewImage] = useState<string>('');
@@ -19,8 +20,9 @@ const InsertImage: React.FC<InsertImageProps> = ({ onImageSelected }) => {
return ( return (
<div <div
className="flex flex-col items-center p-5 bg-white dark:bg-zinc-800 rounded-md" className="flex flex-col items-center p-5 bg-white dark:bg-zinc-800 rounded-md"
style={{ width: 400, height: 500 }} style={{ width: 350, height: 530 }}
> >
<label className="mb-2 font-bold text-xl">{label}</label>
<input <input
type="file" type="file"
onChange={handleImageSelect} onChange={handleImageSelect}

16
client/src/pages/HBFormPage.tsx
View File

@@ -148,13 +148,14 @@ export default function HBFormPage() {
}; };
return ( return (
<div className="w-full h-full"> <div className="w-full h-full pb-12">
<section className="w-8/12 mx-auto p-6 bg-red-100 dark:bg-red-950 border border-primary-100 rounded-2xl h-600px"> <div className="w-8/12 mx-auto p-6 bg-red-100 dark:bg-red-950 border border-primary-100 rounded-2xl h-600px">
<div className="py-2"> <div className="py-2">
<Button variant="light" onPress={() => navigate(-1)}> <Button variant="light" onPress={() => navigate(-1)}>
<ArrowUTurnLeftIcon /> <ArrowUTurnLeftIcon />
</Button> </Button>
</div> </div>
<div className="flex-grow overflow-y-auto">
<Formik <Formik
initialValues={initialValues} initialValues={initialValues}
validationSchema={validationSchema} validationSchema={validationSchema}
@@ -179,8 +180,8 @@ export default function HBFormPage() {
return ( return (
<Form> <Form>
<div className="flex flex-col gap-5"> <div className="flex flex-col gap-5">
<div className="flex flex-row gap-10"> <div className="flex flex-row gap-5">
<div className="flex flex-col gap-5 p-1"> <div className="flex flex-col gap-5 p-2 min-w-[180px] ">
<NextUIFormikInput <NextUIFormikInput
label="Electrical Bill" label="Electrical Bill"
name="electricalBill" name="electricalBill"
@@ -222,14 +223,16 @@ export default function HBFormPage() {
readOnly={true} readOnly={true}
/> />
</div> </div>
<div className="flex flex-row max-w-xs h-[500px] gap-10"> <div className="flex flex-row gap-10">
<InsertImage <InsertImage
label="Electrical Bill Image"
onImageSelected={(file) => { onImageSelected={(file) => {
setFieldValue("ebPicture", file); setFieldValue("ebPicture", file);
handleImageSelection("ebPicture", file); handleImageSelection("ebPicture", file);
}} }}
/> />
<InsertImage <InsertImage
label="Water Bill Image"
onImageSelected={(file) => { onImageSelected={(file) => {
setFieldValue("wbPicture", file); setFieldValue("wbPicture", file);
handleImageSelection("wbPicture", file); handleImageSelection("wbPicture", file);
@@ -252,7 +255,8 @@ export default function HBFormPage() {
); );
}} }}
</Formik> </Formik>
</section> </div>
</div>
</div> </div>
); );
} }