From d84764e34ffaab6c2133686c5f2f47d4ab58e462 Mon Sep 17 00:00:00 2001 From: yukicoder0509 Date: Thu, 14 Nov 2024 17:26:30 +0800 Subject: [PATCH 01/13] feat: add basic layout in authorviewpoint page --- src/app/authorviewpoint/[id]/page.tsx | 28 +++++++++++++++++-- .../AuthorViewpoint/ViewpointCard.tsx | 28 +++++++++++++++++++ 2 files changed, 53 insertions(+), 3 deletions(-) create mode 100644 src/components/AuthorViewpoint/ViewpointCard.tsx diff --git a/src/app/authorviewpoint/[id]/page.tsx b/src/app/authorviewpoint/[id]/page.tsx index b15d580..f018bb3 100644 --- a/src/app/authorviewpoint/[id]/page.tsx +++ b/src/app/authorviewpoint/[id]/page.tsx @@ -1,7 +1,29 @@ -export default function AuthorViewPointPage() { +import ViewpointCard from "@/components/AuthorViewpoint/ViewpointCard"; +import Link from "next/link"; +import { ArrowLongLeftIcon } from "@heroicons/react/24/outline"; + +type AuthorViewPointProps = { + params: { + id: string; + }; +}; + +export default function AuthorViewPoint({ params }: AuthorViewPointProps) { + const { id } = params; return ( -
-

AuthorViewPointPage

+
+
+ + + 返回議題 + +
+ +
+
); } diff --git a/src/components/AuthorViewpoint/ViewpointCard.tsx b/src/components/AuthorViewpoint/ViewpointCard.tsx new file mode 100644 index 0000000..d87ecf7 --- /dev/null +++ b/src/components/AuthorViewpoint/ViewpointCard.tsx @@ -0,0 +1,28 @@ +import { TrashIcon, PlusIcon } from "@heroicons/react/24/outline"; + +export default function ViewpointCard() { + return ( +
+

觀點

+ + +
+ + +
+
+ ); +} From 41c6a5eba0b414fdf394993e72abce201217667e Mon Sep 17 00:00:00 2001 From: yukicoder0509 Date: Sat, 16 Nov 2024 14:31:33 +0800 Subject: [PATCH 02/13] feat: basic card layout of author viewpoint --- src/app/authorviewpoint/[id]/page.tsx | 28 +++++++++----- src/app/issues/[id]/author/page.tsx | 37 +++++++++++++++++++ src/components/AuthorViewpoint/FactCard.tsx | 37 +++++++++++++++++++ .../AuthorViewpoint/FactListCard.tsx | 37 +++++++++++++++++++ .../AuthorViewpoint/ViewpointCard.tsx | 4 +- .../ViewPoints/AddViewPointBar.tsx | 2 +- src/mock/conversationMock.ts | 31 +++++++++------- src/types/conversations.types.ts | 1 + 8 files changed, 150 insertions(+), 27 deletions(-) create mode 100644 src/app/issues/[id]/author/page.tsx create mode 100644 src/components/AuthorViewpoint/FactCard.tsx create mode 100644 src/components/AuthorViewpoint/FactListCard.tsx diff --git a/src/app/authorviewpoint/[id]/page.tsx b/src/app/authorviewpoint/[id]/page.tsx index f018bb3..63af4e5 100644 --- a/src/app/authorviewpoint/[id]/page.tsx +++ b/src/app/authorviewpoint/[id]/page.tsx @@ -1,6 +1,8 @@ import ViewpointCard from "@/components/AuthorViewpoint/ViewpointCard"; import Link from "next/link"; import { ArrowLongLeftIcon } from "@heroicons/react/24/outline"; +import FactListCard from "@/components/AuthorViewpoint/FactListCard"; +import { mockEmptyIssue, mockIssue } from "@/mock/conversationMock"; type AuthorViewPointProps = { params: { @@ -10,18 +12,24 @@ type AuthorViewPointProps = { export default function AuthorViewPoint({ params }: AuthorViewPointProps) { const { id } = params; + const issue = id == "1" ? mockIssue : mockEmptyIssue; return (
-
- - - 返回議題 - -
- +
+
+ + + 返回議題 + +
+ +
+
+ +
diff --git a/src/app/issues/[id]/author/page.tsx b/src/app/issues/[id]/author/page.tsx new file mode 100644 index 0000000..0cf3473 --- /dev/null +++ b/src/app/issues/[id]/author/page.tsx @@ -0,0 +1,37 @@ +import ViewpointCard from "@/components/AuthorViewpoint/ViewpointCard"; +import Link from "next/link"; +import { ArrowLongLeftIcon } from "@heroicons/react/24/outline"; +import FactListCard from "@/components/AuthorViewpoint/FactListCard"; +import { mockEmptyIssue, mockIssue } from "@/mock/conversationMock"; + +type AuthorViewPointProps = { + params: { + id: string; + }; +}; + +export default function AuthorViewPoint({ params }: AuthorViewPointProps) { + const { id } = params; + const issue = id == "1" ? mockIssue : mockEmptyIssue; + return ( +
+
+
+ + + 返回議題 + +
+ +
+
+ +
+
+
+
+ ); +} diff --git a/src/components/AuthorViewpoint/FactCard.tsx b/src/components/AuthorViewpoint/FactCard.tsx new file mode 100644 index 0000000..40f00f3 --- /dev/null +++ b/src/components/AuthorViewpoint/FactCard.tsx @@ -0,0 +1,37 @@ +import { Fact } from "@/types/conversations.types"; +import Link from "next/link"; + +type FactCardProps = { + fact: Fact; +}; + +export default function FactCard({ fact }: FactCardProps) { + return ( +
+

{fact.title}

+ {/* sources */} + + {fact.references.map((reference) => ( +
+ + +

+ {reference.url.replace( + /(https?:\/\/)?(www\.)?/, + "", + )} +

+

+ {reference.title} +

+ +
+ ))} +
+ ); +} diff --git a/src/components/AuthorViewpoint/FactListCard.tsx b/src/components/AuthorViewpoint/FactListCard.tsx new file mode 100644 index 0000000..ca302cd --- /dev/null +++ b/src/components/AuthorViewpoint/FactListCard.tsx @@ -0,0 +1,37 @@ +import { Fact } from "@/types/conversations.types"; +import FactCard from "@/components/AuthorViewpoint/FactCard"; +import { MagnifyingGlassIcon, PlusIcon } from "@heroicons/react/24/outline"; + +type FactListCardProps = { + facts: Fact[]; +}; + +export default function FactListCard({ facts }: FactListCardProps) { + return ( +
+

+ 事實 +

+
+ + +
+
+ {facts.map((fact) => ( +
+ +
+ ))} +
+
+ +
+
+ ); +} diff --git a/src/components/AuthorViewpoint/ViewpointCard.tsx b/src/components/AuthorViewpoint/ViewpointCard.tsx index d87ecf7..e444301 100644 --- a/src/components/AuthorViewpoint/ViewpointCard.tsx +++ b/src/components/AuthorViewpoint/ViewpointCard.tsx @@ -2,7 +2,7 @@ import { TrashIcon, PlusIcon } from "@heroicons/react/24/outline"; export default function ViewpointCard() { return ( -
+

觀點

diff --git a/src/components/Conversation/ViewPoints/AddViewPointBar.tsx b/src/components/Conversation/ViewPoints/AddViewPointBar.tsx index babf592..4dd5767 100644 --- a/src/components/Conversation/ViewPoints/AddViewPointBar.tsx +++ b/src/components/Conversation/ViewPoints/AddViewPointBar.tsx @@ -10,7 +10,7 @@ export default function AddViewPointBar({ id }: AddViewPointBarProps) { return (
diff --git a/src/mock/conversationMock.ts b/src/mock/conversationMock.ts index 8e6d66d..392e9b5 100644 --- a/src/mock/conversationMock.ts +++ b/src/mock/conversationMock.ts @@ -1,18 +1,6 @@ import { Fact, Issue, ViewPoint } from "@/types/conversations.types"; import { UserRepresentation } from "@/types/users.types"; -export const mockIssue: Issue = { - id: 1, - title: "Breakthrough in Electric Vehicle Battery Technology Announced", - summary: - "San Francisco, CA — In a significant leap forward for electric vehicle (EV) technology, researchers at GreenTech Innovations announced today the development of a new battery that could revolutionize the industry. The new design promises to double the range of EVs while reducing charging time to under 15 minutes.The breakthrough was made possible by a novel combination of advanced materials that increase energy density while ensuring battery stability. GreenTech CEO, Michael Foster, stated, “We believe this advancement will accelerate the mass adoption of electric vehicles and contribute significantly to reducing carbon emissions globally.”Experts have pointed out that while the technology shows promise, it will take time to scale up production and integrate it into the existing infrastructure. Additionally, questions remain about the long-term environmental impact of mining the rare materials used in the batteries.", -}; -export const mockEmptyIssue: Issue = { - id: 2, - title: "CommonGround, A New Social Media Platform Game Changer!", - summary: "", -}; - export const mockFact: Fact = { id: 1, title: "This development could disrupt the EV market", @@ -21,17 +9,32 @@ export const mockFact: Fact = { id: 1, title: "battery", icon: "/favicon.ico", - url: "cutedge.com", + url: "https://www.google.com", }, { id: 2, title: "energy", icon: "/favicon.ico", - url: "science.tw", + url: "https://google.com", }, ], }; +export const mockIssue: Issue = { + id: 1, + title: "Breakthrough in Electric Vehicle Battery Technology Announced", + summary: + "San Francisco, CA — In a significant leap forward for electric vehicle (EV) technology, researchers at GreenTech Innovations announced today the development of a new battery that could revolutionize the industry. The new design promises to double the range of EVs while reducing charging time to under 15 minutes.The breakthrough was made possible by a novel combination of advanced materials that increase energy density while ensuring battery stability. GreenTech CEO, Michael Foster, stated, “We believe this advancement will accelerate the mass adoption of electric vehicles and contribute significantly to reducing carbon emissions globally.”Experts have pointed out that while the technology shows promise, it will take time to scale up production and integrate it into the existing infrastructure. Additionally, questions remain about the long-term environmental impact of mining the rare materials used in the batteries.", + facts: [mockFact, mockFact, mockFact, mockFact], +}; + +export const mockEmptyIssue: Issue = { + id: 2, + title: "CommonGround, A New Social Media Platform Game Changer!", + summary: "", + facts: [], +}; + export const mockUser: UserRepresentation = { username: "Sarah Fields", avatar: "/favicon.ico", diff --git a/src/types/conversations.types.ts b/src/types/conversations.types.ts index 7ac6299..7c4f0dc 100644 --- a/src/types/conversations.types.ts +++ b/src/types/conversations.types.ts @@ -4,6 +4,7 @@ export interface Issue { id: number; title: string; summary: string; + facts: Fact[]; } export interface FactReference { From 55f51486e043c138732ee484f2571df48ce0f2d5 Mon Sep 17 00:00:00 2001 From: yukicoder0509 Date: Thu, 14 Nov 2024 17:26:30 +0800 Subject: [PATCH 03/13] feat: add basic layout in authorviewpoint page --- src/app/authorviewpoint/[id]/page.tsx | 28 +++++++++++++++++-- .../AuthorViewpoint/ViewpointCard.tsx | 28 +++++++++++++++++++ 2 files changed, 53 insertions(+), 3 deletions(-) create mode 100644 src/components/AuthorViewpoint/ViewpointCard.tsx diff --git a/src/app/authorviewpoint/[id]/page.tsx b/src/app/authorviewpoint/[id]/page.tsx index b15d580..f018bb3 100644 --- a/src/app/authorviewpoint/[id]/page.tsx +++ b/src/app/authorviewpoint/[id]/page.tsx @@ -1,7 +1,29 @@ -export default function AuthorViewPointPage() { +import ViewpointCard from "@/components/AuthorViewpoint/ViewpointCard"; +import Link from "next/link"; +import { ArrowLongLeftIcon } from "@heroicons/react/24/outline"; + +type AuthorViewPointProps = { + params: { + id: string; + }; +}; + +export default function AuthorViewPoint({ params }: AuthorViewPointProps) { + const { id } = params; return ( -
-

AuthorViewPointPage

+
+
+ + + 返回議題 + +
+ +
+
); } diff --git a/src/components/AuthorViewpoint/ViewpointCard.tsx b/src/components/AuthorViewpoint/ViewpointCard.tsx new file mode 100644 index 0000000..d87ecf7 --- /dev/null +++ b/src/components/AuthorViewpoint/ViewpointCard.tsx @@ -0,0 +1,28 @@ +import { TrashIcon, PlusIcon } from "@heroicons/react/24/outline"; + +export default function ViewpointCard() { + return ( +
+

觀點

+ + +
+ + +
+
+ ); +} From 4f1b8aff2c7d6e24cd065310ec1a637d9e01bf06 Mon Sep 17 00:00:00 2001 From: yukicoder0509 Date: Sat, 16 Nov 2024 14:31:33 +0800 Subject: [PATCH 04/13] feat: basic card layout of author viewpoint --- src/app/authorviewpoint/[id]/page.tsx | 28 +++++++++----- src/app/issues/[id]/author/page.tsx | 37 +++++++++++++++++++ src/components/AuthorViewpoint/FactCard.tsx | 37 +++++++++++++++++++ .../AuthorViewpoint/FactListCard.tsx | 37 +++++++++++++++++++ .../AuthorViewpoint/ViewpointCard.tsx | 4 +- .../ViewPoints/AddViewPointBar.tsx | 2 +- src/mock/conversationMock.ts | 27 ++++++++------ src/types/conversations.types.ts | 1 + 8 files changed, 148 insertions(+), 25 deletions(-) create mode 100644 src/app/issues/[id]/author/page.tsx create mode 100644 src/components/AuthorViewpoint/FactCard.tsx create mode 100644 src/components/AuthorViewpoint/FactListCard.tsx diff --git a/src/app/authorviewpoint/[id]/page.tsx b/src/app/authorviewpoint/[id]/page.tsx index f018bb3..63af4e5 100644 --- a/src/app/authorviewpoint/[id]/page.tsx +++ b/src/app/authorviewpoint/[id]/page.tsx @@ -1,6 +1,8 @@ import ViewpointCard from "@/components/AuthorViewpoint/ViewpointCard"; import Link from "next/link"; import { ArrowLongLeftIcon } from "@heroicons/react/24/outline"; +import FactListCard from "@/components/AuthorViewpoint/FactListCard"; +import { mockEmptyIssue, mockIssue } from "@/mock/conversationMock"; type AuthorViewPointProps = { params: { @@ -10,18 +12,24 @@ type AuthorViewPointProps = { export default function AuthorViewPoint({ params }: AuthorViewPointProps) { const { id } = params; + const issue = id == "1" ? mockIssue : mockEmptyIssue; return (
-
- - - 返回議題 - -
- +
+
+ + + 返回議題 + +
+ +
+
+ +
diff --git a/src/app/issues/[id]/author/page.tsx b/src/app/issues/[id]/author/page.tsx new file mode 100644 index 0000000..0cf3473 --- /dev/null +++ b/src/app/issues/[id]/author/page.tsx @@ -0,0 +1,37 @@ +import ViewpointCard from "@/components/AuthorViewpoint/ViewpointCard"; +import Link from "next/link"; +import { ArrowLongLeftIcon } from "@heroicons/react/24/outline"; +import FactListCard from "@/components/AuthorViewpoint/FactListCard"; +import { mockEmptyIssue, mockIssue } from "@/mock/conversationMock"; + +type AuthorViewPointProps = { + params: { + id: string; + }; +}; + +export default function AuthorViewPoint({ params }: AuthorViewPointProps) { + const { id } = params; + const issue = id == "1" ? mockIssue : mockEmptyIssue; + return ( +
+
+
+ + + 返回議題 + +
+ +
+
+ +
+
+
+
+ ); +} diff --git a/src/components/AuthorViewpoint/FactCard.tsx b/src/components/AuthorViewpoint/FactCard.tsx new file mode 100644 index 0000000..40f00f3 --- /dev/null +++ b/src/components/AuthorViewpoint/FactCard.tsx @@ -0,0 +1,37 @@ +import { Fact } from "@/types/conversations.types"; +import Link from "next/link"; + +type FactCardProps = { + fact: Fact; +}; + +export default function FactCard({ fact }: FactCardProps) { + return ( +
+

{fact.title}

+ {/* sources */} + + {fact.references.map((reference) => ( +
+ + +

+ {reference.url.replace( + /(https?:\/\/)?(www\.)?/, + "", + )} +

+

+ {reference.title} +

+ +
+ ))} +
+ ); +} diff --git a/src/components/AuthorViewpoint/FactListCard.tsx b/src/components/AuthorViewpoint/FactListCard.tsx new file mode 100644 index 0000000..ca302cd --- /dev/null +++ b/src/components/AuthorViewpoint/FactListCard.tsx @@ -0,0 +1,37 @@ +import { Fact } from "@/types/conversations.types"; +import FactCard from "@/components/AuthorViewpoint/FactCard"; +import { MagnifyingGlassIcon, PlusIcon } from "@heroicons/react/24/outline"; + +type FactListCardProps = { + facts: Fact[]; +}; + +export default function FactListCard({ facts }: FactListCardProps) { + return ( +
+

+ 事實 +

+
+ + +
+
+ {facts.map((fact) => ( +
+ +
+ ))} +
+
+ +
+
+ ); +} diff --git a/src/components/AuthorViewpoint/ViewpointCard.tsx b/src/components/AuthorViewpoint/ViewpointCard.tsx index d87ecf7..e444301 100644 --- a/src/components/AuthorViewpoint/ViewpointCard.tsx +++ b/src/components/AuthorViewpoint/ViewpointCard.tsx @@ -2,7 +2,7 @@ import { TrashIcon, PlusIcon } from "@heroicons/react/24/outline"; export default function ViewpointCard() { return ( -
+

觀點

diff --git a/src/components/Conversation/ViewPoints/AddViewPointBar.tsx b/src/components/Conversation/ViewPoints/AddViewPointBar.tsx index babf592..4dd5767 100644 --- a/src/components/Conversation/ViewPoints/AddViewPointBar.tsx +++ b/src/components/Conversation/ViewPoints/AddViewPointBar.tsx @@ -10,7 +10,7 @@ export default function AddViewPointBar({ id }: AddViewPointBarProps) { return (
diff --git a/src/mock/conversationMock.ts b/src/mock/conversationMock.ts index 1e52f39..392e9b5 100644 --- a/src/mock/conversationMock.ts +++ b/src/mock/conversationMock.ts @@ -1,18 +1,6 @@ import { Fact, Issue, ViewPoint } from "@/types/conversations.types"; import { UserRepresentation } from "@/types/users.types"; -export const mockIssue: Issue = { - id: 1, - title: "Breakthrough in Electric Vehicle Battery Technology Announced", - summary: - "San Francisco, CA — In a significant leap forward for electric vehicle (EV) technology, researchers at GreenTech Innovations announced today the development of a new battery that could revolutionize the industry. The new design promises to double the range of EVs while reducing charging time to under 15 minutes.The breakthrough was made possible by a novel combination of advanced materials that increase energy density while ensuring battery stability. GreenTech CEO, Michael Foster, stated, “We believe this advancement will accelerate the mass adoption of electric vehicles and contribute significantly to reducing carbon emissions globally.”Experts have pointed out that while the technology shows promise, it will take time to scale up production and integrate it into the existing infrastructure. Additionally, questions remain about the long-term environmental impact of mining the rare materials used in the batteries.", -}; -export const mockEmptyIssue: Issue = { - id: 2, - title: "CommonGround, A New Social Media Platform Game Changer!", - summary: "", -}; - export const mockFact: Fact = { id: 1, title: "This development could disrupt the EV market", @@ -32,6 +20,21 @@ export const mockFact: Fact = { ], }; +export const mockIssue: Issue = { + id: 1, + title: "Breakthrough in Electric Vehicle Battery Technology Announced", + summary: + "San Francisco, CA — In a significant leap forward for electric vehicle (EV) technology, researchers at GreenTech Innovations announced today the development of a new battery that could revolutionize the industry. The new design promises to double the range of EVs while reducing charging time to under 15 minutes.The breakthrough was made possible by a novel combination of advanced materials that increase energy density while ensuring battery stability. GreenTech CEO, Michael Foster, stated, “We believe this advancement will accelerate the mass adoption of electric vehicles and contribute significantly to reducing carbon emissions globally.”Experts have pointed out that while the technology shows promise, it will take time to scale up production and integrate it into the existing infrastructure. Additionally, questions remain about the long-term environmental impact of mining the rare materials used in the batteries.", + facts: [mockFact, mockFact, mockFact, mockFact], +}; + +export const mockEmptyIssue: Issue = { + id: 2, + title: "CommonGround, A New Social Media Platform Game Changer!", + summary: "", + facts: [], +}; + export const mockUser: UserRepresentation = { username: "Sarah Fields", avatar: "/favicon.ico", diff --git a/src/types/conversations.types.ts b/src/types/conversations.types.ts index 7ac6299..7c4f0dc 100644 --- a/src/types/conversations.types.ts +++ b/src/types/conversations.types.ts @@ -4,6 +4,7 @@ export interface Issue { id: number; title: string; summary: string; + facts: Fact[]; } export interface FactReference { From 3b5b208f57aa061bff78928c141350ecfd188b30 Mon Sep 17 00:00:00 2001 From: yukicoder0509 Date: Thu, 21 Nov 2024 13:56:53 +0800 Subject: [PATCH 05/13] fix: resolve minor center layout problem --- src/app/authorviewpoint/[id]/page.tsx | 37 ------------------- src/app/globals.css | 4 ++ src/app/issues/[id]/author/page.tsx | 36 +++++++++--------- src/app/issues/[id]/page.tsx | 5 +-- src/app/layout.tsx | 2 +- src/app/page.tsx | 14 +++---- .../AuthorViewpoint/FactListCard.tsx | 28 +++++++------- .../AuthorViewpoint/ViewpointCard.tsx | 6 +-- .../ViewPoints/AddViewPointBar.tsx | 2 +- 9 files changed, 49 insertions(+), 85 deletions(-) delete mode 100644 src/app/authorviewpoint/[id]/page.tsx diff --git a/src/app/authorviewpoint/[id]/page.tsx b/src/app/authorviewpoint/[id]/page.tsx deleted file mode 100644 index 63af4e5..0000000 --- a/src/app/authorviewpoint/[id]/page.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import ViewpointCard from "@/components/AuthorViewpoint/ViewpointCard"; -import Link from "next/link"; -import { ArrowLongLeftIcon } from "@heroicons/react/24/outline"; -import FactListCard from "@/components/AuthorViewpoint/FactListCard"; -import { mockEmptyIssue, mockIssue } from "@/mock/conversationMock"; - -type AuthorViewPointProps = { - params: { - id: string; - }; -}; - -export default function AuthorViewPoint({ params }: AuthorViewPointProps) { - const { id } = params; - const issue = id == "1" ? mockIssue : mockEmptyIssue; - return ( -
-
-
- - - 返回議題 - -
- -
-
- -
-
-
-
- ); -} diff --git a/src/app/globals.css b/src/app/globals.css index 8c63bc3..705d813 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -7,3 +7,7 @@ @tailwind components; @tailwind utilities; + +.scrollbar-gutter-stable-both-edges { + scrollbar-gutter: stable both-edges; +} diff --git a/src/app/issues/[id]/author/page.tsx b/src/app/issues/[id]/author/page.tsx index 0cf3473..b2446d4 100644 --- a/src/app/issues/[id]/author/page.tsx +++ b/src/app/issues/[id]/author/page.tsx @@ -14,24 +14,24 @@ export default function AuthorViewPoint({ params }: AuthorViewPointProps) { const { id } = params; const issue = id == "1" ? mockIssue : mockEmptyIssue; return ( -
-
-
- - - 返回議題 - -
- -
-
- -
+
+ {/*
*/} + + + 返回議題 + +
+
+
-
-
+
+ +
+
+ {/*
*/} +
); } diff --git a/src/app/issues/[id]/page.tsx b/src/app/issues/[id]/page.tsx index 2f6a629..870bd97 100644 --- a/src/app/issues/[id]/page.tsx +++ b/src/app/issues/[id]/page.tsx @@ -31,14 +31,11 @@ export default function IssueView({ params }: IssueViewProps) { console.log(id); return ( -
+
- {/* issue */} - {/* view */}
- {/* textbar */}
); diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 660166f..8a69415 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -13,7 +13,7 @@ export default function RootLayout({
-
+
{children}
diff --git a/src/app/page.tsx b/src/app/page.tsx index f682f79..bf16129 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -12,13 +12,11 @@ export default function Page() { const user = mockUser; return ( -
-
-

- {user.username}, 歡迎來到 CommonGround -

- -
-
+
+

+ {user.username}, 歡迎來到 CommonGround +

+ +
); } diff --git a/src/components/AuthorViewpoint/FactListCard.tsx b/src/components/AuthorViewpoint/FactListCard.tsx index ca302cd..17018cb 100644 --- a/src/components/AuthorViewpoint/FactListCard.tsx +++ b/src/components/AuthorViewpoint/FactListCard.tsx @@ -8,7 +8,7 @@ type FactListCardProps = { export default function FactListCard({ facts }: FactListCardProps) { return ( -
+

事實

@@ -19,18 +19,20 @@ export default function FactListCard({ facts }: FactListCardProps) { placeholder="搜尋 CommonGround" />
-
- {facts.map((fact) => ( -
- -
- ))} -
-
- +
+
+ {facts.map((fact) => ( +
+ +
+ ))} +
+
+ +
); diff --git a/src/components/AuthorViewpoint/ViewpointCard.tsx b/src/components/AuthorViewpoint/ViewpointCard.tsx index e444301..bbaef4f 100644 --- a/src/components/AuthorViewpoint/ViewpointCard.tsx +++ b/src/components/AuthorViewpoint/ViewpointCard.tsx @@ -2,15 +2,15 @@ import { TrashIcon, PlusIcon } from "@heroicons/react/24/outline"; export default function ViewpointCard() { return ( -
+

觀點

diff --git a/src/components/Conversation/ViewPoints/AddViewPointBar.tsx b/src/components/Conversation/ViewPoints/AddViewPointBar.tsx index 4dd5767..052787d 100644 --- a/src/components/Conversation/ViewPoints/AddViewPointBar.tsx +++ b/src/components/Conversation/ViewPoints/AddViewPointBar.tsx @@ -8,7 +8,7 @@ type AddViewPointBarProps = { export default function AddViewPointBar({ id }: AddViewPointBarProps) { console.log(`Try to add Viewpoint on issue ${id}`); return ( -
+
Date: Thu, 21 Nov 2024 14:06:56 +0800 Subject: [PATCH 06/13] fix: delete unused files --- src/app/authorviewpoint/[id]/page.tsx | 37 --------------------------- 1 file changed, 37 deletions(-) delete mode 100644 src/app/authorviewpoint/[id]/page.tsx diff --git a/src/app/authorviewpoint/[id]/page.tsx b/src/app/authorviewpoint/[id]/page.tsx deleted file mode 100644 index 63af4e5..0000000 --- a/src/app/authorviewpoint/[id]/page.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import ViewpointCard from "@/components/AuthorViewpoint/ViewpointCard"; -import Link from "next/link"; -import { ArrowLongLeftIcon } from "@heroicons/react/24/outline"; -import FactListCard from "@/components/AuthorViewpoint/FactListCard"; -import { mockEmptyIssue, mockIssue } from "@/mock/conversationMock"; - -type AuthorViewPointProps = { - params: { - id: string; - }; -}; - -export default function AuthorViewPoint({ params }: AuthorViewPointProps) { - const { id } = params; - const issue = id == "1" ? mockIssue : mockEmptyIssue; - return ( -
-
-
- - - 返回議題 - -
- -
-
- -
-
-
-
- ); -} From af654da779e4f1f9d2692bb7d10f4a623b952c28 Mon Sep 17 00:00:00 2001 From: yukicoder0509 Date: Sat, 23 Nov 2024 10:21:44 +0800 Subject: [PATCH 07/13] feat: add metadata --- src/app/issues/[id]/author/page.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/app/issues/[id]/author/page.tsx b/src/app/issues/[id]/author/page.tsx index b2446d4..9257bf1 100644 --- a/src/app/issues/[id]/author/page.tsx +++ b/src/app/issues/[id]/author/page.tsx @@ -3,6 +3,7 @@ import Link from "next/link"; import { ArrowLongLeftIcon } from "@heroicons/react/24/outline"; import FactListCard from "@/components/AuthorViewpoint/FactListCard"; import { mockEmptyIssue, mockIssue } from "@/mock/conversationMock"; +import { Metadata } from "next"; type AuthorViewPointProps = { params: { @@ -10,6 +11,22 @@ type AuthorViewPointProps = { }; }; +type MetadataProps = { + params: { id: string }; +}; + +export async function generateMetadata({ + params, +}: MetadataProps): Promise { + const id = params.id; + const issue = id == "1" ? mockIssue : mockEmptyIssue; + return { + title: `CommonGround - ${issue.title}`, + keywords: "social-issues, viewpoints, rational-discussion", + description: issue.summary, + }; +} + export default function AuthorViewPoint({ params }: AuthorViewPointProps) { const { id } = params; const issue = id == "1" ? mockIssue : mockEmptyIssue; From 0e58d7b08a0bbb70b6e0262944346c8b0e2e67b8 Mon Sep 17 00:00:00 2001 From: yukicoder0509 Date: Mon, 25 Nov 2024 23:11:13 +0800 Subject: [PATCH 08/13] refactor: using mantine input component --- src/app/issues/[id]/author/page.tsx | 14 +++------- .../{FactCard.tsx => EditViewpointFact.tsx} | 11 +++----- .../AuthorViewpoint/FactListCard.tsx | 14 +++++++--- .../AuthorViewpoint/ViewpointCard.tsx | 26 ++++++++++++++----- 4 files changed, 36 insertions(+), 29 deletions(-) rename src/components/AuthorViewpoint/{FactCard.tsx => EditViewpointFact.tsx} (77%) diff --git a/src/app/issues/[id]/author/page.tsx b/src/app/issues/[id]/author/page.tsx index 9257bf1..2fd03e8 100644 --- a/src/app/issues/[id]/author/page.tsx +++ b/src/app/issues/[id]/author/page.tsx @@ -15,15 +15,10 @@ type MetadataProps = { params: { id: string }; }; -export async function generateMetadata({ - params, -}: MetadataProps): Promise { - const id = params.id; - const issue = id == "1" ? mockIssue : mockEmptyIssue; +export async function generateMetadata({}: MetadataProps): Promise { return { - title: `CommonGround - ${issue.title}`, + title: `CommonGround - 撰寫觀點`, keywords: "social-issues, viewpoints, rational-discussion", - description: issue.summary, }; } @@ -32,7 +27,6 @@ export default function AuthorViewPoint({ params }: AuthorViewPointProps) { const issue = id == "1" ? mockIssue : mockEmptyIssue; return (
- {/*
*/} 返回議題 -
+
+ {/* 157px = 56px(header) + 69px(margin-top between header and this div) + 32px(padding-bottom of main)*/}
@@ -48,7 +43,6 @@ export default function AuthorViewPoint({ params }: AuthorViewPointProps) {
- {/*
*/}
); } diff --git a/src/components/AuthorViewpoint/FactCard.tsx b/src/components/AuthorViewpoint/EditViewpointFact.tsx similarity index 77% rename from src/components/AuthorViewpoint/FactCard.tsx rename to src/components/AuthorViewpoint/EditViewpointFact.tsx index 40f00f3..d67d975 100644 --- a/src/components/AuthorViewpoint/FactCard.tsx +++ b/src/components/AuthorViewpoint/EditViewpointFact.tsx @@ -5,12 +5,10 @@ type FactCardProps = { fact: Fact; }; -export default function FactCard({ fact }: FactCardProps) { +export default function EditViewpointFact({ fact }: FactCardProps) { return ( -
+

{fact.title}

- {/* sources */} - {fact.references.map((reference) => (

- {reference.url.replace( - /(https?:\/\/)?(www\.)?/, - "", - )} + {new URL(reference.url).hostname}

{reference.title} diff --git a/src/components/AuthorViewpoint/FactListCard.tsx b/src/components/AuthorViewpoint/FactListCard.tsx index 17018cb..3ff6b0a 100644 --- a/src/components/AuthorViewpoint/FactListCard.tsx +++ b/src/components/AuthorViewpoint/FactListCard.tsx @@ -1,6 +1,7 @@ import { Fact } from "@/types/conversations.types"; -import FactCard from "@/components/AuthorViewpoint/FactCard"; +import EditViewpointFact from "@/components/AuthorViewpoint/EditViewpointFact"; import { MagnifyingGlassIcon, PlusIcon } from "@heroicons/react/24/outline"; +import { TextInput } from "@mantine/core"; type FactListCardProps = { facts: Fact[]; @@ -14,8 +15,13 @@ export default function FactListCard({ facts }: FactListCardProps) {

-
@@ -23,7 +29,7 @@ export default function FactListCard({ facts }: FactListCardProps) {
{facts.map((fact) => (
- +
))}
diff --git a/src/components/AuthorViewpoint/ViewpointCard.tsx b/src/components/AuthorViewpoint/ViewpointCard.tsx index bbaef4f..cc819c3 100644 --- a/src/components/AuthorViewpoint/ViewpointCard.tsx +++ b/src/components/AuthorViewpoint/ViewpointCard.tsx @@ -1,18 +1,30 @@ import { TrashIcon, PlusIcon } from "@heroicons/react/24/outline"; +import { TextInput, Textarea } from "@mantine/core"; export default function ViewpointCard() { return ( -
+

觀點

- - + classNames={{ + wrapper: "h-full", + input: "h-full min-h-7 w-full resize-none bg-transparent text-lg font-normal text-neutral-700 placeholder:text-neutral-500 focus:outline-none", + }} + />
-
+ +
); diff --git a/src/components/AuthorViewpoint/ViewpointCard.tsx b/src/components/AuthorViewpoint/ViewpointCard.tsx index cc819c3..be9b47a 100644 --- a/src/components/AuthorViewpoint/ViewpointCard.tsx +++ b/src/components/AuthorViewpoint/ViewpointCard.tsx @@ -1,5 +1,5 @@ import { TrashIcon, PlusIcon } from "@heroicons/react/24/outline"; -import { TextInput, Textarea } from "@mantine/core"; +import { Button, TextInput, Textarea } from "@mantine/core"; export default function ViewpointCard() { return ( @@ -26,14 +26,28 @@ export default function ViewpointCard() { }} />
- - + +
); From 02d95cb26305a1c6fbad8a3fa0a9011d1652d835 Mon Sep 17 00:00:00 2001 From: yukicoder0509 Date: Tue, 26 Nov 2024 18:52:59 +0800 Subject: [PATCH 10/13] refactor: change html button to mantine button --- src/app/layout.tsx | 1 + .../AuthorViewpoint/FactListCard.tsx | 19 ++++++++++++------- .../AuthorViewpoint/ViewpointCard.tsx | 4 ++-- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 8a69415..1aa268c 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -14,6 +14,7 @@ export default function RootLayout({
+ {/* 56px for header */} {children}
diff --git a/src/components/AuthorViewpoint/FactListCard.tsx b/src/components/AuthorViewpoint/FactListCard.tsx index ecfbc3a..8c7d9b6 100644 --- a/src/components/AuthorViewpoint/FactListCard.tsx +++ b/src/components/AuthorViewpoint/FactListCard.tsx @@ -1,15 +1,22 @@ +"use client"; import { Fact } from "@/types/conversations.types"; import EditViewpointFact from "@/components/AuthorViewpoint/EditViewpointFact"; import { MagnifyingGlassIcon, PlusIcon } from "@heroicons/react/24/outline"; import { Select, Button } from "@mantine/core"; +import { useState } from "react"; type FactListCardProps = { facts: Fact[]; }; export default function FactListCard({ facts }: FactListCardProps) { + const [searchData, setSearchData] = useState([ + "This development could disrupt the EV market", + "Google.com", + "CommonGround", + ]); return ( -
+

事實

@@ -18,11 +25,7 @@ export default function FactListCard({ facts }: FactListCardProps) { */} +
setViewpointContent(e.currentTarget.innerText)} + className="h-full min-h-7 w-full resize-none bg-transparent text-lg font-normal text-neutral-700 placeholder:text-neutral-500 focus:outline-none" + > + {viewpointContent.split("\n").map((paragraph, index) => ( +

+ {paragraph} +

+ ))} +