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

Extract organization spotlight card to a component

Browse source
This commit is contained in:
Gary Tou 2024-10-29 15:05:13 -07:00
parent 78bb5329ce
commit 7141b88377
No known key found for this signature in database
GPG key ID: 1587ABD3593755C3
2 changed files with 86 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
components/fiscal-sponsorship/organization-spotlight.js Normal file
View file

@ -0,0 +1,82 @@
import Tilt from '../tilt'
import { Card, Heading, Text } from 'theme-ui'
import Image from 'next/image'
import { Balancer } from 'react-wrap-balancer'
export default function OrganizationSpotlight({ organization }) {
return (
<Tilt>
<Card
as="a"
href={
organization.transparent
? `https://hcb.hackclub.com/${organization.slug}`
: organization.donation_link
}
sx={{
justifyContent: 'center',
alignItems: 'center',
minHeight: 128,
color: 'white',
cursor: 'pointer',
textShadow: '0 1px 4px rgba(0, 0, 0, 0.5)',
textDecoration: 'none',
backgroundColor: 'black',
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
borderRadius: 'extra',
overflow: 'hidden',
position: 'relative',
p: 3,
height: '100%',
display: 'grid',
gridTemplateColumns: '64px 1fr',
columnGap: 3,
rowGap: 2
}}
style={{
backgroundImage: `linear-gradient(rgba(0,0,0,0.375) 0%, rgba(0,0,0,0.5) 75%), url('${organization.background_image}')`
}}
>
<Image
src={organization.logo}
alt={`${organization.name} logo`}
loading="lazy"
width={64}
height={64}
sx={{
objectFit: 'contain',
borderRadius: 'extra'
}}
/>
<div>
<Heading
as="h3"
sx={{
fontSize: [3, 4],
m: 0,
overflowWrap: 'anywhere',
width: '100%',
display: 'block'
}}
>
{organization.name}
</Heading>
<Text
variant="caption"
sx={{
color: 'white',
opacity: 0.875
}}
>
{organization.location.readable}
</Text>
</div>
<Text as="p" sx={{ gridColumn: ['span 2', '2'] }}>
<Balancer>{organization.description}</Balancer>
</Text>
</Card>
</Tilt>
)
}

84
pages/fiscal-sponsorship/index.js
View file

@ -1,6 +1,5 @@
import Meta from '@hackclub/meta'
import Head from 'next/head'
import Image from 'next/image'
import Link from 'next/link'
import { Balancer } from 'react-wrap-balancer'
import {
@ -19,12 +18,11 @@ import Nav from '../../components/nav'
import Footer from '../../components/footer'
import Photo from '../../components/photo'
import Stat from '../../components/stat'
import Tilt from '../../components/tilt'
import ContactBanner from '../../components/fiscal-sponsorship/contact'
import Features from '../../components/fiscal-sponsorship/features'
import OuternetImgFile from '../../public/home/outernet-110.jpg'
import SignIn from '../../components/fiscal-sponsorship/sign-in'
import OrganizationSpotlight from '../../components/fiscal-sponsorship/organization-spotlight'
const organizations = [
{
@ -269,83 +267,9 @@ export default function Page() {
<Stat value="2018" label="serving nonprofits since" reversed />
</Flex>
<Grid columns={[1, 2]} gap={[3, 4]} sx={{ mt: 4 }}>
{organizations
// .map(org => new Organization(org))
.map(organization => (
<Tilt key={organization.id}>
<Card
as="a"
href={
organization.transparent
? `https://hcb.hackclub.com/${organization.slug}`
: organization.donation_link
}
sx={{
justifyContent: 'center',
alignItems: 'center',
minHeight: 128,
color: 'white',
cursor: 'pointer',
textShadow: '0 1px 4px rgba(0, 0, 0, 0.5)',
textDecoration: 'none',
backgroundColor: 'black',
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
borderRadius: 'extra',
overflow: 'hidden',
position: 'relative',
p: 3,
height: '100%',
display: 'grid',
gridTemplateColumns: '64px 1fr',
columnGap: 3,
rowGap: 2
}}
style={{
backgroundImage: `linear-gradient(rgba(0,0,0,0.375) 0%, rgba(0,0,0,0.5) 75%), url('${organization.background_image}')`
}}
>
<Image
src={organization.logo}
alt={`${organization.name} logo`}
loading="lazy"
width={64}
height={64}
sx={{
objectFit: 'contain',
borderRadius: 'extra'
}}
/>
<div>
<Heading
as="h3"
sx={{
fontSize: [3, 4],
m: 0,
overflowWrap: 'anywhere',
width: '100%',
display: 'block'
}}
>
{organization.name}
</Heading>
<Text
variant="caption"
sx={{
color: 'white',
opacity: 0.875
}}
>
{organization.location.readable}
</Text>
</div>
<Text as="p" sx={{ gridColumn: ['span 2', '2'] }}>
<Balancer>{organization.description}</Balancer>
</Text>
</Card>
</Tilt>
))}
{organizations.map(org => (
<OrganizationSpotlight organization={org} key={org.id} />
))}
</Grid>
<Box
sx={{