diff --git a/src/app/issues/[id]/facts/page.tsx b/src/app/issues/[id]/facts/page.tsx
new file mode 100644
index 0000000..75d46bd
--- /dev/null
+++ b/src/app/issues/[id]/facts/page.tsx
@@ -0,0 +1,15 @@
+import { mockFact, mockFact2, mockFact3 } from "@/mock/conversationMock";
+import AllFactsCard from "@/components/Conversation/Facts/AllFactsCard";
+
+export default function FactsPage({ params }: { params: { issueId: string } }) {
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Conversation/Facts/AllFactsCard.tsx b/src/components/Conversation/Facts/AllFactsCard.tsx
new file mode 100644
index 0000000..5309f8a
--- /dev/null
+++ b/src/components/Conversation/Facts/AllFactsCard.tsx
@@ -0,0 +1,74 @@
+/* eslint-disable @next/next/no-img-element */
+"use client";
+
+import { Fact } from "@/types/conversations.types";
+import { mockIssue } from "@/mock/conversationMock";
+import { PlusIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+
+type AllFactsCardProps = {
+ facts: Fact[];
+ issueId: string;
+};
+
+export default function AllFactsCard({ facts }: AllFactsCardProps) {
+ return (
+
+ {/* Title */}
+
+ {mockIssue.title}
+
+
+ {/* Facts Section */}
+
+
+ 所有事實
+
+ {facts.map((fact) => (
+
+
+ {fact.title}
+
+
+ {fact.references.map((reference) => (
+
+
+
+
+ {reference.url.replace(
+ /(https?:\/\/)?(www\.)?/,
+ "",
+ )}
+
+
+ {reference.title.length > 94 ? `${reference.title.slice(0, 94)}...` : reference.title}
+
+
+
+ ))}
+
+
+ ))}
+
+
+ {/* Add Fact Button */}
+
+
+
新增事實
+
+
+ );
+}
diff --git a/src/components/Conversation/Issues/IssueCard.tsx b/src/components/Conversation/Issues/IssueCard.tsx
index e0c9826..c4a6a91 100644
--- a/src/components/Conversation/Issues/IssueCard.tsx
+++ b/src/components/Conversation/Issues/IssueCard.tsx
@@ -35,7 +35,7 @@ export default function IssueCard({ issueId }: IssueCardProps) {
{issue.summary}
查看所有事實
diff --git a/src/mock/conversationMock.ts b/src/mock/conversationMock.ts
index 1e52f39..3a83471 100644
--- a/src/mock/conversationMock.ts
+++ b/src/mock/conversationMock.ts
@@ -19,19 +19,57 @@ export const mockFact: Fact = {
references: [
{
id: 1,
- title: "battery",
+ title: "New Tech Reshapes Electric Vehicle Landscape",
icon: "/favicon.ico",
url: "https://www.google.com",
},
{
id: 2,
- title: "energy",
+ title: "Battery Advancement Sparks Market Revolution",
icon: "/favicon.ico",
url: "https://google.com",
},
],
};
+export const mockFact2: Fact = {
+ id: 1,
+ title: "This development could disrupt the EV market2",
+ references: [
+ {
+ id: 1,
+ title: "電池進步引發市場革命",
+ icon: "/favicon.ico",
+ url: "https://google.com",
+ },
+ ],
+};
+
+export const mockFact3: Fact = {
+ id: 1,
+ title: "This development could disrupt the EV market3",
+ references: [
+ {
+ id: 1,
+ title: "New Tech Reshapes Electric Vehicle Landscapeepewijriwejfkljnfklfdijwdlfoiwefjowenfoiwaaaaaaaaaaa",
+ icon: "/favicon.ico",
+ url: "https://www.google.com",
+ },
+ {
+ id: 2,
+ title: "Battery Advancement Sparks Market Revolution",
+ icon: "/favicon.ico",
+ url: "https://google.com",
+ },
+ {
+ id: 3,
+ title: "電池進步引發市場革命",
+ icon: "/favicon.ico",
+ url: "https://lunarhosts.com",
+ },
+ ],
+};
+
export const mockUser: UserRepresentation = {
username: "Sarah Fields",
avatar: "/favicon.ico",