ai-bot/app/_ui/Search.tsx

"use client";

import { faSearch } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import clsx from "clsx";
import { useMemo, useState } from "react";
import Logo from "./Logo";
export type SearchTypeItem = {
    name: string;
    key: string;
    includes: string[];
    priority: number;

}
export type SearchWayItemType = {
    label: string;
    value: string;
    fullName: string;
    key: string;

}
export const SearchTypeList: SearchTypeItem[] = [
    {
        name: '常用',
        key: 'custom',
        includes: ['inside', 'bing'],
        priority: 0
    },
    {
        name: '搜索',
        key: 'search',
        includes: ['101'],
        priority: 0
    },
    {
        name: '社区',
        key: 'community',
        includes: ['101'],
        priority: 0
    },
    {
        name: '图片',
        key: 'picture',
        includes: ['101'],
        priority: 0
    },
    {
        name: '生活',
        key: 'life',
        includes: ['101'],
        priority: 0
    }
]
export const SearchWayItem: SearchWayItemType[] = [
    {
        label: '站内',
        value: '',
        fullName: '站内资源',
        key: 'inside',
    },
    {
        label: 'Bing',
        fullName: '站内资源',
        value: 'https://bing.com',
        key: 'bing'
    }
]
export default function Search() {
    const [selectKey, setSelectKey] = useState(SearchTypeList[0].key)
    const nowSelectConfig = useMemo(() => {
        const idx = SearchTypeList.findIndex(val => val.key === selectKey)
        if (idx !== -1) return SearchTypeList[idx]
        else return null
    }, [selectKey])
    const [activeSearchKey, setActiveSearchKey] = useState(nowSelectConfig?.includes[0])
    const activeSearch = useMemo(() => {
        const idx = SearchWayItem.findIndex(val => val.key === activeSearchKey)
        if (idx !== -1) {
            return SearchWayItem[idx]
        } else {
            return null
        }
    }, [activeSearchKey])
    return (
        <div className="w-full flex justify-center flex-col  items-center py-10">

            <div className="w-[200px]">
                <Logo></Logo>
            </div>
            <div className="w-[800px] flex flex-col gap-y-2">
                <div className="flex  w-full justify-center gap-x-5 text-[#666666]">
                    {
                        SearchTypeList.map(item => (
                            <div key={item.key}
                                onClick={() => {
                                    setSelectKey(item.key)
                                }}
                                className={clsx(item.key === selectKey ?
                                    "text-[#333]" : "text-[#999] cursor-pointer")}>
                                {item.name}
                            </div>
                        ))
                    }
                </div>
                <div className="w-full relative">
                    <input type="text" placeholder={`${activeSearch?.label}搜索`} className="w-full bg-[#C4C2C6] px-4 h-[50px] rounded-3xl  outline-none" />
                    <FontAwesomeIcon className="text-white absolute top-1/2 -translate-y-1/2 right-6 text-xl" icon={faSearch}></FontAwesomeIcon>
                </div>
                <div className="w-full flex justify-center gap-x-4 ">
                    {
                        SearchWayItem.filter(val => nowSelectConfig?.includes.includes(val.key)).map(item => (
                            <div key={item.key} onClick={() => {
                                setActiveSearchKey(item.key)
                            }} className={clsx(activeSearchKey === item.key ?
                                "text-[#333]" : "text-[#999] cursor-pointer")}>{item.label}</div>
                        ))
                    }
                </div>
             
            </div>

        </div>
    );
}