Task : #216126 Content search API integration

NIUANULP · Apr 3, 2024 · 5069418 · 5069418
1 parent 4965ac3
commit 5069418
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 302 deletions.
diff --git a/packages/nulp_elite/src/components/search.js b/packages/nulp_elite/src/components/search.js
@@ -1,14 +1,48 @@
-import React from "react";
-import { Button } from '@mui/base/Button';
-import Box from '@mui/material/Box';
+import React, { useState } from "react";
+import { Button } from "@mui/base/Button";
+import Box from "@mui/material/Box";
 
+function Search({ onSearch }) {
+  const [query, setQuery] = useState("");
+
+  const handleSearchClick = () => {
+    onSearch(query);
+  };
 
-export default function Search({  }) {
-
   return (
-      <Box style={{display: 'flex', alignItems: 'center', marginBottom: '1rem' }}>
-        <input type="text" placeholder="Search..." style={{ width:'100%',flex: 1, marginRight: '0.5rem', padding: '0.5rem', borderRadius: '4px', border: '1px solid #CACACA' }} />
-        <Button style={{ padding:'11px 9px', borderRadius: '4px', backgroundColor: '#004367', color: 'white', border: '1px', cursor: 'pointer' ,fontSize:'12px'}}>Search</Button>
-      </Box>
+    <Box
+      style={{ display: "flex", alignItems: "center", marginBottom: "1rem" }}
+    >
+      <input
+        type="text"
+        // value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        placeholder="Search..."
+        style={{
+          width: "100%",
+          flex: 1,
+          marginRight: "0.5rem",
+          padding: "0.5rem",
+          borderRadius: "4px",
+          border: "1px solid #CACACA",
+        }}
+      />
+      <Button
+        onClick={handleSearchClick}
+        style={{
+          padding: "11px 9px",
+          borderRadius: "4px",
+          backgroundColor: "#004367",
+          color: "white",
+          border: "1px",
+          cursor: "pointer",
+          fontSize: "12px",
+        }}
+      >
+        Search
+      </Button>
+    </Box>
   );
 }
+
+export default Search;