System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-19 20:55:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

scrapping old branch

Browse source
This commit is contained in:
Toby Brown 2023-10-11 16:55:16 +01:00
parent 79388c5003
commit 44c4f86184
2 changed files with 124 additions and 155 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

204
components/index/cards/mailing-list.js
View file

@ -1,219 +1,199 @@
import Icon from '@hackclub/icons' import Icon from "@hackclub/icons";
import {useRef, useState} from 'react' import { useRef, useState } from "react";
import { Box, Input, Button, Text, Card, Flex, Grid, Link } from 'theme-ui' import { Box, Input, Button, Text, Card, Flex, Grid, Link } from "theme-ui";
import MailCard from '../../mail-card' import MailCard from "../../mail-card";
import BGImg from '../../background-image' import BGImg from "../../background-image";
import background from '../../../public/home/footer.png' import background from "../../../public/home/footer.png";
const Loading = () => ( const Loading = () => (
<Box <Box
sx={{ sx={{
display: 'flex', display: "flex",
justifyContent: 'center', justifyContent: "center",
alignItems: 'center', alignItems: "center",
border: '2px solid #f3f3f3', border: "2px solid #f3f3f3",
borderTop: '2px solid #ec3750', borderTop: "2px solid #ec3750",
borderRadius: '50%', borderRadius: "50%",
width: '16px', width: "16px",
height: '16px', height: "16px",
animation: 'spin 2s linear infinite', animation: "spin 2s linear infinite",
mr: '5px', mr: "5px",
'@keyframes spin': { "@keyframes spin": {
'0%': { transform: 'rotate(0deg)' }, "0%": { transform: "rotate(0deg)" },
'100%': { transform: 'rotate(360deg)' }, "100%": { transform: "rotate(360deg)" },
}, },
}} }}
></Box> ></Box>
) );
const MailingList = () => { const MailingList = () => {
const [submitting, setSubmitting] = useState(false) const [submitting, setSubmitting] = useState(false);
const [submitted, setSubmitted] = useState(false) const [submitted, setSubmitted] = useState(false);
const [letters, setLetters] = useState([]) const formRef = useRef(null);
const formRef = useRef(null)
const handleSubmit = async (e) => { const handleSubmit = async (e) => {
e.preventDefault() e.preventDefault();
setSubmitting(true) setSubmitting(true);
let res = await fetch('/api/mailing-list', { let res = await fetch("/api/mailing-list", {
method: 'POST', method: "POST",
headers: { headers: {
'Content-Type': 'application/json', "Content-Type": "application/json",
}, },
body: JSON.stringify({ body: JSON.stringify({
name: e.target.name.value, name: e.target.name.value,
email: e.target.email.value, email: e.target.email.value,
}), }),
}) });
formRef.current.reset() formRef.current.reset();
if (res.ok) { if (res.ok) {
setSubmitted(true) setSubmitted(true);
} }
setSubmitting(false) setSubmitting(false);
} };
/* useEffect(() => {
const newsletters = async () => {
const res = await fetch('https://api.github.com/repositories/313119644/contents/updates', {
headers: {
'Content-Type': 'application/json',
}
})
const data = await res.json()
setLetters(data)
}
newsletters()
}, [])*/
return ( return (
<Box sx={{ position: 'relative', py: 6, background: 'darker' }}> <Box sx={{ position: "relative", py: 6, background: "darker" }}>
<Card <Card
sx={{ sx={{
maxWidth: '1050px', maxWidth: "1050px",
mx: 'auto', mx: "auto",
// mt: [3, 4], // mt: [3, 4],
background: 'rgb(255,255,255, 0.45)', background: "rgb(255,255,255, 0.45)",
position: 'relative', position: "relative",
zIndex: 2, zIndex: 2,
backdropFilter: 'blur(8px)', backdropFilter: "blur(8px)",
}} }}
> >
<Flex sx={{ flexDirection: ['column', 'column', 'row'], gridGap: [0, 5] }}> <Flex sx={{ flexDirection: ["column", "row"], gridGap: [0, 5] }}>
<Flex <Flex
sx={{ sx={{
placeItems: 'center', placeItems: "center",
justifyContent: 'center', justifyContent: "center",
alignItems: ['left', 'left', 'center'], alignItems: ["left", "left", "center"],
flexDirection: 'column', flexDirection: "column",
gap: '10px', gap: "10px",
width: ['100%', '100%', '75%'], width: ["100%", "75%"],
}} }}
> >
<Box> <Box>
<Text <Text
variant='title' variant="title"
sx={{ sx={{
fontSize: [4, '36px', '42px', 6], fontSize: [4, "36px", "42px", 6],
zIndex: 2, zIndex: 2,
textAlign: 'left', textAlign: "left",
}} }}
> >
Join the newsletter Join the newsletter
</Text> </Text>
<Text <Text
sx={{ sx={{
color: 'darkless', color: "darkless",
mt: 2, mt: 2,
fontSize: 3, fontSize: 3,
textAlign: 'left', textAlign: "left",
}} }}
as='p' as="p"
> >
We&apos;ll send you an email no more than once a month, when we work We’ll send you an email no more than once a month, when we work
on something cool for you. Check out our{' '} on something cool for you. Check out our{" "}
<Link href='/leader-newsletters/'>previous issues</Link>. <Link href="/leader-newsletters/">previous issues</Link>.
</Text> </Text>
</Box> </Box>
<Grid <Grid
as='form' as="form"
ref={formRef} ref={formRef}
onSubmit={handleSubmit} onSubmit={handleSubmit}
gap={[2, 3]} gap={[2, 3]}
sx={{ sx={{
textAlign: 'center', textAlign: "center",
alignItems: 'end', alignItems: "end",
input: { bg: 'sunken' }, input: { bg: "sunken" },
width: '100%', width: "100%",
}} }}
> >
<Box sx={{ width: '100%' }}> <Box sx={{ width: "100%" }}>
<Input <Input
autofillBackgroundColor='highlight' autofillBackgroundColor="highlight"
type='text' type="text"
name='name' name="name"
id='name' id="name"
placeholder='Your Name' placeholder="Your Name"
required required
sx={{ sx={{
width: '100%', width: "100%",
textAlign: 'center', textAlign: "center",
fontSize: 2, fontSize: 2,
}} }}
/> />
</Box> </Box>
<div> <div>
<Input <Input
autofillBackgroundColor='highlight' autofillBackgroundColor="highlight"
type='email' type="email"
name='email' name="email"
id='email' id="email"
placeholder='Your Email' placeholder="Your Email"
required required
sx={{ sx={{
width: '100%', width: "100%",
textAlign: 'center', textAlign: "center",
fontSize: 2, fontSize: 2,
}} }}
/> />
</div> </div>
<Button type='submit' sx={{ mt: [2, 0], fontSize: 2 }}> <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
{submitting ? ( {submitting ? (
<> <>
<Loading /> Subscribe <Loading /> Subscribe
</> </>
) : submitted ? ( ) : submitted ? (
<> <>
<Icon glyph='send' /> You're on the list! <Icon glyph="send" /> You're on the list!
</> </>
) : ( ) : (
'Subscribe' "Subscribe"
)} )}
</Button> </Button>
</Grid> </Grid>
</Flex> </Flex>
<Box <Box
sx={{ sx={{
display: 'grid', display: "grid",
gridGap: 4, gridGap: 4,
mt: [4, 0], mt: [4, 0],
width: '100%', width: "100%",
}} }}
> >
<MailCard <MailCard
date='August 2023' date="August 2023"
issue={18} issue={18}
body='Bring your club on an epic adventure in code this semester! Jams are 18 brand new coding workshops created by Hack Clubbers ESPECIALLY for you to use in your meetings, complete with pre-made slide decks and even some videos!' body="Bring your club on an epic adventure in code this semester! Jams are 18 brand new coding workshops created by Hack Clubbers ESPECIALLY for you to use in your meetings, complete with pre-made slide decks and even some videos!"
link='/leader-newsletters/2023-08-18' link="/leader-newsletters/2023-08-18"
/> />
<MailCard <MailCard
date='September 2023' date="September 2023"
issue={20} issue={20}
body='📆📣 Leader meeting tomorrow! Join club leaders Sahiti, Zayn and Ronnit tomorrow 8:00am PST/11:00am EST/8:30pm IST. Bring questions and advice to share about maintaining your club after the first meeting!!' body="📆📣 Leader meeting tomorrow! Join club leaders Sahiti, Zayn and Ronnit tomorrow 8:00am PST/11:00am EST/8:30pm IST. Bring questions and advice to share about maintaining your club after the first meeting!!"
link='/leader-newsletters/2023-09-29' link="/leader-newsletters/2023-09-29"
/> />
{/*<Link href='/leader-newsletters/' sx={{ justifySelf: 'center', cursor: 'pointer', }} as='h3'>
Read more
</Link>*/}
</Box> </Box>
</Flex> </Flex>
</Card> </Card>
<BGImg <BGImg
width={2544} width={2544}
height={2048} height={2048}
gradient='linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))' gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
src={background} src={background}
placeholder='blur' placeholder="blur"
alt='Globe with hundreds of Hack Clubs' alt="Globe with hundreds of Hack Clubs"
/> />
</Box> </Box>
) );
} };
export default MailingList export default MailingList;

