Skip to content

Commit

Permalink
removing formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@tobyab
tobyab committed Oct 13, 2023
1 parent 7590e8b commit 0683803
Show file tree
Hide file tree
Showing 2 changed files with 155 additions and 124 deletions.
204 changes: 112 additions & 92 deletions components/index/cards/mailing-list.js
View file
Original file line number Diff line number Diff line change
@@ -1,199 +1,219 @@
import Icon from "@hackclub/icons";
import { useRef, useState } from "react";
import { Box, Input, Button, Text, Card, Flex, Grid, Link } from "theme-ui";
import MailCard from "../../mail-card";
import BGImg from "../../background-image";
import Icon from '@hackclub/icons'
import {useRef, useState} from 'react'
import { Box, Input, Button, Text, Card, Flex, Grid, Link } from 'theme-ui'
import MailCard from '../../mail-card'
import BGImg from '../../background-image'

import background from "../../../public/home/footer.png";
import background from '../../../public/home/footer.png'

const Loading = () => (
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
border: "2px solid #f3f3f3",
borderTop: "2px solid #ec3750",
borderRadius: "50%",
width: "16px",
height: "16px",
animation: "spin 2s linear infinite",
mr: "5px",
"@keyframes spin": {
"0%": { transform: "rotate(0deg)" },
"100%": { transform: "rotate(360deg)" },
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
border: '2px solid #f3f3f3',
borderTop: '2px solid #ec3750',
borderRadius: '50%',
width: '16px',
height: '16px',
animation: 'spin 2s linear infinite',
mr: '5px',
'@keyframes spin': {
'0%': { transform: 'rotate(0deg)' },
'100%': { transform: 'rotate(360deg)' },
},
}}
></Box>
);
)

const MailingList = () => {
const [submitting, setSubmitting] = useState(false);
const [submitted, setSubmitted] = useState(false);
const formRef = useRef(null);
const [submitting, setSubmitting] = useState(false)
const [submitted, setSubmitted] = useState(false)
const [letters, setLetters] = useState([])
const formRef = useRef(null)

const handleSubmit = async (e) => {
e.preventDefault();
setSubmitting(true);
e.preventDefault()
setSubmitting(true)

let res = await fetch("/api/mailing-list", {
method: "POST",
let res = await fetch('/api/mailing-list', {
method: 'POST',
headers: {
"Content-Type": "application/json",
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: e.target.name.value,
email: e.target.email.value,
}),
});
})

formRef.current.reset();
formRef.current.reset()

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 (
<Box sx={{ position: "relative", py: 6, background: "darker" }}>
<Box sx={{ position: 'relative', py: 6, background: 'darker' }}>
<Card
sx={{
maxWidth: "1050px",
mx: "auto",
maxWidth: '1050px',
mx: 'auto',
// mt: [3, 4],
background: "rgb(255,255,255, 0.45)",
position: "relative",
background: 'rgb(255,255,255, 0.45)',
position: 'relative',
zIndex: 2,
backdropFilter: "blur(8px)",
backdropFilter: 'blur(8px)',
}}
>
<Flex sx={{ flexDirection: ["column", "row"], gridGap: [0, 5] }}>
<Flex sx={{ flexDirection: ['column', 'column', 'row'], gridGap: [0, 5] }}>
<Flex
sx={{
placeItems: "center",
justifyContent: "center",
alignItems: ["left", "left", "center"],
flexDirection: "column",
gap: "10px",
width: ["100%", "75%"],
placeItems: 'center',
justifyContent: 'center',
alignItems: ['left', 'left', 'center'],
flexDirection: 'column',
gap: '10px',
width: ['100%', '100%', '75%'],
}}
>
<Box>
<Text
variant="title"
variant='title'
sx={{
fontSize: [4, "36px", "42px", 6],
fontSize: [4, '36px', '42px', 6],
zIndex: 2,
textAlign: "left",
textAlign: 'left',
}}
>
Join the newsletter
</Text>
<Text
sx={{
color: "darkless",
color: 'darkless',
mt: 2,
fontSize: 3,
textAlign: "left",
textAlign: 'left',
}}
as="p"
as='p'
>
We’ll send you an email no more than once a month, when we work
on something cool for you. Check out our{" "}
<Link href="/leader-newsletters/">previous issues</Link>.
We&apos;ll send you an email no more than once a month, when we work
on something cool for you. Check out our{' '}
<Link href='/leader-newsletters/'>previous issues</Link>.
</Text>
</Box>
<Grid
as="form"
as='form'
ref={formRef}
onSubmit={handleSubmit}
gap={[2, 3]}
sx={{
textAlign: "center",
alignItems: "end",
input: { bg: "sunken" },
width: "100%",
textAlign: 'center',
alignItems: 'end',
input: { bg: 'sunken' },
width: '100%',
}}
>
<Box sx={{ width: "100%" }}>
<Box sx={{ width: '100%' }}>
<Input
autofillBackgroundColor="highlight"
type="text"
name="name"
id="name"
placeholder="Your Name"
autofillBackgroundColor='highlight'
type='text'
name='name'
id='name'
placeholder='Your Name'
required
sx={{
width: "100%",
textAlign: "center",
width: '100%',
textAlign: 'center',
fontSize: 2,
}}
/>
</Box>
<div>
<Input
autofillBackgroundColor="highlight"
type="email"
name="email"
id="email"
placeholder="Your Email"
autofillBackgroundColor='highlight'
type='email'
name='email'
id='email'
placeholder='Your Email'
required
sx={{
width: "100%",
textAlign: "center",
width: '100%',
textAlign: 'center',
fontSize: 2,
}}
/>
</div>
<Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
<Button type='submit' sx={{ mt: [2, 0], fontSize: 2 }}>
{submitting ? (
<>
<Loading /> Subscribe
</>
) : submitted ? (
<>
<Icon glyph="send" /> You're on the list!
<Icon glyph='send' /> You're on the list!
</>
) : (
"Subscribe"
'Subscribe'
)}
</Button>
</Grid>
</Flex>
<Box
sx={{
display: "grid",
display: 'grid',
gridGap: 4,
mt: [4, 0],
width: "100%",
width: '100%',
}}
>
<MailCard
date="August 2023"
date='August 2023'
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!"
link="/leader-newsletters/2023-08-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!'
link='/leader-newsletters/2023-08-18'
/>
<MailCard
date="September 2023"
date='September 2023'
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!!"
link="/leader-newsletters/2023-09-29"
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 href='/leader-newsletters/' sx={{ justifySelf: 'center', cursor: 'pointer', }} as='h3'>
Read more
</Link>*/}
</Box>
</Flex>
</Card>
<BGImg
width={2544}
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}
placeholder="blur"
alt="Globe with hundreds of Hack Clubs"
placeholder='blur'
alt='Globe with hundreds of Hack Clubs'
/>
</Box>
);
};
)
}

