component seprator

app/components/Input.tsx

@@ -1,30 +1,31 @@
+import { cn } from "@/app/lib/cn";
 import { SearchNormal } from "iconsax-reactjs";
-import { forwardRef } from "react";
+import { FC } from "react";
 
 export type InputVariant = "primary" | "search";
 
 type Props = {
   variant?: InputVariant;
+  className?: string;
 } & React.InputHTMLAttributes<HTMLInputElement>;
 
-const Input = forwardRef<HTMLInputElement, Props>(({ variant = "search", className, type, ...props }, ref) => {
-  const isSearch = variant === "search";
+const Input: FC<Props> = (props) => {
+  const { variant = "primary", className, ...rest } = props;
 
   return (
     <div className="relative w-full" dir="rtl">
-      {isSearch && <SearchNormal aria-hidden="true" className="pointer-events-none absolute top-1/2 right-5 -translate-y-1/2 text-primary" color="currentColor" size={24} />}
+      {variant === "search" && <SearchNormal aria-hidden="true" className="pointer-events-none absolute top-1/2 right-5 -translate-y-1/2 text-primary" color="currentColor" size={24} />}
       <input
-        ref={ref}
-        type={type ?? (isSearch ? "search" : "text")}
-        className={`h-12 w-full rounded-2xl border border-secondary bg-white px-5 text-right text-sm text-[#3A4147] placeholder:text-[#D7E0E8] transition-colors focus:border-primary ${
-          isSearch ? "pr-13" : ""
-        } ${className ?? ""}`}
+        type={variant === "search" ? "search" : "text"}
+        className={cn(
+          "h-12 w-full rounded-2xl border border-secondary bg-white px-5 text-right text-sm text-[#3A4147] placeholder:text-[#D7E0E8] transition-colors focus:border-primary",
+          variant === "search" && "pr-13",
+          className,
+        )}
         {...props}
       />
     </div>
   );
-});
-
-Input.displayName = "Input";
+};
 
 export default Input;

app/components/Seprator.tsx

@@ -0,0 +1,12 @@
+import { FC } from "react";
+import { cn } from "../lib/cn";
+
+type Props = {
+  className?: string;
+};
+
+const Seprator: FC<Props> = ({ className }) => {
+  return <div className={cn("bg-secondary", className)}></div>;
+};
+
+export default Seprator;

app/lib/cn.ts

@@ -0,0 +1,3 @@
+export function cn(...classes: (string | boolean | undefined | null)[]): string {
+  return classes.filter(Boolean).join(' ')
+}