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",