a tool for shared writing and social publishing
add content to tabs
+35
-9
+18
-7
app/lish/[handle]/[publication]/PublicationDashboard.tsx
+18
-7
app/lish/[handle]/[publication]/PublicationDashboard.tsx
···
1
1
"use client";
2
2
import { useState } from "react";
3
3
4
-
export function PublicationDashboard(props: { name: string }) {
5
-
let [tab, setTab] = useState("");
4
+
type Tabs = { [tabName: string]: React.ReactNode };
5
+
export function PublicationDashboard<T extends Tabs>(props: {
6
+
name: string;
7
+
tabs: T;
8
+
defaultTab: keyof T;
9
+
}) {
10
+
let [tab, setTab] = useState(props.defaultTab);
11
+
let content = props.tabs[tab];
6
12
return (
7
13
<div className="w-full flex flex-col items-stretch">
8
14
<div className="flex flex-row w-full justify-between border-b border-secondary text-secondary">
9
15
<div>{props.name}</div>
10
16
<div className="flex flex-row gap-2">
11
-
<Tab name="Drafts" />
12
-
<Tab name="Published" />
17
+
{Object.keys(props.tabs).map((t) => (
18
+
<Tab name={t} selected={t === tab} onSelect={() => setTab(t)} />
19
+
))}
13
20
</div>
14
21
</div>
15
-
<div></div>
22
+
<div>{content}</div>
16
23
</div>
17
24
);
18
25
}
19
26
20
-
function Tab(props: { name: string }) {
21
-
return <div className="border">{props.name}</div>;
27
+
function Tab(props: { name: string; selected: boolean; onSelect: () => void }) {
28
+
return (
29
+
<div className="border" onClick={() => props.onSelect()}>
30
+
{props.name}
31
+
</div>
32
+
);
22
33
}
+17
-2
app/lish/[handle]/[publication]/page.tsx
+17
-2
app/lish/[handle]/[publication]/page.tsx
···
10
10
import { Footer } from "components/ActionBar/Footer";
11
11
import { PublicationDashboard } from "./PublicationDashboard";
12
12
import { AddTiny } from "components/Icons/AddTiny";
13
+
import { DraftList } from "./DraftList";
13
14
14
15
const idResolver = new IdResolver();
15
16
···
67
68
try {
68
69
return (
69
70
<div className="relative max-w-screen-lg w-full h-full mx-auto flex sm:flex-row flex-col sm:items-stretch sm:px-6">
70
-
<Sidebar className="mt-6">
71
+
<Sidebar className="mt-6 p-2">
71
72
<ActionButton
72
73
id="new-leaflet-button"
73
74
primary
···
76
77
/>
77
78
</Sidebar>
78
79
<div className={`h-full overflow-y-scroll pl-8 pt-8 w-full`}>
79
-
<PublicationDashboard name={publication.name} />
80
+
<PublicationDashboard
81
+
name={publication.name}
82
+
tabs={{
83
+
Drafts: (
84
+
<DraftList
85
+
drafts={publication.leaflets_in_publications.map((d) => ({
86
+
...d.permission_tokens!,
87
+
initialFacts: facts[d.permission_tokens?.root_entity!],
88
+
}))}
89
+
/>
90
+
),
91
+
Published: <div>none yet lol</div>,
92
+
}}
93
+
defaultTab={"Drafts"}
94
+
/>
80
95
</div>
81
96
<Media mobile>
82
97
<Footer>