64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
import { FormattedMessage } from "react-intl";
|
|
import StepHeader from "./step-header";
|
|
import { DefaultButton } from "@/element/buttons";
|
|
import { DefaultProvider, StreamProviderForward } from "@/providers";
|
|
import { useEffect, useState } from "react";
|
|
import { useLocation, useNavigate } from "react-router-dom";
|
|
import { AddForwardInputs } from "@/element/provider/nostr/fowards";
|
|
|
|
export default function DashboardIntroStep3() {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const [forwards, setForwards] = useState<Array<StreamProviderForward>>([]);
|
|
|
|
async function loadInfo() {
|
|
DefaultProvider.info().then(i => {
|
|
setForwards(i.forwards ?? []);
|
|
});
|
|
}
|
|
|
|
useEffect(() => {
|
|
loadInfo();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="mx-auto flex flex-col items-center">
|
|
<StepHeader />
|
|
<div className="flex flex-col gap-4 w-[30rem]">
|
|
<h2 className="text-center">
|
|
<FormattedMessage defaultMessage="Stream Forwarding (optional)" />
|
|
</h2>
|
|
<p className="text-center text-layer-5">
|
|
<FormattedMessage defaultMessage="This allows you to forward your stream to other platforms to reach a wider audience." />
|
|
<br />
|
|
<FormattedMessage defaultMessage="To get started, grab your stream key from the platform you wish to forward to." />
|
|
</p>
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{forwards?.map(a => (
|
|
<>
|
|
<div className="bg-layer-2 rounded-xl px-3 flex items-center">{a.name}</div>
|
|
<DefaultButton
|
|
onClick={async () => {
|
|
await DefaultProvider.removeForward(a.id);
|
|
await loadInfo();
|
|
}}>
|
|
<FormattedMessage defaultMessage="Remove" id="G/yZLu" />
|
|
</DefaultButton>
|
|
</>
|
|
))}
|
|
</div>
|
|
<AddForwardInputs provider={DefaultProvider} onAdd={loadInfo} />
|
|
<DefaultButton
|
|
onClick={async () => {
|
|
navigate("/dashboard/step-4", {
|
|
state: location.state,
|
|
});
|
|
}}>
|
|
<FormattedMessage defaultMessage="Continue" />
|
|
</DefaultButton>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|