export default MailingList;
export default MailingList
75 changes: 43 additions & 32 deletions components/mail-card.js
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,54 @@
import { Box, Card, Text } from "theme-ui";
import Link from "next/link";
import { Box, Card, Text } from 'theme-ui'

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 (
<Card
variant="interactive"
variant='interactive'
sx={{
borderRadius: 18,
display: "inline-block",
overflow: "hidden",
bg: "white",
maxWidth: "1500px",
cursor: "pointer",
padding: "0 !important",
cursor: 'pointer',
padding: '0 !important',
}}
>
<Link href={link || "/newsletter"}>
<div>
<Box sx={{ height: '90%' }}>
<Box
sx={{
width: '100%',
height: '10px',
backgroundRepeat: 'repeat-x',
backgroundSize: '100%',
backgroundImage: `url('/letter-pattern.svg')`,
}}
/>
<Box
sx={{
placeItems: 'center',
display: 'grid',
height: '100%',
}}
>
<Box
sx={{
width: "100%",
height: "12px",
backgroundImage: "url('/letter-pattern.svg')",
backgroundRepeat: "repeat-x",
backgroundSize: "100%",
}}
/>
<Box sx={{ p: [3, 4] }}>
<Text as="h1" sx={{ textTransform: "uppercase" }}>
{date}
</Text>
<Text as="p">Newsletter #{issue} — From Hack Club, To You</Text>
<Text as="h2" sx={{ fontWeight: "normal" }}>
{body}
</Text>
sx={{ px: [3, 4] }}
>
<Box>
<Text as='h1' sx={{ textTransform: 'uppercase' }}>
{date}
</Text>
<Text>Newsletter #{issue} — From Hack Club, To You</Text>
<Text as='h2' sx={{ fontWeight: 'normal' }}>
{body}
</Text>
</Box>
</Box>
</div>
</Link>
</Box>
</Box>
</Card>
);
)
}

/*
<Link href={link || '/newsletter'}> </Link>
*/

0 comments on commit 0683803

Please sign in to comment.