shadcn UI ScrollArea 代码示范

const KeywordList: React.FC = () => {
    const [categories, setCategories] = useState<{ keyword: string; id: string }[]>([]);
    const { type } = useHomeStore(state => ({ type: state.type }));
    const { setKeyword, keyword } = useHomeStore(state => ({
        setKeyword: state.setKeyword,
        keyword: state.keyword,
    }));

  

    const handleKeywordClick = (keyword: string) => {
        setKeyword(keyword);
    };

    return (
        <Accordion type="single" defaultValue="item-1" collapsible className="border-none px-1">
            <AccordionItem value="item-1">
                <AccordionTrigger className="text-gray-500">关键词</AccordionTrigger>
                <AccordionContent>
                    <ScrollArea className="h-48">
                        <ul className="space-y-3 pr-3 w-full">
                            <li
                                key="all"
                                className={`flex justify-between px-3 py-1 rounded cursor-pointer ${
                                    keyword === "全部" ? 'bg-cool-gray text-vibrant-red' : ''
                                }`}
                                onClick={() => handleKeywordClick("全部")}
                            >
                                <span>全部</span>
                            </li>
                            {categories.map((category) => (
                                <li
                                    key={category.keyword}
                                    className={`flex justify-between px-3 py-1 rounded cursor-pointer ${
                                        category.keyword === keyword ? 'bg-cool-gray text-vibrant-red' : ''
                                    }`}
                                    onClick={() => handleKeywordClick(category.keyword)}
                                >
                                    <span>{category.keyword}</span>
                                </li>
                            ))}
                        </ul>
                        <ScrollBar orientation="vertical" />
                    </ScrollArea>
                </AccordionContent>
            </AccordionItem>
        </Accordion>
    );
};

export default KeywordList;