show ai link in header

src/components/input/SearchBox.tsx

@@ -1,38 +1,40 @@
-'use client'
+"use client";
 
-import React from 'react'
-import SearchIcon from '../icons/SearchIcon'
-import { glassSurfaceFlat } from '@/lib/styles/glassSurface'
+import { useGetAbout } from "@/app/[name]/(Main)/about/hooks/useAboutData";
+import { glassSurfaceFlat } from "@/lib/styles/glassSurface";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import React from "react";
+import SearchIcon from "../icons/SearchIcon";
 
-interface SearchboxProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'results'> {
-  placeholder?: string
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+interface SearchboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "results"> {
+  placeholder?: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export default function SearchBox({
-  className,
-  value,
-  placeholder = '',
-  onChange,
-  ...props
-}: SearchboxProps) {
+export default function SearchBox({ className, value, placeholder = "", onChange, ...props }: SearchboxProps) {
+  const { name } = useParams<{ name?: string }>();
+  const { data: about } = useGetAbout();
+  const showAiLink = !!name && !!about?.data?.enableAiChat;
+
   return (
-    <div
-      className={glassSurfaceFlat(
-        'inline-flex rounded-xl px-4 h-10 w-full items-center content-center',
-        className,
+    <div className="flex gap-4 items-center">
+      <div className={glassSurfaceFlat("inline-flex rounded-xl px-4 h-10 w-full items-center content-center", className)}>
+        <SearchIcon stroke="#8C90A3" />
+        <input
+          onChange={onChange}
+          value={value}
+          placeholder={placeholder}
+          className="text-[#8C90A3] pt-1 block outline-none border-none focus:ring-0 focus:outline-none px-[7px] h-full items-center w-full text-xs!"
+          type="search"
+          {...props}
+        />
+      </div>
+      {showAiLink && (
+        <Link href={`/${name}/ai`} aria-label="AI">
+          <img src={"/assets/images/logo_ai2.svg"} alt="logo_ai" className="w-6" />
+        </Link>
       )}
-    >
-      <SearchIcon stroke='#8C90A3' />
-      <input
-        onChange={onChange}
-        value={value}
-        placeholder={placeholder}
-        className='text-[#8C90A3] pt-1 block outline-none border-none focus:ring-0 focus:outline-none px-[7px] h-full items-center w-full text-xs!'
-        type='search'
-        {...props}
-      />
     </div>
-  )
+  );
 }