mirror of
https://github.com/System-End/site.git
synced 2026-04-19 15:18:18 +00:00
Lint & format
This commit is contained in:
Yoda
parent
e58bc02f06
commit
368aa9a84a
5 changed files with 394 additions and 191 deletions
|
|
@ -3,42 +3,43 @@ import { Organization } from '../../../pages/bank/climate'
|
|||
import Tilt from '../../../components/tilt'
|
||||
import Icon from '@hackclub/icons'
|
||||
|
||||
export const Badge = ({ badge }) => badge.image ? (
|
||||
<ThemeBadge
|
||||
as="span"
|
||||
sx={{
|
||||
backgroundImage: `url("${badge.image}")`,
|
||||
backgroundSize: 'contain',
|
||||
backgroundColor: 'unset',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
fontSize: 'inherit',
|
||||
textShadow: 'none',
|
||||
borderRadius: 5,
|
||||
display: 'block',
|
||||
height: 30,
|
||||
width: 38
|
||||
}}
|
||||
>
|
||||
<span style={{ opacity: '0' }}>.</span>
|
||||
</ThemeBadge>
|
||||
) : (
|
||||
<ThemeBadge
|
||||
as="span"
|
||||
sx={{
|
||||
bg: badge.color,
|
||||
color: 'snow',
|
||||
fontSize: 'inherit',
|
||||
textShadow: 'none',
|
||||
borderRadius: 5,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Icon glyph={badge.icon} size={30} />
|
||||
</ThemeBadge>
|
||||
)
|
||||
export const Badge = ({ badge }) =>
|
||||
badge.image ? (
|
||||
<ThemeBadge
|
||||
as="span"
|
||||
sx={{
|
||||
backgroundImage: `url("${badge.image}")`,
|
||||
backgroundSize: 'contain',
|
||||
backgroundColor: 'unset',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
fontSize: 'inherit',
|
||||
textShadow: 'none',
|
||||
borderRadius: 5,
|
||||
display: 'block',
|
||||
height: 30,
|
||||
width: 38
|
||||
}}
|
||||
>
|
||||
<span style={{ opacity: '0' }}>.</span>
|
||||
</ThemeBadge>
|
||||
) : (
|
||||
<ThemeBadge
|
||||
as="span"
|
||||
sx={{
|
||||
bg: badge.color,
|
||||
color: 'snow',
|
||||
fontSize: 'inherit',
|
||||
textShadow: 'none',
|
||||
borderRadius: 5,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<Icon glyph={badge.icon} size={30} />
|
||||
</ThemeBadge>
|
||||
)
|
||||
|
||||
const TagRow = ({ category, type, badgeNames }) => {
|
||||
return (
|
||||
|
|
@ -60,7 +61,12 @@ const TagRow = ({ category, type, badgeNames }) => {
|
|||
* }} props
|
||||
* @returns
|
||||
*/
|
||||
export const OrganizationCard = ({ openModal, badges, organization, showTags = false }) => (
|
||||
export const OrganizationCard = ({
|
||||
openModal,
|
||||
badges,
|
||||
organization,
|
||||
showTags = false
|
||||
}) => (
|
||||
<Tilt>
|
||||
<Card
|
||||
onClick={() => openModal(organization)}
|
||||
|
|
|
|||
|
|
@ -200,4 +200,4 @@ function Vignette() {
|
|||
}}
|
||||
></Box>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,11 +72,17 @@ const MSparkles = ({
|
|||
}
|
||||
|
||||
const Sparkle = ({ size, color, style, path, viewBox }) => {
|
||||
if (!path) path =
|
||||
'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
|
||||
if (!path)
|
||||
path =
|
||||
'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
|
||||
return (
|
||||
<SparkleWrapper style={style}>
|
||||
<SparkleSvg width={size} height={size} viewBox={viewBox || "0 0 82 82"} fill="none">
|
||||
<SparkleSvg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox={viewBox || '0 0 82 82'}
|
||||
fill="none"
|
||||
>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d={path} fill={color} />
|
||||
</SparkleSvg>
|
||||
</SparkleWrapper>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,44 @@
|
|||
import ClimateDirectory, { regions, fetchRawClimateOrganizations } from "./index";
|
||||
import ClimateDirectory, {
|
||||
regions,
|
||||
fetchRawClimateOrganizations
|
||||
} from './index'
|
||||
import { map, find, kebabCase, startCase } from 'lodash'
|
||||
|
||||
const regionsWithIds = map(regions, region => ({ id: kebabCase(region.label), ...region }))
|
||||
const regionsWithIds = map(regions, region => ({
|
||||
id: kebabCase(region.label),
|
||||
...region
|
||||
}))
|
||||
|
||||
export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
|
||||
return <ClimateDirectory rawOrganizations={rawOrganizations} pageRegion={pageRegion} />
|
||||
return (
|
||||
<ClimateDirectory
|
||||
rawOrganizations={rawOrganizations}
|
||||
pageRegion={pageRegion}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export const getStaticPaths = () => {
|
||||
const paths = map(map(regionsWithIds, 'id'), id => ({
|
||||
params: { region: `organizations-in-${id}` }
|
||||
}))
|
||||
|
||||
const paths = map(map(regionsWithIds, 'id'), id => ({
|
||||
params: { region: `organizations-in-${id}` }
|
||||
}))
|
||||
|
||||
return { paths, fallback: false }
|
||||
return { paths, fallback: false }
|
||||
}
|
||||
|
||||
export const getStaticProps = async ({ params }) => {
|
||||
let { region } = params;
|
||||
region = find(regionsWithIds, ['id', region.replace('organizations-in-', '')])
|
||||
let { region } = params
|
||||
region = find(regionsWithIds, ['id', region.replace('organizations-in-', '')])
|
||||
|
||||
let orgs = (await fetchRawClimateOrganizations()).filter(org => org.location.continent === region.label)
|
||||
let orgs = (await fetchRawClimateOrganizations()).filter(
|
||||
org => org.location.continent === region.label
|
||||
)
|
||||
|
||||
return {
|
||||
props: {
|
||||
rawOrganizations: orgs,
|
||||
pageRegion: region,
|
||||
},
|
||||
revalidate: 60
|
||||
}
|
||||
return {
|
||||
props: {
|
||||
rawOrganizations: orgs,
|
||||
pageRegion: region
|
||||
},
|
||||
revalidate: 60
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,13 @@
|
|||
import { Badge as ThemeBadge, Box, Container, Flex, Grid, Heading, Input, Select } from 'theme-ui'
|
||||
import {
|
||||
Badge as ThemeBadge,
|
||||
Box,
|
||||
Container,
|
||||
Flex,
|
||||
Grid,
|
||||
Heading,
|
||||
Input,
|
||||
Select
|
||||
} from 'theme-ui'
|
||||
import Meta from '@hackclub/meta'
|
||||
import Head from 'next/head'
|
||||
import ForceTheme from '../../../components/force-theme'
|
||||
|
|
@ -7,7 +16,9 @@ import Footer from '../../../components/footer'
|
|||
import MSparkles from '../../../components/sparkles/money'
|
||||
import { Text, Button, Card } from 'theme-ui'
|
||||
import Icon from '@hackclub/icons'
|
||||
import OrganizationCard, { Badge } from '../../../components/bank/directory/card'
|
||||
import OrganizationCard, {
|
||||
Badge
|
||||
} from '../../../components/bank/directory/card'
|
||||
import Zoom from 'react-reveal/Zoom'
|
||||
import fuzzysort from 'fuzzysort'
|
||||
import ScrollHint from '../../../components/scroll-hint'
|
||||
|
|
@ -17,7 +28,6 @@ import NextLink from 'next/link'
|
|||
import { kebabCase, intersection } from 'lodash'
|
||||
import theme from '@hackclub/theme'
|
||||
|
||||
|
||||
const styles = `
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
|
|
@ -103,7 +113,8 @@ export const regions = [
|
|||
label: 'Asia & Oceania',
|
||||
color: 'secondary',
|
||||
icon: 'explore',
|
||||
image: 'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png'
|
||||
image:
|
||||
'https://cloud-oax3m4v0t-hack-club-bot.vercel.app/0asia___oceania.png'
|
||||
}
|
||||
]
|
||||
|
||||
|
|
@ -126,8 +137,8 @@ const FilterPanel = ({ filter, mobile }) => {
|
|||
cursor: mobile ? 'pointer' : 'default',
|
||||
':hover': mobile
|
||||
? {
|
||||
color: 'blue'
|
||||
}
|
||||
color: 'blue'
|
||||
}
|
||||
: {}
|
||||
}}
|
||||
onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
|
||||
|
|
@ -195,7 +206,7 @@ const FilterPanel = ({ filter, mobile }) => {
|
|||
: 'primary',
|
||||
':hover': {
|
||||
color: 'blue'
|
||||
},
|
||||
}
|
||||
}}
|
||||
>
|
||||
All
|
||||
|
|
@ -218,7 +229,7 @@ const FilterPanel = ({ filter, mobile }) => {
|
|||
textDecoration: 'none',
|
||||
color:
|
||||
currentSelections.length === baseData.length ||
|
||||
!currentSelections.includes(item.id)
|
||||
!currentSelections.includes(item.id)
|
||||
? 'black'
|
||||
: 'primary',
|
||||
transition: 'color 0.2s',
|
||||
|
|
@ -298,8 +309,8 @@ const RegionPanel = ({ currentRegion, mobile }) => {
|
|||
cursor: mobile ? 'pointer' : 'default',
|
||||
':hover': mobile
|
||||
? {
|
||||
color: 'blue'
|
||||
}
|
||||
color: 'blue'
|
||||
}
|
||||
: {}
|
||||
}}
|
||||
onClick={() => setHiddenOnMobile(!hiddenOnMobile)}
|
||||
|
|
@ -323,7 +334,7 @@ const RegionPanel = ({ currentRegion, mobile }) => {
|
|||
display: hiddenOnMobile ? 'none' : 'flex'
|
||||
}}
|
||||
>
|
||||
<NextLink scroll={false} href={"/bank/climate"}>
|
||||
<NextLink scroll={false} href={'/bank/climate'}>
|
||||
<Flex
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
|
|
@ -365,7 +376,7 @@ const RegionPanel = ({ currentRegion, mobile }) => {
|
|||
color: !currentRegion ? 'red' : 'black',
|
||||
':hover': {
|
||||
color: 'blue'
|
||||
},
|
||||
}
|
||||
}}
|
||||
>
|
||||
All
|
||||
|
|
@ -373,7 +384,11 @@ const RegionPanel = ({ currentRegion, mobile }) => {
|
|||
</Flex>
|
||||
</NextLink>
|
||||
{regions?.map((item, idx) => (
|
||||
<NextLink key={idx} scroll={false} href={`/bank/climate/organizations-in-${kebabCase(item.label)}`}>
|
||||
<NextLink
|
||||
key={idx}
|
||||
scroll={false}
|
||||
href={`/bank/climate/organizations-in-${kebabCase(item.label)}`}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
|
|
@ -387,7 +402,7 @@ const RegionPanel = ({ currentRegion, mobile }) => {
|
|||
borderRadius: '4px',
|
||||
background: mobile ? 'snow' : 'none',
|
||||
textDecoration: 'none',
|
||||
color: currentRegion?.label == item.label ? 'red' : 'black',
|
||||
color: currentRegion?.label === item.label ? 'red' : 'black',
|
||||
transition: 'color 0.2s',
|
||||
':hover': {
|
||||
color: 'blue'
|
||||
|
|
@ -438,7 +453,7 @@ const RegionPanel = ({ currentRegion, mobile }) => {
|
|||
}
|
||||
|
||||
const Filtering = ({ mobile, region, ...props }) => {
|
||||
console.log({region});
|
||||
console.log({ region })
|
||||
return (
|
||||
<>
|
||||
{Object.values(props).map((filter, i) => (
|
||||
|
|
@ -449,10 +464,10 @@ const Filtering = ({ mobile, region, ...props }) => {
|
|||
)
|
||||
}
|
||||
|
||||
export default function ({ rawOrganizations, pageRegion }) {
|
||||
export default function ClimatePage({ rawOrganizations, pageRegion }) {
|
||||
const [searchValue, setSearchValue] = useState('')
|
||||
// const [region, setRegion] = useState(pageRegion);
|
||||
const region = pageRegion;
|
||||
const region = pageRegion
|
||||
|
||||
// useEffect(() => {
|
||||
// // history.pushState(null, null, `/bank/climate/organizations-in-${region.toLowerCase().split(' ').join('-')}`);
|
||||
|
|
@ -481,29 +496,36 @@ export default function ({ rawOrganizations, pageRegion }) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div style={modalOrganization ? {
|
||||
|
||||
} : {}}>
|
||||
<div style={modalOrganization ? {} : {}}>
|
||||
<Meta
|
||||
as={Head}
|
||||
title={"Climate-focused nonprofits on Bank" + (region ? ` in ${region.label}` : '')}
|
||||
description={"Nonprofits are making real environmental impact" + (region ? ` in ${region.label}` : "") + " with Hack Club Bank's fiscal sponsorship and financial tools. Explore the climate efforts running on Hack Club Bank."}
|
||||
title={
|
||||
'Climate-focused nonprofits on Bank' +
|
||||
(region ? ` in ${region.label}` : '')
|
||||
}
|
||||
description={
|
||||
'Nonprofits are making real environmental impact' +
|
||||
(region ? ` in ${region.label}` : '') +
|
||||
" with Hack Club Bank's fiscal sponsorship and financial tools. Explore the climate efforts running on Hack Club Bank."
|
||||
}
|
||||
image="https://cloud-7yw9f6xnv-hack-club-bot.vercel.app/0grant.png"
|
||||
/>
|
||||
<style>{styles}</style>
|
||||
{modalOrganization && (
|
||||
<Box sx={{
|
||||
position: 'fixed',
|
||||
top: '0px',
|
||||
left: '0px',
|
||||
right: '0px',
|
||||
bottom: '0px',
|
||||
zIndex: 1000,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
bg: '#00000044'
|
||||
}} onClick={closeModal}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'fixed',
|
||||
top: '0px',
|
||||
left: '0px',
|
||||
right: '0px',
|
||||
bottom: '0px',
|
||||
zIndex: 1000,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
bg: '#00000044'
|
||||
}}
|
||||
onClick={closeModal}
|
||||
>
|
||||
<Card
|
||||
sx={{
|
||||
|
|
@ -512,47 +534,80 @@ export default function ({ rawOrganizations, pageRegion }) {
|
|||
borderRadius: '10px',
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
e.stopPropagation()
|
||||
}}
|
||||
>
|
||||
<Flex sx={{ flexDirection: 'column', alignItems: 'start', gap: 3 }}>
|
||||
<Flex sx={{
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'end',
|
||||
width: '100%',
|
||||
minHeight: '200px',
|
||||
m: -4,
|
||||
p: 4,
|
||||
pb: '48px',
|
||||
boxSizing: 'content-box',
|
||||
backgroundPosition: 'center center',
|
||||
color: 'white',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: 'cover',
|
||||
backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`
|
||||
}}>
|
||||
<Flex sx={{ flexDirection: ['column', 'row', 'row'], alignItems: ['center', 'end', 'end'], justifyContent: 'start' }}>
|
||||
<img src={modalOrganization.branding.logo} sx={{ width: '100px', height: '100px', borderRadius: '8px', marginRight: [0, 4, 4], boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)' }} />
|
||||
<Text variant="title" sx={{
|
||||
wordBreak: 'break-word',
|
||||
marginBottom: '16px',
|
||||
textAlign: ['center', 'left', 'left'],
|
||||
fontSize: ['48px', '48px', '64px'],
|
||||
color: 'white',
|
||||
textShadow: '0px 10px 10px rgba(0, 0, 0, 0.25)'
|
||||
}}>{modalOrganization.name}</Text>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'end',
|
||||
width: '100%',
|
||||
minHeight: '200px',
|
||||
m: -4,
|
||||
p: 4,
|
||||
pb: '48px',
|
||||
boxSizing: 'content-box',
|
||||
backgroundPosition: 'center center',
|
||||
color: 'white',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: 'cover',
|
||||
backgroundImage: `linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,1) 100%), url('${modalOrganization.branding.backgroundImage}')`
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: ['column', 'row', 'row'],
|
||||
alignItems: ['center', 'end', 'end'],
|
||||
justifyContent: 'start'
|
||||
}}
|
||||
>
|
||||
<img
|
||||
alt={`${modalOrganization.name}'s logo`}
|
||||
src={modalOrganization.branding.logo}
|
||||
sx={{
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
borderRadius: '8px',
|
||||
marginRight: [0, 4, 4],
|
||||
boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)'
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
variant="title"
|
||||
sx={{
|
||||
wordBreak: 'break-word',
|
||||
marginBottom: '16px',
|
||||
textAlign: ['center', 'left', 'left'],
|
||||
fontSize: ['48px', '48px', '64px'],
|
||||
color: 'white',
|
||||
textShadow: '0px 10px 10px rgba(0, 0, 0, 0.25)'
|
||||
}}
|
||||
>
|
||||
{modalOrganization.name}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
{/* Badges */}
|
||||
<Flex sx={{ flexDirection: 'row', justifyContent: ['center', 'start', 'start'], alignItems: 'center', gap: 2, width: '100%', mt: -1, mb: -2, flexWrap: 'wrap' }}>
|
||||
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: 'row',
|
||||
justifyContent: ['center', 'start', 'start'],
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
width: '100%',
|
||||
mt: -1,
|
||||
mb: -2,
|
||||
flexWrap: 'wrap'
|
||||
}}
|
||||
>
|
||||
{tags.forOrg(modalOrganization).map((tag, i) => (
|
||||
|
||||
<ThemeBadge
|
||||
key={i}
|
||||
as="span"
|
||||
sx={{
|
||||
bg: tag.color,
|
||||
|
|
@ -573,94 +628,209 @@ export default function ({ rawOrganizations, pageRegion }) {
|
|||
))}
|
||||
</Flex>
|
||||
|
||||
<Flex sx={{ flexDirection: 'row', alignItems: 'center', gap: 4, width: '100%' }}>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
{/* info & buttons */}
|
||||
<Flex sx={{ flexDirection: 'column', alignItems: 'start', flex: '1' }}>
|
||||
<Text variant="lead" style={{ fontSize: '22px' }}>{modalOrganization.branding.description}</Text>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: 'column',
|
||||
alignItems: 'start',
|
||||
flex: '1'
|
||||
}}
|
||||
>
|
||||
<Text variant="lead" style={{ fontSize: '22px' }}>
|
||||
{modalOrganization.branding.description}
|
||||
</Text>
|
||||
|
||||
{/* mobile stats */}
|
||||
<Flex sx={{ my: 3, display: ['flex', 'flex', 'none'], width: '100%', gap: 2, flexWrap: 'wrap', flexDirection: 'row', alignItems: 'start', alignSelf: 'start' }}>
|
||||
<Text variant="subheadline" sx={{
|
||||
mb: 0,
|
||||
color: '#3b4858',
|
||||
marginRight: 2
|
||||
}}>{modalOrganization.location.country}</Text>
|
||||
<Text variant="subheadline" sx={{
|
||||
mb: 0,
|
||||
color: '#3b4858'
|
||||
}}>{modalOrganization.location.continent}</Text>
|
||||
<Flex
|
||||
sx={{
|
||||
my: 3,
|
||||
display: ['flex', 'flex', 'none'],
|
||||
width: '100%',
|
||||
gap: 2,
|
||||
flexWrap: 'wrap',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'start',
|
||||
alignSelf: 'start'
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
variant="subheadline"
|
||||
sx={{
|
||||
mb: 0,
|
||||
color: '#3b4858',
|
||||
marginRight: 2
|
||||
}}
|
||||
>
|
||||
{modalOrganization.location.country}
|
||||
</Text>
|
||||
<Text
|
||||
variant="subheadline"
|
||||
sx={{
|
||||
mb: 0,
|
||||
color: '#3b4858'
|
||||
}}
|
||||
>
|
||||
{modalOrganization.location.continent}
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
<Flex sx={{ flexDirection: 'column', alignItems: 'start', my: 2, ml: -1, gap: 1 }}>
|
||||
<Flex as="a" target="_blank" href={modalOrganization.links.website} sx={{
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'start',
|
||||
alignItems: 'center',
|
||||
color: 'slate',
|
||||
textDecoration: 'none'
|
||||
}}>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: 'column',
|
||||
alignItems: 'start',
|
||||
my: 2,
|
||||
ml: -1,
|
||||
gap: 1
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
as="a"
|
||||
target="_blank"
|
||||
href={modalOrganization.links.website}
|
||||
sx={{
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'start',
|
||||
alignItems: 'center',
|
||||
color: 'slate',
|
||||
textDecoration: 'none'
|
||||
}}
|
||||
>
|
||||
<Icon glyph="web" size={38} />
|
||||
<Text style={{ fontSize: '20px', marginLeft: '6px' }}>Website</Text>
|
||||
<Icon glyph="external" size={20} style={{ marginLeft: '2px', marginBottom: '6px' }} />
|
||||
<Text style={{ fontSize: '20px', marginLeft: '6px' }}>
|
||||
Website
|
||||
</Text>
|
||||
<Icon
|
||||
glyph="external"
|
||||
size={20}
|
||||
style={{ marginLeft: '2px', marginBottom: '6px' }}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex as="a" target="_blank" href={modalOrganization.links.financials} sx={{
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'start',
|
||||
alignItems: 'center',
|
||||
color: 'slate',
|
||||
textDecoration: 'none'
|
||||
}}>
|
||||
<Flex
|
||||
as="a"
|
||||
target="_blank"
|
||||
href={modalOrganization.links.financials}
|
||||
sx={{
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'start',
|
||||
alignItems: 'center',
|
||||
color: 'slate',
|
||||
textDecoration: 'none'
|
||||
}}
|
||||
>
|
||||
<Icon glyph="explore" size={38} />
|
||||
<Text style={{ fontSize: '20px', marginLeft: '6px' }}>Transparent Finances</Text>
|
||||
<Icon glyph="external" size={20} style={{ marginLeft: '2px', marginBottom: '6px' }} />
|
||||
<Text style={{ fontSize: '20px', marginLeft: '6px' }}>
|
||||
Transparent Finances
|
||||
</Text>
|
||||
<Icon
|
||||
glyph="external"
|
||||
size={20}
|
||||
style={{ marginLeft: '2px', marginBottom: '6px' }}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
{/* desktop stats */}
|
||||
<Flex sx={{ display: ['none', 'none', 'flex'], maxWidth: '30%', flexDirection: 'column', alignItems: 'start', alignSelf: 'start' }}>
|
||||
<Flex
|
||||
sx={{
|
||||
display: ['none', 'none', 'flex'],
|
||||
maxWidth: '30%',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'start',
|
||||
alignSelf: 'start'
|
||||
}}
|
||||
>
|
||||
<Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
|
||||
<Text variant="headline" sx={{
|
||||
mb: 0,
|
||||
color: '#3b4858'
|
||||
}}>{modalOrganization.location.country}</Text>
|
||||
<Text sx={{
|
||||
color: '#5b616a',
|
||||
fontSize: '20px'
|
||||
}}>Country</Text>
|
||||
<Text
|
||||
variant="headline"
|
||||
sx={{
|
||||
mb: 0,
|
||||
color: '#3b4858'
|
||||
}}
|
||||
>
|
||||
{modalOrganization.location.country}
|
||||
</Text>
|
||||
<Text
|
||||
sx={{
|
||||
color: '#5b616a',
|
||||
fontSize: '20px'
|
||||
}}
|
||||
>
|
||||
Country
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex sx={{ flexDirection: 'column', alignItems: 'start' }}>
|
||||
<Text variant="headline" sx={{
|
||||
mb: 0,
|
||||
color: '#3b4858'
|
||||
}}>{modalOrganization.location.continent}</Text>
|
||||
<Text sx={{
|
||||
color: '#5b616a',
|
||||
fontSize: '20px'
|
||||
}}>Continent</Text>
|
||||
<Text
|
||||
variant="headline"
|
||||
sx={{
|
||||
mb: 0,
|
||||
color: '#3b4858'
|
||||
}}
|
||||
>
|
||||
{modalOrganization.location.continent}
|
||||
</Text>
|
||||
<Text
|
||||
sx={{
|
||||
color: '#5b616a',
|
||||
fontSize: '20px'
|
||||
}}
|
||||
>
|
||||
Continent
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Flex sx={{ flexDirection: 'row', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Button as="a" variant="lg" href={modalOrganization.links.donations} target="_blank" sx={{
|
||||
backgroundImage: t => t.util.gx('green', 'blue'),
|
||||
width: ['100%', 'auto', 'auto']
|
||||
}}>
|
||||
<Flex sx={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', width: '24px', height: '24px', marginLeft: -1, marginRight: 2 }}>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: 'row',
|
||||
width: '100%',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
as="a"
|
||||
variant="lg"
|
||||
href={modalOrganization.links.donations}
|
||||
target="_blank"
|
||||
sx={{
|
||||
backgroundImage: t => t.util.gx('green', 'blue'),
|
||||
width: ['100%', 'auto', 'auto']
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
marginLeft: -1,
|
||||
marginRight: 2
|
||||
}}
|
||||
>
|
||||
<Icon glyph="friend" size={20} style={{ scale: '2.5' }} />
|
||||
</Flex>
|
||||
Make a Donation
|
||||
</Button>
|
||||
<Text sx={{ display: ['none', 'none', 'block'] }}>All donations are tax-deductible.</Text>
|
||||
<Text sx={{ display: ['none', 'none', 'block'] }}>
|
||||
All donations are tax-deductible.
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Box>
|
||||
)}
|
||||
<Box as="main" key="main">
|
||||
{!modalOrganization && (
|
||||
<Nav light />
|
||||
)}
|
||||
{!modalOrganization && <Nav light />}
|
||||
<ForceTheme theme="light" />
|
||||
<Box
|
||||
sx={{
|
||||
|
|
@ -740,7 +910,7 @@ export default function ({ rawOrganizations, pageRegion }) {
|
|||
/>
|
||||
</MSparkles>
|
||||
</Flex>
|
||||
Climate-focused nonprofits {region ? `in ${region.label}` : ""} on{' '}
|
||||
Climate-focused nonprofits {region ? `in ${region.label}` : ''} on{' '}
|
||||
<a sx={{ whiteSpace: 'nowrap' }}>Hack Club Bank</a>
|
||||
</Heading>
|
||||
<Box
|
||||
|
|
@ -860,11 +1030,21 @@ export default function ({ rawOrganizations, pageRegion }) {
|
|||
{organizations
|
||||
.map(org => new Organization(org))
|
||||
.filter(organization => {
|
||||
const organizationBadgeIds = badges.forOrg(organization).map(badge => badge.id);
|
||||
const organizationBadgeIds = badges
|
||||
.forOrg(organization)
|
||||
.map(badge => badge.id)
|
||||
|
||||
console.log({ currentBadges, organizationBadgeIds, organization });
|
||||
console.log({
|
||||
currentBadges,
|
||||
organizationBadgeIds,
|
||||
organization
|
||||
})
|
||||
|
||||
return currentBadges.length == badges.length || intersection(organizationBadgeIds, currentBadges).length == currentBadges.length;
|
||||
return (
|
||||
currentBadges.length === badges.length ||
|
||||
intersection(organizationBadgeIds, currentBadges).length ===
|
||||
currentBadges.length
|
||||
)
|
||||
})
|
||||
.map(organization => (
|
||||
<OrganizationCard
|
||||
|
|
@ -874,8 +1054,7 @@ export default function ({ rawOrganizations, pageRegion }) {
|
|||
badges={badges.forOrg(organization)}
|
||||
showTags={true}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Grid>
|
||||
|
|
@ -954,8 +1133,8 @@ export default function ({ rawOrganizations, pageRegion }) {
|
|||
}
|
||||
|
||||
/**
|
||||
* Represents an organization.
|
||||
*/
|
||||
* Represents an organization.
|
||||
*/
|
||||
export class Organization {
|
||||
/**
|
||||
* Creates an instance of Organization.
|
||||
|
|
@ -1136,7 +1315,7 @@ export async function fetchRawClimateOrganizations() {
|
|||
console.log('Fetching', page)
|
||||
const json = await fetch(
|
||||
'https://bank.hackclub.com/api/v3/directory/organizations?per_page=100&page=' +
|
||||
page
|
||||
page
|
||||
).then(res => res.json())
|
||||
lastLength = json.length
|
||||
page++
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue