From 13a224c33a32410e1248e0f9a401c2fd56e229d2 Mon Sep 17 00:00:00 2001 From: Peter Date: Tue, 21 Dec 2021 23:04:32 -0300 Subject: [PATCH] feat: add timeline EmptyState component --- public/timeline-empty-state.svg | 63 ++++++++++++++++++++++++++++ src/features/timeline/EmptyState.tsx | 16 +++++++ src/features/timeline/Timeline.tsx | 5 +++ 3 files changed, 84 insertions(+) create mode 100644 public/timeline-empty-state.svg create mode 100644 src/features/timeline/EmptyState.tsx diff --git a/public/timeline-empty-state.svg b/public/timeline-empty-state.svg new file mode 100644 index 0000000..797ac0f --- /dev/null +++ b/public/timeline-empty-state.svg @@ -0,0 +1,63 @@ + + + image + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/features/timeline/EmptyState.tsx b/src/features/timeline/EmptyState.tsx new file mode 100644 index 0000000..137f730 --- /dev/null +++ b/src/features/timeline/EmptyState.tsx @@ -0,0 +1,16 @@ +import { EmptyState, Button } from "components"; +import Image from "next/image"; +import src from "../../../public/timeline-empty-state.svg"; +import { FaPlus as PlusIcon } from "react-icons/fa"; + +export default function TimelineEmptyState() { + return ( + } + tagline="Make history. Lead the way" + description="Starting a conversation you can share you thoughts and rise a topic for anyone in the community. " + > + + + ); +} diff --git a/src/features/timeline/Timeline.tsx b/src/features/timeline/Timeline.tsx index 85389b6..e4394fb 100644 --- a/src/features/timeline/Timeline.tsx +++ b/src/features/timeline/Timeline.tsx @@ -1,4 +1,5 @@ import type { Thread } from "types"; +import EmptyState from "./EmptyState"; import ThreadCard from "./ThreadCard"; type TimelineProps = { @@ -6,6 +7,10 @@ type TimelineProps = { }; export default function Timeline({ threads }: TimelineProps): JSX.Element { + if (threads.length == 0) { + return ; + } + return ( <> {threads.map(thread => (