diff --git a/components/bank/directory/card.js b/components/bank/directory/card.js index 4bbb4a69..aed59e50 100644 --- a/components/bank/directory/card.js +++ b/components/bank/directory/card.js @@ -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 ? ( - - . - -) : ( - - - -) +export const Badge = ({ badge }) => + badge.image ? ( + + . + + ) : ( + + + + ) 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 +}) => ( openModal(organization)} diff --git a/components/bank/landing.js b/components/bank/landing.js index be448f75..2c34e098 100644 --- a/components/bank/landing.js +++ b/components/bank/landing.js @@ -200,4 +200,4 @@ function Vignette() { }} > ) -} \ No newline at end of file +} diff --git a/components/sparkles/money.js b/components/sparkles/money.js index eca24ca8..46404316 100644 --- a/components/sparkles/money.js +++ b/components/sparkles/money.js @@ -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 ( - + diff --git a/pages/bank/climate/[region].js b/pages/bank/climate/[region].js index b12ac68a..a4db8aef 100644 --- a/pages/bank/climate/[region].js +++ b/pages/bank/climate/[region].js @@ -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 + return ( + + ) } 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 + } } diff --git a/pages/bank/climate/index.js b/pages/bank/climate/index.js index d81723c7..12c39549 100644 --- a/pages/bank/climate/index.js +++ b/pages/bank/climate/index.js @@ -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' }} > - + { color: !currentRegion ? 'red' : 'black', ':hover': { color: 'blue' - }, + } }} > All @@ -373,7 +384,11 @@ const RegionPanel = ({ currentRegion, mobile }) => { {regions?.map((item, idx) => ( - + { 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 ( -
+
{modalOrganization && ( - { - e.stopPropagation(); + e.stopPropagation() }} > - - - - {modalOrganization.name} + + + {`${modalOrganization.name}'s + + {modalOrganization.name} + {/* Badges */} - - + {tags.forOrg(modalOrganization).map((tag, i) => ( - - + {/* info & buttons */} - - {modalOrganization.branding.description} + + + {modalOrganization.branding.description} + {/* mobile stats */} - - {modalOrganization.location.country} - {modalOrganization.location.continent} + + + {modalOrganization.location.country} + + + {modalOrganization.location.continent} + - - + + - Website - + + Website + + - + - Transparent Finances - + + Transparent Finances + + {/* desktop stats */} - + - {modalOrganization.location.country} - Country + + {modalOrganization.location.country} + + + Country + - {modalOrganization.location.continent} - Continent + + {modalOrganization.location.continent} + + + Continent + - - - All donations are tax-deductible. + + All donations are tax-deductible. + )} - {!modalOrganization && ( -