revite/src/components/common/AgeGate.tsx

91 lines
2.8 KiB
TypeScript
Raw Normal View History

import { useHistory } from "react-router-dom";
import { useState } from "preact/hooks";
import styled from "styled-components";
import { dispatch, getState } from "../../redux";
import Checkbox from "../ui/Checkbox";
import Button from "../ui/Button";
import { Children } from "../../types/Preact";
import { Channel } from "revolt.js";
import { Text } from "preact-i18n";
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 function AgeGate(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 }</>;
} else {
if (!(props.channel.channel_type === 'Group' || props.channel.channel_type === 'TextChannel')) return <>{ props.children }</>;
return (
<Base>
<img
src={"https://static.revolt.chat/emoji/mutant/26a0.svg"}
draggable={false}
/>
<h2>{props.channel.name}</h2>
<span className="subtext">
<Text id={`app.main.channel.nsfw.${props.type}.marked`} />{" "}
<a href="#"><Text id={`app.main.channel.nsfw.learn_more`} /></a>
</span>
<Checkbox checked={consent} onChange={(v) => {
setConsent(v);
if (v) {
dispatch({ type: 'SECTION_TOGGLE_SET', id: 'nsfw', state: true });
} else {
dispatch({ type: 'SECTION_TOGGLE_UNSET', id: 'nsfw' });
}
}}>
<Text id="app.main.channel.nsfw.confirm" />
</Checkbox>
<div className="actions">
<Button contrast onClick={() => history.goBack()}>
<Text id="app.special.modals.actions.back" />
</Button>
<Button
contrast
onClick={() => consent && setAgeGate(true)}>
<Text id={`app.main.channel.nsfw.${props.type}.confirm`} />
</Button>
</div>
</Base>
);
}
}