cheange inlien code to block code and using tamplet

src/Components/UI/Header.tsx

@@ -1,3 +1,7 @@
+import { Button } from "./Button";
+import { Input } from "./Input";
+import { Select } from "./Select";
+
 export default function Header({
   state,
   search,
@@ -75,50 +79,30 @@ export default function Header({
             display: "flex",
             gap: "0.5rem",
             flexWrap: "wrap",
-            alignItems: "center",
+            alignItems: "flex-end",
           }}
         >
-          <input
+          <Input
+            label="بحث"
             type="text"
-            placeholder="بحث   "
+            placeholder="ابحث..."
             value={search}
             onChange={(e) => {
               setSearch(e.target.value);
               setPage(1);
             }}
             dir="rtl"
-            style={{
-              width: 220,
-              height: 40,
-              padding: "0 0.75rem",
-              borderRadius: "var(--radius-lg)",
-              border: "1px solid var(--color-border)",
-              background: "var(--color-surface)",
-              fontSize: 13,
-              color: "var(--color-text-primary)",
-              outline: "none",
-              fontFamily: "var(--font-sans)",
-            }}
+            className="w-[220px]"
           />
           {isAudit ? (
-            <select
+            <Select
               value={module}
               onChange={(e) => {
                 setModule(e.target.value);
                 setPage(1);
               }}
               dir="rtl"
-              style={{
-                height: 40,
-                padding: "0 0.75rem",
-                borderRadius: "var(--radius-lg)",
-                border: "1px solid var(--color-border)",
-                background: "var(--color-surface)",
-                fontSize: 13,
-                color: "var(--color-text-secondary)",
-                outline: "none",
-                fontFamily: "var(--font-sans)",
-              }}
+              className="w-[180px]"
             >
               <option value="">كل الوحدات</option>
               {[
@@ -135,29 +119,9 @@ export default function Header({
                   {m}
                 </option>
               ))}
-            </select>
+            </Select>
           ) : (
-            <button
-              type="button"
-              onClick={onAdd}
-              style={{
-                height: 40,
-                padding: "0 1.125rem",
-                borderRadius: "var(--radius-lg)",
-                border: "none",
-                background: "var(--color-brand-600)",
-                fontSize: 13,
-                fontWeight: 700,
-                color: "#FFF",
-                cursor: "pointer",
-                display: "inline-flex",
-                alignItems: "center",
-                gap: 7,
-                fontFamily: "var(--font-sans)",
-                boxShadow: "0 1px 4px rgba(37,99,235,.35)",
-                whiteSpace: "nowrap",
-              }}
-            >
+            <Button onClick={onAdd}>
               <svg
                 width="14"
                 height="14"
@@ -170,7 +134,7 @@ export default function Header({
                 <line x1="5" y1="12" x2="19" y2="12" />
               </svg>
               إضافة {name}
-            </button>
+            </Button>
           )}
         </div>
       </div>