first commit

src/components/search/relates.tsx

@@ -0,0 +1,41 @@
+import { PresetQuery } from "@/components/search/preset-query";
+import { Skeleton } from "@/components/search/skeleton";
+import { Wrapper } from "@/components/search/wrapper";
+import { Relate } from "@/types/relate";
+import { MessageSquareQuote } from "lucide-react";
+import { FC } from "react";
+
+export const Relates: FC<{ relates: Relate[] | null }> = ({ relates }) => {
+  return (
+    <Wrapper
+      title={
+        <>
+          <MessageSquareQuote></MessageSquareQuote> 相关
+        </>
+      }
+      content={
+        <div className="flex gap-2 flex-col">
+          {relates !== null ? (
+            relates.length > 0 ? (
+              relates.map(({ question }) => (
+                <PresetQuery key={question} query={question}></PresetQuery>
+              ))
+            ) : (
+              <div className="text-sm">没有相关问题.</div>
+            )
+          ) : (
+            <>
+              <Skeleton className="w-full h-5 bg-zinc-200/80"></Skeleton>
+              <Skeleton className="w-full h-5 bg-zinc-200/80"></Skeleton>
+              <Skeleton className="w-full h-5 bg-zinc-200/80"></Skeleton>
+            </>
+          )}
+          <div className="text-xs text-zinc-500 text-center mt-4">
+            <div>VaalaAI回答完成后，您可以通过分享链接将回答分享给朋友！</div>
+            <div>有效期20分钟</div>
+          </div>
+        </div>
+      }
+    ></Wrapper>
+  );
+};