HMC/handmade-revolt
2
0
Fork 0
forked from abner/for-legacy-web
Code Pull Requests Actions Activity

feat(home): add snow

Browse Source
This commit is contained in:
Paul
2021-12-23 13:16:43 +00:00
parent f14ef2b78f
commit 73d99e4518
4 changed files with 200 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
src/pages/home/Home.tsx
View File

@@ -3,8 +3,9 @@ import { Link } from "react-router-dom";
import styled, { css } from "styled-components";
import styles from "./Home.module.scss";
import "./snow.scss";
import { Text } from "preact-i18n";
import { useContext, useState } from "preact/hooks";
import { useContext, useMemo, useState } from "preact/hooks";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
@@ -32,6 +33,19 @@ const IconConainer = styled.div`
`}
`;
const Overlay = styled.div`
display: grid;
height: 100%;
> * {
grid-area: 1 / 1;
}
.content {
z-index: 1;
}
`;
export default function Home() {
const client = useContext(AppContext);
const [showChannels, setChannels] = useState(
@@ -59,68 +73,102 @@ export default function Home() {
}
};
const snowflakes = useMemo(() => {
const flakes = [];
// Disable outside of December
if (new Date().getMonth() !== 11) return [];
for (let i = 0; i < 15; i++) {
flakes.push("❄️");
flakes.push("❄");
}
for (let i = 0; i < 2; i++) {
flakes.push("🎄");
flakes.push("☃️");
flakes.push("⛄");
}
return flakes;
}, []);
return (
<div className={styles.home}>
<Header placement="primary">
<IconConainer onClick={toggleChannelSidebar}>
<HomeIcon size={24} />
</IconConainer>
<Text id="app.navigation.tabs.home" />
</Header>
<h3>
<Text id="app.special.modals.onboarding.welcome" />
<br />
<img src={wideSVG} />
</h3>
<div className={styles.actions}>
<Link to="/invite/Testers">
<CategoryButton
action="chevron"
icon={<Emoji emoji="😁" size={32} />}>
{client.servers.get("01F7ZSBSFHQ8TA81725KQCSDDP") ? (
<Text id="app.home.goto-testers" />
) : (
<Text id="app.home.join-testers" />
)}
</CategoryButton>
</Link>
<a
href="https://insrt.uk/donate"
target="_blank"
rel="noreferrer">
<CategoryButton
action="external"
icon={<Emoji emoji="💷" size={32} />}>
<Text id="app.home.donate" />
</CategoryButton>
</a>
<Link to="/settings/feedback">
<CategoryButton
action="chevron"
icon={<Emoji emoji="🎉" size={32} />}>
<Text id="app.home.feedback" />
</CategoryButton>
</Link>
<a
href="https://revolt.social"
target="_blank"
rel="noreferrer">
<CategoryButton
action="external"
icon={<Emoji emoji="🧭" size={32} />}>
<Text id="app.home.social" />
</CategoryButton>
</a>
<Tooltip content={<Text id="app.home.settings-tooltip" />}>
<Link to="/settings">
<CategoryButton
action="chevron"
icon={<Emoji emoji="🔧" size={32} />}>
<Text id="app.home.settings" />
</CategoryButton>
</Link>
</Tooltip>
</div>
<Overlay>
<div class="snowfall">
{snowflakes.map((emoji, index) => (
<div key={index} class="snowflake">
{emoji}
</div>
))}
</div>
<div class="content">
<Header placement="primary">
<IconConainer onClick={toggleChannelSidebar}>
<HomeIcon size={24} />
</IconConainer>
<Text id="app.navigation.tabs.home" />
</Header>
<h3>
<Text id="app.special.modals.onboarding.welcome" />
<br />
<img src={wideSVG} />
</h3>
<div className={styles.actions}>
<Link to="/invite/Testers">
<CategoryButton
action="chevron"
icon={<Emoji emoji="😁" size={32} />}>
{client.servers.get(
"01F7ZSBSFHQ8TA81725KQCSDDP",
) ? (
<Text id="app.home.goto-testers" />
) : (
<Text id="app.home.join-testers" />
)}
</CategoryButton>
</Link>
<a
href="https://insrt.uk/donate"
target="_blank"
rel="noreferrer">
<CategoryButton
action="external"
icon={<Emoji emoji="💷" size={32} />}>
<Text id="app.home.donate" />
</CategoryButton>
</a>
<Link to="/settings/feedback">
<CategoryButton
action="chevron"
icon={<Emoji emoji="🎉" size={32} />}>
<Text id="app.home.feedback" />
</CategoryButton>
</Link>
<a
href="https://revolt.social"
target="_blank"
rel="noreferrer">
<CategoryButton
action="external"
icon={<Emoji emoji="🧭" size={32} />}>
<Text id="app.home.social" />
</CategoryButton>
</a>
<Tooltip
content={<Text id="app.home.settings-tooltip" />}>
<Link to="/settings">
<CategoryButton
action="chevron"
icon={<Emoji emoji="🔧" size={32} />}>
<Text id="app.home.settings" />
</CategoryButton>
</Link>
</Tooltip>
</div>
</div>
</Overlay>
</div>
);
}