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 {
label: string;
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 [previewImage, setPreviewImage] = useState<string>('');
@@ -19,8 +20,9 @@ const InsertImage: React.FC<InsertImageProps> = ({ onImageSelected }) => {
return (
<div
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
type="file"
onChange={handleImageSelect}

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

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