TobaOjo/BayIQ-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Enhanced responsiveness and layout adjustments across various components

Browse Source
This commit is contained in:
Toba Ojo
2025-12-09 14:07:51 +00:00
parent e6f4131c1e
commit 632962aeaf
15 changed files with 187 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/features/cameras/components/CameraGrid.tsx
View File

@@ -12,7 +12,7 @@ const CameraGrid = () => {
return (
<>
<div className="grid grid-cols-1 md:grid-cols-3 md:gap-4 p-4 h-screen max-h-screen">
<div className="grid grid-cols-1 md:grid-cols-3 md:gap-4 p-4">
<div className="col-span-2 flex flex-col gap-4">
<div className="">
<VideoFeedGridPainter />

2
src/features/cameras/components/CameraSettings/CameraSettings.tsx
View File

@@ -19,7 +19,7 @@ const CameraSettings = ({
setIsResetModalOpen,
}: CameraSettingsProps) => {
return (
<Card className="p-4 w-full h-full max-h-screen">
<Card className="p-4 w-full h-full ">
<Tabs
selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
className="react-tabs"

13
src/features/cameras/components/CameraSettings/RegionSelector.tsx
View File

@@ -137,7 +137,7 @@ const RegionSelector = ({
};
return (
<div className="flex flex-col gap-4 max-h-[50%]">
<div className="flex flex-col gap-4 h-full overflow-y-auto mt-[5%]">
<div className="flex flex-col md:flex-row gap-3">
<div className="p-2 border border-gray-600 rounded-lg flex flex-col h-[10%] w-full">
<h2 className="text-2xl mb-2">Tools</h2>
@@ -247,22 +247,25 @@ const RegionSelector = ({
<div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
<h2 className="text-2xl mb-2">Actions</h2>
<div className="flex flex-col md:flex-row mx-auto gap-4 justify-center">
<div className="flex flex-col gap-4 justify-center">
<div className="grid grid-cols-2 gap-2">
<button
onClick={handleSaveclick}
className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full md:w-full hover:bg-blue-700 hover:cursor-pointer"
className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full hover:bg-blue-700 hover:cursor-pointer"
>
Save Region
</button>
<button
onClick={handleResetRegion}
className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-full hover:bg-red-700 hover:cursor-pointer"
className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full hover:bg-red-700 hover:cursor-pointer"
>
Reset Region
</button>
</div>
<button
onClick={openResetModal}
className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-full hover:bg-red-700 hover:cursor-pointer"
className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full hover:bg-red-700 hover:cursor-pointer"
>
Reset All
</button>

2
src/features/cameras/components/CameraSettings/cameraControls/CameraControls.tsx
View File

@@ -29,7 +29,7 @@ const CameraControls = ({ cameraFeedID }: CameraControlsProps) => {
};
return (
<div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
<div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full mt-[5%]">
<h2 className="text-2xl mb-4">Camera {cameraFeedID}</h2>
<div className="w-[70%] ">
<label htmlFor="zoom">Zoom {zoomLevel} </label>

32
src/features/cameras/components/PlatePatch/SightingEntryTable.tsx
View File

@@ -13,7 +13,8 @@ const SightingEntryTable = () => {
if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
return (
<div className="border border-gray-600 rounded-lg m-2">
<div className="overflow-y-auto ">
{/* Desktop Table */}
<div className="hidden md:block overflow-y-auto">
<table className="w-full text-left text-sm">
<thead className="bg-gray-700/50 text-gray-200 sticky top-0">
<tr>
@@ -37,6 +38,35 @@ const SightingEntryTable = () => {
</tbody>
</table>
</div>
{/* Mobile Cards */}
<div className="md:hidden overflow-y-auto space-y-3 p-3">
{readings?.map((reading: DecodeReading) => (
<div
key={reading?.id}
className="bg-gray-800/30 rounded-lg p-4 space-y-2 border border-gray-700 hover:border-gray-600 transition-colors"
>
<div className="flex justify-between items-start">
<span className="font-mono font-semibold text-blue-400 text-xl">{reading?.vrm}</span>
<span className="text-gray-400 text-sm">Bay {reading?.laneID}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-gray-400">Seen Count:</span>
<span className="text-gray-300 font-semibold">{reading?.seenCount}</span>
</div>
<div className="pt-2 border-t border-gray-700 space-y-1 text-xs">
<div className="flex justify-between">
<span className="text-gray-500">First Seen:</span>
<span className="text-gray-400">{reading?.firstSeenTimeHumane}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-500">Last Seen:</span>
<span className="text-gray-400">{reading?.lastSeenTimeHumane}</span>
</div>
</div>
</div>
))}
</div>
</div>
);
};

34
src/features/cameras/components/PlatePatch/SightingExitTable.tsx
View File

@@ -12,8 +12,9 @@ const SightingExitTable = () => {
if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
return (
<div className="border border-gray-600 rounded-lg overflow-hidden m-2">
<div className="overflow-y-auto ">
<div className="border border-gray-600 rounded-lg m-2">
{/* Desktop Table */}
<div className="hidden md:block overflow-y-auto">
<table className="w-full text-left text-sm">
<thead className="bg-gray-700/50 text-gray-200 sticky top-0">
<tr>
@@ -37,6 +38,35 @@ const SightingExitTable = () => {
</tbody>
</table>
</div>
{/* Mobile Cards */}
<div className="md:hidden overflow-y-auto space-y-3 p-3">
{readings?.map((reading: DecodeReading) => (
<div
key={reading?.id}
className="bg-gray-800/30 rounded-lg p-4 space-y-2 border border-gray-700 hover:border-gray-600 transition-colors"
>
<div className="flex justify-between items-start">
<span className="font-mono font-semibold text-red-400 text-xl">{reading?.vrm}</span>
<span className="text-gray-400 text-sm">Bay {reading?.laneID}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-gray-400">Seen Count:</span>
<span className="text-gray-300 font-semibold">{reading?.seenCount}</span>
</div>
<div className="pt-2 border-t border-gray-700 space-y-1 text-xs">
<div className="flex justify-between">
<span className="text-gray-500">First Seen:</span>
<span className="text-gray-400">{reading?.firstSeenTimeHumane}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-500">Last Seen:</span>
<span className="text-gray-400">{reading?.lastSeenTimeHumane}</span>
</div>
</div>
</div>
))}
</div>
</div>
);
};

2
src/features/dashboard/components/statusGridItem/StatusGridItem.tsx
View File

@@ -21,7 +21,7 @@ const StatusGridItem = ({ title, statusCategory }: StatusGridItemProps) => {
return (
<>
<div
className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241] hover:cursor-pointer"
className="flex flex-col border border-gray-600 p-4 rounded-lg hover:bg-[#233241] hover:cursor-pointer"
onClick={() => setIsOpen(true)}
>
<h3 className="text-lg flex flex-row items-center">

6
src/features/dashboard/components/systemHealth/SystemHealth.tsx
View File

@@ -39,11 +39,11 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
}
return (
<div className="relative h-100 md:h-75 overflow-y-auto flex flex-col gap-4">
<div className="p-2 border-b border-gray-600 grid grid-cols-2 justify-between">
<div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
<div className="p-2 border-b border-gray-600 grid grid-cols-1 md:grid-cols-2 gap-2 justify-between">
<div className="flex flex-col border border-gray-600 p-4 rounded-lg hover:bg-[#233241]">
<h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
</div>
<div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
<div className="flex flex-col border border-gray-600 p-4 rounded-lg hover:bg-[#233241]">
<h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{uptime}</span>
</div>
</div>

2
src/features/output/components/BearerTypeFields.tsx
View File

@@ -4,7 +4,7 @@ import type { FormTypes } from "../../../types/types";
const BearerTypeFields = () => {
useFormikContext<FormTypes>();
return (
<div className="flex flex-row justify-between">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="format" className="text-xl">
Format
</label>

2
src/features/output/components/ChannelCard.tsx
View File

@@ -10,7 +10,7 @@ const ChannelCard = () => {
const { bearerQuery } = useGetBearerConfig(values?.format?.toLowerCase() || "json");
const outputData = bearerQuery?.data;
return (
<Card className="p-4 h-150 md:h-full">
<Card className="p-4 h-full">
<CardHeader title={`Channel (${values?.format})`} />
<ChannelFields
errors={errors}

41
src/features/output/components/ChannelFields.tsx
View File

@@ -52,7 +52,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
<div className="flex flex-col gap-4 p-4">
{values.format.toLowerCase() !== "ftp" ? (
<>
<div className="flex flex-row justify-between">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="backoffice" className="block mb-2 font-medium">
Back Office URL
</label>
@@ -64,7 +64,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="username" className="block mb-2 font-medium">
Username
</label>
@@ -76,7 +76,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="password">Password</label>
<Field
name={"password"}
@@ -86,7 +86,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
<Field
name={"readTimeoutSeconds"}
@@ -96,7 +96,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
<Field
name={"connectTimeoutSeconds"}
@@ -105,7 +105,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="overviewQuality">Overview quality and scale</label>
<Field
name={"overviewQuality"}
@@ -118,7 +118,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
<option value={"LOW"}>Low</option>
</Field>
</div>
<div className="flex flex-row justify-between">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="cropSizeFactor">Crop Size Factor</label>
<Field
name={"cropSizeFactor"}
@@ -138,7 +138,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
<h2 className="font-bold">{values.format} Constants</h2>
</div>
<div className="flex flex-row justify-between">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="SCID">Source ID / Camera ID</label>
<Field
name={"SCID"}
@@ -150,7 +150,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
} rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="timestampSource">Timestamp Source</label>
<Field
name={"timestampSource"}
@@ -162,7 +162,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
<option value={"LOCAL"}>Local</option>
</Field>
</div>
<div className="flex flex-row justify-between">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="GPSFormat">GPS Format</label>
<Field
name={"GPSFormat"}
@@ -182,7 +182,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
<div className="border-b border-gray-500 my-3">
<h2 className="font-bold">{values.format} Constants</h2>
</div>
<div className="flex flex-row justify-between">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="FFID">Feed ID / Force ID</label>
<Field
name={"FFID"}
@@ -194,7 +194,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
} rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="SCID">Source ID / Camera ID</label>
<Field
name={"SCID"}
@@ -206,7 +206,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
} rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="timestampSource">Timestamp Source</label>
<Field
name={"timestampSource"}
@@ -218,7 +218,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
<option value={"LOCAL"}>Local</option>
</Field>
</div>
<div className="flex flex-row justify-between">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="GPSFormat">GPS Format</label>
<Field
name={"GPSFormat"}
@@ -235,7 +235,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
<div className="border-b border-gray-500 my-3">
<h2 className="font-bold">{values.format} Lane ID Config</h2>
</div>
<div className="flex flex-row justify-between">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="LID1">Lane ID 1 (Camera A)</label>
<Field
name={"LID1"}
@@ -247,7 +247,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
} rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="LID2">Lane ID 2 (Camera B)</label>
<Field
name={"LID2"}
@@ -272,7 +272,10 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
{values?.customFields?.map((_, index) => {
// if (!field.value) return null;
return (
<div key={index} className="flex flex-row justify-between items-center mb-4 gap-2">
<div
key={index}
className="flex flex-col md:flex-row space-y-4 md:space-y-0 justify-between items-center mb-4 gap-2"
>
<Field
name={`customFields.${index}.label`}
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
@@ -287,10 +290,11 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
</div>
);
})}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<button
type="button"
onClick={() => arrayHelpers.push({ label: "", value: "" })}
className={`mr-2 border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer ${values?.customFields && values?.customFields?.length >= 6 ? "opacity-50 cursor-not-allowed" : ""}`}
className={`border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer ${values?.customFields && values?.customFields?.length >= 6 ? "opacity-50 cursor-not-allowed" : ""}`}
disabled={values?.customFields && values?.customFields?.length >= 6}
>
Add Custom Field
@@ -304,6 +308,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
Remove Custom Field
</button>
)}
</div>
</>
)}
</FieldArray>

4
src/features/output/components/OSDFields.tsx
View File

@@ -34,7 +34,7 @@ const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => {
<OSDFieldToggle key={key} value={key} label={key.replace("include", "Include ")} />
))}
</div>
<div className="flex flex-row justify-between">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="overlayPosition">Overlay Position</label>
<Field
as="select"
@@ -45,7 +45,7 @@ const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => {
<option value="Bottom">Bottom</option>
</Field>
</div>
<div className="flex flex-row justify-between">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="OSDTimestampFormat">OSD Timestamp Format</label>
<Field
as="select"

23
src/features/settings/components/SystemConfig.tsx
View File

@@ -65,8 +65,8 @@ const SystemConfig = () => {
return (
<Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
{({ values }) => (
<Form>
<div className="flex flex-row justify-between items-center mb-4">
<Form className="flex flex-col space-y-4">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="deviceName">Device Name</label>
<Field
name="deviceName"
@@ -76,7 +76,7 @@ const SystemConfig = () => {
autoComplete="off"
/>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="timeZone">Timezone</label>
<Field
name="timeZone"
@@ -91,7 +91,7 @@ const SystemConfig = () => {
))}
</Field>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="timeSource">Time Source</label>
<Field
name="timeSource"
@@ -106,8 +106,7 @@ const SystemConfig = () => {
))}
</Field>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="SNTPServer">SNTP Server</label>
<Field
name="SNTPServer"
@@ -117,7 +116,7 @@ const SystemConfig = () => {
autoComplete="off"
/>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="SNTPInterval">SNTP Interval</label>
<Field
name="SNTPInterval"
@@ -127,7 +126,7 @@ const SystemConfig = () => {
autoComplete="off"
/>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="subnetMask">Subnet Mask</label>
<Field
name="subnetMask"
@@ -137,7 +136,7 @@ const SystemConfig = () => {
autoComplete="off"
/>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="ipAddress">IP Address</label>
<Field
name="ipAddress"
@@ -147,7 +146,7 @@ const SystemConfig = () => {
autoComplete="off"
/>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="gateway">Gateway</label>
<Field
name="gateway"
@@ -157,7 +156,7 @@ const SystemConfig = () => {
autoComplete="off"
/>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="primaryServer">Primary DNS Server</label>
<Field
name="primaryServer"
@@ -167,7 +166,7 @@ const SystemConfig = () => {
autoComplete="off"
/>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<div className="flex flex-col md:flex-row space-y-4 justify-between">
<label htmlFor="secondaryServer">Secondary DNS Server</label>
<Field
name="secondaryServer"

41
src/ui/Header.tsx
View File

@@ -1,15 +1,29 @@
import { useState } from "react";
import { Link } from "@tanstack/react-router";
import Logo from "/MAV.svg";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBars } from "@fortawesome/free-solid-svg-icons";
const Header = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const toggleMenu = () => {
setIsMenuOpen(!isMenuOpen);
};
return (
<header className="bg-[#253445] p-4 flex border-b border-gray-500 justify-between items-center">
<nav className="bg-[#253445] p-4 flex border-b border-gray-500 justify-between items-center md:flex-row flex-col">
<div className="flex flex-row justify-between w-full items-center">
<div className="w-28">
<Link to={"/"}>
<Link to={"/"} onClick={() => setIsMenuOpen(false)}>
<img src={Logo} alt="Logo" width={150} height={150} />
</Link>
</div>
<div className="flex gap-4 text-lg items-center">
<div className="hover:cursor-pointer md:hidden" onClick={toggleMenu}>
<FontAwesomeIcon icon={faBars} />
</div>
</div>
<div className="md:flex hidden gap-4 text-lg items-center">
<Link
to="/"
className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
@@ -37,7 +51,26 @@ const Header = () => {
Settings
</Link>
</div>
</header>
{/* mobile menu */}
{isMenuOpen && (
<div className="md:hidden flex flex-col w-full mt-4 gap-4 text-lg items-end">
<Link to="/" className="" onClick={toggleMenu}>
{/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
Dashboard
</Link>
<Link to="/baywatch" className="" onClick={toggleMenu}>
{/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
Cameras
</Link>
<Link to="/output" className="" onClick={toggleMenu}>
Output
</Link>
<Link to="/settings" className="" onClick={toggleMenu}>
Settings
</Link>
</div>
)}
</nav>
);
};

8
src/ui/ModalComponent.tsx
View File

@@ -23,6 +23,14 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) =
},
}}
>
<div className="flex justify-end">
<button
onClick={close}
className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg mb-4"
>
Close
</button>
</div>
{children}
</Modal>
);