import { observer } from "mobx-react-lite"; import { useHistory } from "react-router-dom"; import styled from "styled-components"; import { Text } from "preact-i18n"; import { useState } from "preact/hooks"; import { Channel } from "../../mobx"; import { dispatch, getState } from "../../redux"; import Button from "../ui/Button"; import Checkbox from "../ui/Checkbox"; import { Children } from "../../types/Preact"; const Base = styled.div` display: flex; flex-grow: 1; flex-direction: column; align-items: center; justify-content: center; user-select: none; padding: 12px; img { height: 150px; } .subtext { color: var(--secondary-foreground); margin-bottom: 12px; font-size: 14px; } .actions { margin-top: 20px; display: flex; gap: 12px; } `; type Props = { gated: boolean; children: Children; } & { type: "channel"; channel: Channel; }; export default observer((props: Props) => { const history = useHistory(); const [consent, setConsent] = useState( getState().sectionToggle["nsfw"] ?? false, ); const [ageGate, setAgeGate] = useState(false); if (ageGate || !props.gated) { return <>{props.children}; } if ( !( props.channel.channel_type === "Group" || props.channel.channel_type === "TextChannel" ) ) return <>{props.children}; return (

{props.channel.name}

{" "} { setConsent(v); if (v) { dispatch({ type: "SECTION_TOGGLE_SET", id: "nsfw", state: true, }); } else { dispatch({ type: "SECTION_TOGGLE_UNSET", id: "nsfw" }); } }}>
); });