diff --git a/src/components/Careers/Pizza/index.tsx b/src/components/Careers/Pizza/index.tsx index 46a1c7895064..ec44b7a2f4e8 100644 --- a/src/components/Careers/Pizza/index.tsx +++ b/src/components/Careers/Pizza/index.tsx @@ -1,344 +1,500 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect } from 'react' import { graphql, useStaticQuery } from 'gatsby' import { GatsbyImage, getImage } from 'gatsby-plugin-image' import slugify from 'slugify' import { Link } from 'gatsby' import { StickerPineapple, StickerPineappleYes, StickerPineappleNo } from 'components/Stickers/Index' -import { Swiper, SwiperSlide } from 'swiper/react'; -import { Navigation, Pagination, A11y } from 'swiper/modules'; -import 'swiper/css'; -import 'swiper/css/pagination'; -import { StaticImage } from 'gatsby-plugin-image' +import { Swiper, SwiperSlide } from 'swiper/react' +import { Navigation, Pagination, A11y } from 'swiper/modules' +import 'swiper/css' +import 'swiper/css/pagination' import { IconChevronDown } from '@posthog/icons' +import CloudinaryImage from 'components/CloudinaryImage' interface FullscreenModalProps { - image: { image: React.ReactNode; pineapple: boolean }; - onClose: () => void; + image: { image: React.ReactNode; pineapple: boolean } + onClose: () => void } const FullscreenModal: React.FC = ({ image, onClose }) => { - return ( -
-
e.stopPropagation()}> - {image.image} -
- -
- ); -}; - + return ( +
+
e.stopPropagation()}> + {image.image} +
+ +
+ ) +} const pizzaImages = [ - { image: , pineapple: false }, - { image: , pineapple: true }, - { image: , pineapple: true }, - { image: , pineapple: false }, - { image: , pineapple: false }, - { image: , pineapple: false }, - { image: , pineapple: true }, - { image: , pineapple: false }, - { image: , pineapple: false }, - { image: , pineapple: true }, - { image: , pineapple: false }, - { image: , pineapple: false }, - { image: , pineapple: false }, - { image: , pineapple: false }, - { image: , pineapple: false }, - { image: , pineapple: true }, -]; + { + image: ( + + ), + pineapple: false, + }, + { + image: ( + + ), + pineapple: true, + }, + { + image: ( + + ), + pineapple: true, + }, + { + image: ( + + ), + pineapple: false, + }, + { + image: ( + + ), + pineapple: false, + }, + { + image: ( + + ), + pineapple: false, + }, + { + image: ( + + ), + pineapple: true, + }, + { + image: ( + + ), + pineapple: false, + }, + { + image: ( + + ), + pineapple: false, + }, + { + image: ( + + ), + pineapple: true, + }, + { + image: ( + + ), + pineapple: false, + }, + { + image: ( + + ), + pineapple: false, + }, + { + image: ( + + ), + pineapple: false, + }, + { + image: ( + + ), + pineapple: false, + }, + { + image: ( + + ), + pineapple: false, + }, + { + image: ( + + ), + pineapple: true, + }, +] const PizzaBox = ({ children }: { children: React.ReactNode }) => { - return ( -
- {children} -
- ) + return ( +
+ {children} +
+ ) } export const Pizza = () => { - const [activeIndex, setActiveIndex] = useState(null); + const [activeIndex, setActiveIndex] = useState(null) - const [filter, setFilter] = useState('All'); - const [filteredImages, setFilteredImages] = useState(pizzaImages); + const [filter, setFilter] = useState('All') + const [filteredImages, setFilteredImages] = useState(pizzaImages) - useEffect(() => { - let filtered = pizzaImages; - if (filter === 'Pineapple') { - filtered = pizzaImages.filter(img => img.pineapple); - } else if (filter === 'No pineapple') { - filtered = pizzaImages.filter(img => !img.pineapple); - } - setFilteredImages(filtered); - }, [filter]); + useEffect(() => { + let filtered = pizzaImages + if (filter === 'Pineapple') { + filtered = pizzaImages.filter((img) => img.pineapple) + } else if (filter === 'No pineapple') { + filtered = pizzaImages.filter((img) => !img.pineapple) + } + setFilteredImages(filtered) + }, [filter]) - const openFullscreen = (index: number) => { - setActiveIndex(index); - }; + const openFullscreen = (index: number) => { + setActiveIndex(index) + } - const closeFullscreen = () => { - setActiveIndex(null); - }; + const closeFullscreen = () => { + setActiveIndex(null) + } - const { allTeams } = useStaticQuery(graphql` - { - allTeams: allSqueakTeam(filter: { name: { ne: "Hedgehogs" }, miniCrest: { publicId: { ne: null } } }) { - nodes { - id - name - miniCrest { - gatsbyImageData(width: 40, height: 40) - } - profiles { - data { - attributes { - pineappleOnPizza - } + const { allTeams } = useStaticQuery(graphql` + { + allTeams: allSqueakTeam(filter: { name: { ne: "Hedgehogs" }, miniCrest: { publicId: { ne: null } } }) { + nodes { + id + name + miniCrest { + gatsbyImageData(width: 40, height: 40) + } + profiles { + data { + attributes { + pineappleOnPizza + } + } + } + } } - } } - } - } - `) + `) - const teamsWithPineapplePercentage = allTeams.nodes.map(team => { - const teamLength = team.profiles?.data?.length || 0 - const pineappleLovers = team.profiles?.data?.filter( - ({ attributes }) => attributes.pineappleOnPizza - ).length || 0 - const percentage = teamLength > 0 ? (pineappleLovers / teamLength) * 100 : 0 - - return { - name: team.name, - pineapplePercentage: percentage.toFixed(1) - } - }) + const teamsWithPineapplePercentage = allTeams.nodes.map((team) => { + const teamLength = team.profiles?.data?.length || 0 + const pineappleLovers = team.profiles?.data?.filter(({ attributes }) => attributes.pineappleOnPizza).length || 0 + const percentage = teamLength > 0 ? (pineappleLovers / teamLength) * 100 : 0 - const groupedTeams = { - moreThan50: [], - exactly50: [], - lessThan50: [] - } + return { + name: team.name, + pineapplePercentage: percentage.toFixed(1), + } + }) - teamsWithPineapplePercentage.forEach(team => { - const percentage = parseFloat(team.pineapplePercentage) - if (percentage > 50) { - groupedTeams.moreThan50.push(team) - } else if (percentage === 50) { - groupedTeams.exactly50.push(team) - } else { - groupedTeams.lessThan50.push(team) + const groupedTeams = { + moreThan50: [], + exactly50: [], + lessThan50: [], } - }) - // Sort teams within each group by percentage (highest to lowest) - Object.keys(groupedTeams).forEach(key => { - groupedTeams[key].sort((a, b) => parseFloat(b.pineapplePercentage) - parseFloat(a.pineapplePercentage)) - }) + teamsWithPineapplePercentage.forEach((team) => { + const percentage = parseFloat(team.pineapplePercentage) + if (percentage > 50) { + groupedTeams.moreThan50.push(team) + } else if (percentage === 50) { + groupedTeams.exactly50.push(team) + } else { + groupedTeams.lessThan50.push(team) + } + }) - return ( -
-
-
Speaking of small teams...
-

- - Pineapple on pizza: a house divided -

-
-

- Our small teams meet up in various places around the world. Pizza is often involved. Pineapple on the pizza is optional contentious. Choose your team wisely. -

-
-
+ // Sort teams within each group by percentage (highest to lowest) + Object.keys(groupedTeams).forEach((key) => { + groupedTeams[key].sort((a, b) => parseFloat(b.pineapplePercentage) - parseFloat(a.pineapplePercentage)) + }) -
-
-
- -

Small teams who correctly agree pineapple belongs on pizza

-
+ return ( +
+
+
Speaking of small teams...
+

+ + Pineapple on pizza:{' '} + + a house divided + +

+
+

+ Our small teams meet up in various places around the world. Pizza is often involved. Pineapple + on the pizza is optional contentious. Choose your team wisely. +

+
+
-
    - {groupedTeams.moreThan50.map(team => { - const teamData = allTeams.nodes.find(node => node.name === team.name) - const teamMiniCrest = getImage(teamData.miniCrest) - return ( -
  • -
    - {teamMiniCrest && ( - - )} -
    - {team.name} -
    -
    -
    -
    - {Math.round(team.pineapplePercentage)}% -
    +
    +
    +
    + +

    + Small teams who correctly agree pineapple belongs on + pizza +

    -
    -
    • - ) - })} -
-
-
-
- -

Small teams who don't believe pineapple belongs on pizza

-
-
    - {groupedTeams.lessThan50.map(team => { - const teamData = allTeams.nodes.find(node => node.name === team.name) - const teamMiniCrest = getImage(teamData.miniCrest) - return ( -
  • -
    - {teamMiniCrest && ( - - )} -
    - {team.name} -
    -
    -
    -
    - {Math.round(team.pineapplePercentage)}% -
    +
      + {groupedTeams.moreThan50.map((team) => { + const teamData = allTeams.nodes.find((node) => node.name === team.name) + const teamMiniCrest = getImage(teamData.miniCrest) + return ( +
    • +
      + {teamMiniCrest && ( + + )} +
      + + {team.name} + +
      +
      +
      +
      + + {Math.round(team.pineapplePercentage)}% + +
      +
      +
      +
      • + ) + })} +
    +
    +
    +
    + +

    + Small teams who don't believe pineapple belongs on pizza +

    -
    -
    • - ) - })} -
-
-
- -

Small teams who are split on pineapple on pizza

-
+
    + {groupedTeams.lessThan50.map((team) => { + const teamData = allTeams.nodes.find((node) => node.name === team.name) + const teamMiniCrest = getImage(teamData.miniCrest) + return ( +
  • +
    + {teamMiniCrest && ( + + )} +
    + + {team.name} + +
    +
    +
    +
    + + {Math.round(team.pineapplePercentage)}% + +
    +
    +
    +
    • + ) + })} +
-
    - {groupedTeams.exactly50.map(team => { - const teamData = allTeams.nodes.find(node => node.name === team.name) - const teamMiniCrest = getImage(teamData.miniCrest) - return ( -
  • -
    - {teamMiniCrest && ( - - )} -
    - {team.name} -
    -
    -
    -
    - {Math.round(team.pineapplePercentage)}% +
    +
    + +

    + Small teams who are split on pineapple on pizza +

    -
    + +
      + {groupedTeams.exactly50.map((team) => { + const teamData = allTeams.nodes.find((node) => node.name === team.name) + const teamMiniCrest = getImage(teamData.miniCrest) + return ( +
    • +
      + {teamMiniCrest && ( + + )} +
      + + {team.name} + +
      +
      +
      +
      + + {Math.round(team.pineapplePercentage)}% + +
      +
      +
      +
      • + ) + })} +
    +

    (You could break the tie!)

    -
    • - ) - })} -
-

(You could break the tie!)

-
-
-
+
+
-

Speaking of pizza...

-
Here are some of our creations.
+

Speaking of pizza...

+
Here are some of our creations.
-
- {['All', 'Pineapple', 'No pineapple'].map((option) => ( - - ))} -
+
+ {['All', 'Pineapple', 'No pineapple'].map((option) => ( + + ))} +
- - {filteredImages.map((image, index) => ( - -
openFullscreen(index)} + - -
- {image.image} -
- -
- - ))} - - - + {filteredImages.map((image, index) => ( + +
openFullscreen(index)} + > + +
{image.image}
+ +
+ + ))} + + + - {activeIndex !== null && ( - - )} - - ) + {activeIndex !== null && } + + ) }