56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
import Card from "../UI/Card";
|
|
import CardHeader from "../UI/CardHeader";
|
|
import FormGroup from "../SettingForms/components/FormGroup";
|
|
import { useAlertHitContext } from "../../context/AlertHitContext";
|
|
import { useState } from "react";
|
|
|
|
const SessionCard = () => {
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const { dispatch } = useAlertHitContext();
|
|
|
|
return (
|
|
<Card className="p-4 col-span-5">
|
|
<CardHeader title={"Hit Search"} />
|
|
<div className="flex flex-col gap-4 px-2">
|
|
<label htmlFor="VRM" className="font-medium whitespace-nowrap md:w-1/2 text-left">
|
|
VRM (Min 2 letters)
|
|
</label>
|
|
<FormGroup>
|
|
<div className="flex flex-row justify-between md:w-full space-x-3">
|
|
<input
|
|
id="VRMSelect"
|
|
name="VRMSelect"
|
|
type="text"
|
|
className="p-2 border border-gray-400 rounded-lg w-full max-w-[70%] focus:border-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-400/30"
|
|
placeholder="Enter VRM"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
|
|
<button
|
|
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-[30%] mx-3"
|
|
onClick={() => dispatch({ type: "SEARCH", payload: searchTerm })}
|
|
disabled={searchTerm.trim().length < 2}
|
|
>
|
|
Search Hit list
|
|
</button>
|
|
</div>
|
|
</FormGroup>
|
|
{searchTerm && (
|
|
<button
|
|
className="bg-gray-300 text-gray-900 px-4 py-2 rounded hover:bg-gray-700 transition w-[30%] "
|
|
onClick={() => {
|
|
setSearchTerm("");
|
|
dispatch({ type: "SEARCH", payload: "" });
|
|
}}
|
|
>
|
|
Clear Search
|
|
</button>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default SessionCard;
|