mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-09 16:53:36 -05:00
Update: Age gate view
This commit is contained in:
parent
030d743af9
commit
b100d06cda
3 changed files with 41 additions and 8 deletions
2
external/lang
vendored
2
external/lang
vendored
|
@ -1 +1 @@
|
|||
Subproject commit 5cad406a2fb09d90803c5604d6f27701c3bf140b
|
||||
Subproject commit ec907eb606a3e1d5046bef503caa0585f6bcbc22
|
|
@ -1,7 +1,7 @@
|
|||
import styled from "styled-components";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import ChannelHeader from "./ChannelHeader";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useParams, useHistory } from "react-router-dom";
|
||||
import { MessageArea } from "./messaging/MessageArea";
|
||||
import Checkbox from "../../components/ui/Checkbox";
|
||||
import Button from "../../components/ui/Button";
|
||||
|
@ -30,6 +30,32 @@ const ChannelContent = styled.div`
|
|||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const AgeGate = 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;
|
||||
}
|
||||
`;
|
||||
|
||||
export function Channel({ id }: { id: string }) {
|
||||
const ctx = useForceUpdate();
|
||||
const channel = useChannel(id, ctx);
|
||||
|
@ -47,15 +73,22 @@ function TextChannel({ channel }: { channel: Channel }) {
|
|||
const [ showMembers, setMembers ] = useState(true);
|
||||
|
||||
if ((channel.channel_type === 'TextChannel' || channel.channel_type === 'Group') && channel.name.includes('nsfw')) {
|
||||
const goBack = useHistory();
|
||||
const [ consent, setConsent ] = useState(false);
|
||||
const [ ageGate, setAgeGate ] = useState(false);
|
||||
if (!ageGate) {
|
||||
return (
|
||||
<div style={{ maxWidth: '480px' }}>
|
||||
<h3>this channel is marked as nsfw</h3>
|
||||
<Checkbox checked={consent} onChange={v => setConsent(v)}>I am at least 18 years old</Checkbox>
|
||||
<Button onClick={() => consent && setAgeGate(true)}>view content</Button>
|
||||
</div>
|
||||
<AgeGate>
|
||||
<img src={"https://static.revolt.chat/emoji/mutant/26a0.svg"} draggable={false}/>
|
||||
<h2>{channel.name}</h2>
|
||||
<span className="subtext">This channel is marked as NSFW. <a href="#">Learn more</a></span>
|
||||
|
||||
<Checkbox checked={consent} onChange={v => setConsent(v)}>I confirm that I am at least 18 years old.</Checkbox>
|
||||
<div className="actions">
|
||||
<Button contrast onClick={() => goBack}>Go back</Button>
|
||||
<Button contrast onClick={() => consent && setAgeGate(true)}>Enter Channel</Button>
|
||||
</div>
|
||||
</AgeGate>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -185,7 +185,7 @@
|
|||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
font-size: 12px;
|
||||
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
|
|
Loading…
Reference in a new issue