diff --git a/src/app/authorviewpoint/[id]/page.tsx b/src/app/authorviewpoint/[id]/page.tsx deleted file mode 100644 index b15d580..0000000 --- a/src/app/authorviewpoint/[id]/page.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export default function AuthorViewPointPage() { - return ( -
-

AuthorViewPointPage

-
- ); -} 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 new file mode 100644 index 0000000..2fd03e8 --- /dev/null +++ b/src/app/issues/[id]/author/page.tsx @@ -0,0 +1,48 @@ +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"; +import { Metadata } from "next"; + +type AuthorViewPointProps = { + params: { + id: string; + }; +}; + +type MetadataProps = { + params: { id: string }; +}; + +export async function generateMetadata({}: MetadataProps): Promise { + return { + title: `CommonGround - 撰寫觀點`, + keywords: "social-issues, viewpoints, rational-discussion", + }; +} + +export default function AuthorViewPoint({ params }: AuthorViewPointProps) { + const { id } = params; + const issue = id == "1" ? mockIssue : mockEmptyIssue; + return ( +
+ + + 返回議題 + +
+ {/* 157px = 56px(header) + 69px(margin-top between header and this div) + 32px(padding-bottom of main)*/} +
+ +
+
+ +
+
+
+ ); +} 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..1aa268c 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -13,7 +13,8 @@ export default function RootLayout({
-
+
+ {/* 56px for header */} {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/EditViewpointFact.tsx b/src/components/AuthorViewpoint/EditViewpointFact.tsx new file mode 100644 index 0000000..d67d975 --- /dev/null +++ b/src/components/AuthorViewpoint/EditViewpointFact.tsx @@ -0,0 +1,32 @@ +import { Fact } from "@/types/conversations.types"; +import Link from "next/link"; + +type FactCardProps = { + fact: Fact; +}; + +export default function EditViewpointFact({ fact }: FactCardProps) { + return ( +
+

{fact.title}

+ {fact.references.map((reference) => ( +
+ + +

+ {new URL(reference.url).hostname} +

+

+ {reference.title} +

+ +
+ ))} +
+ ); +} diff --git a/src/components/AuthorViewpoint/FactListCard.tsx b/src/components/AuthorViewpoint/FactListCard.tsx new file mode 100644 index 0000000..8d6850f --- /dev/null +++ b/src/components/AuthorViewpoint/FactListCard.tsx @@ -0,0 +1,62 @@ +"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] = useState([ + "This development could disrupt the EV market", + "Google.com", + "CommonGround", + ]); + return ( +
+

+ 事實 +

+
+ +