75
components/mail-card.js
View file

@ -1,54 +1,43 @@
import { Box, Card, Text } from 'theme-ui' import { Box, Card, Text } from "theme-ui";
import Link from "next/link";
export default function MailCard({ body, issue, date, link }) { export default function MailCard({ body, issue, date, link }) {
body = body.length > 80 ? body.substring(0, 80) + '...' : body body = body.length > 80 ? body.substring(0, 80) + "..." : body;
return ( return (
<Card <Card
variant='interactive' variant="interactive"
sx={{ sx={{
cursor: 'pointer', borderRadius: 18,
padding: '0 !important', display: "inline-block",
overflow: "hidden",
bg: "white",
maxWidth: "1500px",
cursor: "pointer",
padding: "0 !important",
}} }}
> >
<Box sx={{ height: '90%' }}> <Link href={link || "/newsletter"}>
<Box <div>
sx={{
width: '100%',
height: '10px',
backgroundRepeat: 'repeat-x',
backgroundSize: '100%',
backgroundImage: `url('/letter-pattern.svg')`,
}}
/>
<Box
sx={{
placeItems: 'center',
display: 'grid',
height: '100%',
}}
>
<Box <Box
sx={{ px: [3, 4] }} sx={{
> width: "100%",
<Box> height: "12px",
<Text as='h1' sx={{ textTransform: 'uppercase' }}> backgroundImage: "url('/letter-pattern.svg')",
{date} backgroundRepeat: "repeat-x",
</Text> backgroundSize: "100%",
<Text>Newsletter #{issue} — From Hack Club, To You</Text> }}
<Text as='h2' sx={{ fontWeight: 'normal' }}> />
{body} <Box sx={{ p: [3, 4] }}>
</Text> <Text as="h1" sx={{ textTransform: "uppercase" }}>
</Box> {date}
</Text>
<Text as="p">Newsletter #{issue} — From Hack Club, To You</Text>
<Text as="h2" sx={{ fontWeight: "normal" }}>
{body}
</Text>
</Box> </Box>
</Box> </div>
</Box> </Link>
</Card> </Card>
) );
} }
/*
<Link href={link || '/newsletter'}> </Link>
*/