从零搭建基于 AI 问答平台(19) 修改 HotTopicsCard 组件

效果

实现步骤如下：

修改 HotTopicsCard 组件

修改文件，读取数据库数据， src/components/dashboard/HotTopicsCard.tsx:

import { prisma } from "@/lib/db";

const HotTopicsCard = async () => {
  const topics = await prisma.topic_count.findMany({});
  const formattedTopics = topics.map((topic) => {
    return {
      text: topic.topic,
      value: topic.count,
    };
  });
...
<CustomWordCloud formattedTopics={formattedTopics} />

实现点击词云，跳转

修改文件，src/components/CustomWordCloud.tsx:

import D3WordCloud from "react-d3-cloud";
...
  <D3WordCloud
      data={formattedTopics}
      height={550}
      font="Times"
      fontSize={fontSizeMapper}
      rotate={0}
      padding={10}
      fill={theme.theme === "dark" ? "white" : "black"}
      onWordClick={(e, d) => {
        router.push("/quiz?topic=" + d.text);
      }}
    />

修改 quiz 接收参数

type Props = {
  searchParams:{
    topic?: string;
  }
}
const Quiz = async ( { searchParams} : Props) => {
  const { topic } = await searchParams;
  const { userId } = await auth();

  if (!userId) {
    return redirect('/');
  }
  
  return (
    <QuizCreation topic={ topic ?? ""} />
  )
}

如果感兴趣本项目，请访问项目目录： 从零搭建基于 AI 问答平台 - 目录

---

作者：Bearalise
出处：从零搭建基于 AI 问答平台(19) 修改 HotTopicsCard 组件
版权：本文版权归作者所有
转载：欢迎转载，但未经作者同意，必须保留此段声明，必须在文章中给出原文链接。