diff --git a/app/lish/[did]/[publication]/dashboard/publicationSettings/PublicationContributors.tsx b/app/lish/[did]/[publication]/dashboard/publicationSettings/PublicationContributors.tsx new file mode 100644 index 00000000..396bcb36 --- /dev/null +++ b/app/lish/[did]/[publication]/dashboard/publicationSettings/PublicationContributors.tsx @@ -0,0 +1,135 @@ +"use client"; +import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny"; +import { PubSettingsHeader } from "./PublicationSettings"; +import { theme } from "tailwind.config"; +import { Popover } from "components/Popover"; +import { DeleteSmall } from "components/Icons/DeleteSmall"; +import { useState } from "react"; +import { Input } from "components/Input"; +import { ButtonPrimary } from "components/Buttons"; + +export const PubContributorManager = (props: { + backToMenuAction: () => void; +}) => { + let contributors = [ + { name: "celine", status: "pending" }, + { name: "jared", status: "accepted" }, + { name: "brendan", status: "accepted" }, + ]; + return ( +
+ + Contributors + + {contributors.length === 0 ? ( + + ) : ( + + )} +
+ ); +}; + +const PubContributorsEmpty = () => { + return ( +
+ +
+ Contributors can make drafts and publish in this publication!{" "} +
+
+ They can't change publication settings or edit other people's work + though. +
+ {/*TODO ADD THE INVITE FLOW*/} +
+ ); +}; + +const PubContributorsContent = (props: { + contributors: { name: string; status: string }[]; +}) => { + let [inputValue, setInputValue] = useState(""); + return ( +
+
+
+ + Get Contributor Invite Link + + Only added contributors can access +
+
+
+
+
+ Add a New Contributor +
+
+
@
+ setInputValue(e.currentTarget.value)} + /> +
+
+ {props.contributors.map((contributor) => { + return ( +
+
+
{contributor.name}
+ {contributor.status === "pending" && ( +
Invited
+ )} +
+ + +
+ ); + })} +
+ ); +}; + +const PubContibutor = () => { + return
; +}; + +const PubContributorOptions = () => { + return ( + }> +
+ Remove Contributor +
+ + ); +}; + +const PubContibutorEmptyIllo = () => { + return ( + + + + + ); +}; diff --git a/app/lish/[did]/[publication]/dashboard/publicationSettings/PublicationSettings.tsx b/app/lish/[did]/[publication]/dashboard/publicationSettings/PublicationSettings.tsx new file mode 100644 index 00000000..59a7f495 --- /dev/null +++ b/app/lish/[did]/[publication]/dashboard/publicationSettings/PublicationSettings.tsx @@ -0,0 +1,129 @@ +"use client"; + +import { ActionButton } from "components/ActionBar/ActionButton"; +import { Popover } from "components/Popover"; +import { SettingsSmall } from "components/Icons/SettingsSmall"; +import { EditPubForm } from "app/lish/createPub/UpdatePubForm"; +import { PubThemeSetter } from "components/ThemeManager/PubThemeSetter"; +import { useIsMobile } from "src/hooks/isMobile"; +import { useState } from "react"; +import { GoBackSmall } from "components/Icons/GoBackSmall"; +import { theme } from "tailwind.config"; +import { ButtonPrimary } from "components/Buttons"; +import { DotLoader } from "components/utils/DotLoader"; +import { ArrowRightTiny } from "components/Icons/ArrowRightTiny"; +import { PubContributorManager } from "./PublicationContributors"; + +type state = "menu" | "general" | "theme" | "contributors"; + +export function PublicationSettingsButton(props: { publication: string }) { + let isMobile = useIsMobile(); + let [state, setState] = useState("menu"); + let [loading, setLoading] = useState(false); + + return ( + setState("menu")} + side={isMobile ? "top" : "right"} + align={isMobile ? "center" : "start"} + className={`max-w-xs w-[1000px] ${state === "theme" && "bg-white!"}`} + arrowFill={theme.colors["border-light"]} + trigger={ + + label="Settings" + /> + } + > + {state === "general" ? ( + setState("menu")} + loading={loading} + setLoadingAction={setLoading} + /> + ) : state === "theme" ? ( + setState("menu")} + loading={loading} + setLoading={setLoading} + /> + ) : state === "contributors" ? ( + setState("menu")} /> + ) : ( + + )} + + ); +} + +const PubSettingsMenu = (props: { + state: "menu" | "general" | "theme" | "contributors"; + setState: (s: state) => void; +}) => { + return ( +
+ Settings + + props.setState("general")}> + Publication Settings + + + props.setState("theme")}> + Publication Theme + + + props.setState("contributors")}> + Contributors + +
+ ); +}; + +const PubSettingsMenuItem = (props: { + children: React.ReactNode; + setState: () => void; +}) => { + return ( + + ); +}; + +export const PubSettingsHeader = (props: { + state: state; + backToMenuAction?: () => void; + loading?: boolean; + noCTA?: boolean; + children: React.ReactNode; +}) => { + return ( +
+ {props.children} + +
+ {props.state !== "menu" && ( + + )} + {props.loading !== undefined && ( + + {props.loading ? : "Update"} + + )} +
+
+ ); +};