Merge pull request #941 from SerenityUX/pizza

pizza grant slide

components/index/cards/pizza.js

@@ -0,0 +1,72 @@
+import CardModel from './card-model'
+import { Box, Button, Flex, Grid, Image, Text } from 'theme-ui'
+import Buttons from './button'
+
+/** @jsxImportSource theme-ui */
+
+export default function Pizza() {
+  return (
+    <CardModel
+      color="white"
+      sx={{
+        backgroundSize: 'cover',
+        backgroundColor: '#95C9E5',
+        border: "1px solid #EC3750"  // Corrected the color value here
+      }}
+      position={[null, 'bottom', 'bottom']}
+      highlight="#271932"
+      image="https://cloud-4f5ohtb3u-hack-club-bot.vercel.app/0subtlegrain.png"
+    >
+      <Grid columns={[1, 2]} sx={{ position: 'relative', alignItems: "center", zIndex: 2 }}>
+      <Box>
+      <Text
+          as="h3"
+          variant="title"
+          sx={{
+            fontSize: ['36px', 4, 5],
+            zIndex: 2,
+            color: "#000",
+            mb: "8px"
+          }}
+        >
+          Start A Hack Club <br/> Get <Text
+          sx={{
+            
+            background: ["linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)"],
+            WebkitBackgroundClip: "text",
+              WebkitTextStroke: 'currentColor',
+              WebkitTextFillColor: 'transparent',
+              
+            
+          }}
+          > $100 In Pizza</Text>
+        </Text>
+        
+
+        <Text as="p" variant="subtitle" sx={{ color: '#000', mb: 3 }}>
+          GitHub is providing $100 pizza grants to every teen who starts a Hack Club at their school. 
+        </Text>
+       
+        <Buttons id="14" link="/pizza" icon="welcome" primary="primary">
+            Get Your Pizza Grant
+          </Buttons>
+          </Box>
+          <Box>
+        <Flex
+          sx={{
+            flexDirection: 'column',
+            alignItems: 'end',
+            justifyContent: 'flex-end',
+            position: "relative"
+          }}
+        >
+          <Image alt="Group of teenage hackers enjoying GitHub Hack Club Pizza Grant" sx={{borderRadius: "16px",
+                  border: "1px solid #EC3750",
+          aspectRatio: "16/9", objectFit: "cover"}} src="https://cloud-8tc8qa1ew-hack-club-bot.vercel.app/0img_8975.jpg"/>
+          <Text sx={{color: "#000", backgroundColor: "#fff", left: "16px", bottom: "16px", padding: "6px 8px", borderRadius: "16px", position: "absolute"}}>Newton South HS Hack Club in Boston</Text>
+        </Flex>
+        </Box>
+      </Grid>
+    </CardModel>
+  )
+}

package.json

@@ -45,6 +45,7 @@
     "next-transpile-modules": "^10.0.1",
     "react": "^17.0.2",
     "react-before-after-slider-component": "^1.1.8",
+    "react-datepicker": "^4.18.0",
     "react-dom": "^17.0.2",
     "react-konami-code": "^2.3.0",
     "react-marquee-slider": "^1.1.5",

pages/api/steve.js

@@ -0,0 +1,54 @@
+export default async (req, res) => {
+    const calendarId = "c_e7c63a427761b0f300ede97f432ba4af24033daad26be86da0551b40b7968f00@group.calendar.google.com";
+    const apiKey = "AIzaSyD_8dEnTDle3WmaoOTvEW6L1GW540FU_wg"; // Replace with your API Key
+
+    let allBusyDays = new Set();
+
+    try {
+        const currentDateTime = new Date();
+        const adjustedDateTime = new Date(currentDateTime.getTime() + (currentDateTime.getTimezoneOffset() + 240) * 60 * 1000); // Adjust to GMT-04
+        const startTime = adjustedDateTime.toISOString();
+        const endTime = new Date(adjustedDateTime.getTime() + 30 * 24 * 60 * 60 * 1000).toISOString();
+
+        const response = await fetch(`https://www.googleapis.com/calendar/v3/freeBusy?key=${apiKey}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                timeMin: startTime,
+                timeMax: endTime,
+                items: [{ id: calendarId }]
+            })
+        });
+
+        const data = await response.json();
+
+        if (data.error) {
+            return res.status(400).json({ error: data.error.message });
+        }
+
+        // Assuming there are time ranges where the calendar is busy:
+        const busyTimes = data.calendars[calendarId].busy;
+
+        // For each busy time range, extract all days that are busy:
+        for (let busy of busyTimes) {
+            let startDate = new Date(busy.start);
+            let endDate = new Date(busy.end);
+
+            // Adjust dates to GMT-04
+            startDate = new Date(startDate.getTime() + (startDate.getTimezoneOffset() + 240) * 60 * 1000);
+            endDate = new Date(endDate.getTime() + (endDate.getTimezoneOffset() + 240) * 60 * 1000);
+
+            while (startDate < endDate) {
+                allBusyDays.add(startDate.toISOString().split('T')[0]);
+                startDate = new Date(startDate.getTime() + 24 * 60 * 60 * 1000); // Adding 24 hours for the next date
+            }
+        }
+
+        return res.status(200).json([...allBusyDays]);
+
+    } catch (error) {
+        return res.status(500).json({ error: "Failed to fetch busy times." });
+    }
+};

pages/index.js

@@ -19,7 +19,7 @@ import ForceTheme from '../components/force-theme'
 import Footer from '../components/footer'
 import Stage from '../components/stage'
 import Carousel from '../components/index/carousel'
-import Outernet from '../components/index/cards/outernet'
+import Pizza from '../components/index/cards/pizza'
 import Sprig from '../components/index/cards/sprig'
 import Sinerider from '../components/index/cards/sinerider'
 import SprigConsole from '../components/index/cards/sprig-console'
@@ -640,7 +640,7 @@ function Page({
                 and make things together!
               </Text>
             </Box>
-            <Outernet />
+            <Pizza />
             <Slack slackKey={slackKey} data={slackData} events={events} />
           </Box>
         </Box>

pages/steve.js

@@ -0,0 +1,367 @@
+import { Box, Link, Grid, Image, Container, Button, Heading, Text, Input, Checkbox } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import Nav from '../components/nav'
+import Tilt from '../components/tilt'
+import Ticker from 'react-ticker'
+import { useState, useEffect } from 'react'
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+
+const StevePage = () => {
+
+  const [startDate, setStartDate] = useState(null);
+  const [endDate, setEndDate] = useState(null);
+
+  const [disabledDates, setDisabledDates] = useState([]);
+
+  useEffect(() => {
+    // Fetch the disabled dates from the API endpoint when the component mounts
+    const fetchDisabledDates = async () => {
+      try {
+        const response = await fetch('/api/steve');
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+
+        const dateStrings = await response.json();
+        const dateObjects = dateStrings.map(dateStr => {
+            const date = new Date(Date.UTC(dateStr.substring(0, 4), dateStr.substring(5, 7) - 1, dateStr.substring(8, 10)));
+            date.setDate(date.getDate() + 1); // Add one day to the date
+            return date;
+        });
+        setDisabledDates(dateObjects);
+      } catch (error) {
+        console.error('Failed fetching disabled dates:', error);
+      }
+    };
+
+    fetchDisabledDates();
+}, []);
+
+
+
+
+
+
+
+
+
+  const isDateDisabled = (date) => {
+      return disabledDates.some(disabledDate => 
+          disabledDate.getTime() === date.getTime());
+  };
+
+const isSelectingDisabledRange = (start, end) => {
+    let currDate = new Date(start);
+    currDate.setHours(0, 0, 0, 0); // Normalize the time component
+
+    let normalizedEnd = new Date(end);
+    normalizedEnd.setHours(0, 0, 0, 0);
+
+    while (currDate <= normalizedEnd) {
+        if (isDateDisabled(currDate)) {
+            return true;
+        }
+        currDate.setDate(currDate.getDate() + 1);
+    }
+    return false;
+};
+
+
+
+const handleStartDateChange = (date) => {
+  if (!endDate || !isSelectingDisabledRange(date, endDate)) {
+      setStartDate(date);
+  } else {
+      setStartDate(date);
+      setEndDate(null); // Reset end date if the new range is invalid
+  }
+};
+
+const handleEndDateChange = (date) => {
+  if (!isSelectingDisabledRange(startDate, date)) {
+      setEndDate(date);
+  } // Do nothing if the range is invalid
+};
+    const images = ["https://cloud-p08od8km8-hack-club-bot.vercel.app/0image.png", "https://cloud-eqvtnimxq-hack-club-bot.vercel.app/0image.png", "https://cloud-r8j7lcawc-hack-club-bot.vercel.app/0image.png", "https://cloud-8f162hv3i-hack-club-bot.vercel.app/0image.png", "https://cloud-b7gqg2qpq-hack-club-bot.vercel.app/0image.png", "https://cloud-ik2jpfk0t-hack-club-bot.vercel.app/0mountains.png"]
+    const [selectedImage, setSelectedImages] = useState(0);
+
+  return (
+    <>
+      <Meta
+        as={Head}
+        title="A Home For You At Hack Club HQ"
+        description="We now have a free place for you to stay near Hack Club HQ! It's called Steve!"
+        image="https://cloud-pnaovvpuv-hack-club-bot.vercel.app/0image.png"
+      />
+      <ForceTheme theme="light" />
+      <Box
+        sx={{
+          background:
+            'linear-gradient(0deg, rgba(15, 33, 79, 0.00) 0%, rgba(15, 33, 79, 0.00) 100%), linear-gradient(180deg, #0F214F 0%, #8B412E 100%)',
+          imageRendering: 'pixelated',
+        }}
+      >
+        <Nav sx={{ backgroundColor: '#0F214F' }} />
+
+        <Heading
+          sx={{
+            marginTop: 0,
+            paddingTop: 96,
+            color: '#fff',
+            fontSize: 96,
+            textAlign: 'center',
+            lineHeight: 1
+          }}
+        >
+
+
+          Imagine a{' '}
+          <Text sx={{ color: '#F8E32E', fontFamily: 'billy' }}>home</Text> for
+          <br /> you to hack with friends
+        </Heading>
+        <Image
+        alt="Pixel art of Steve"
+          sx={{ width: '100%', marginTop: 48, imageRendering: 'pixelated' }}
+          src="https://cloud-85qd0afpz-hack-club-bot.vercel.app/0topheroart.png"
+        />
+      </Box>
+      <Box sx={{backgroundColor: "#8B412E"}}>
+        <Container sx={{paddingBottom: 32}}>
+        <Heading
+  sx={{
+    color: '#FFF',
+    fontFamily: 'Billy',
+    fontSize: 72,
+    fontStyle: 'normal',
+    fontWeight: 700,
+    paddingTop: 32,
+    paddingBottom: 32,
+    lineHeight: '100%', // 76px
+    textShadow: '6px 6px 0px #000, 6px -6px 0px #000, -6px 6px 0px #000, -6px -6px 0px #000',
+  }}
+>
+  Welcome To <Text style={{color: "#F8E32E"}}>Steve</Text>
+</Heading>
+
+<Grid
+      columns={[1, '1fr 1fr 1fr']} // Three columns in a row for smaller screens and larger screens
+      gap={"32px"} // Adjust the gap between items as needed
+    >
+              <Box
+        sx={{
+          backgroundColor: 'black',
+          color: 'white',
+          aspectRatio: 1, // Ensure a square aspect ratio
+          display: 'flex',
+          alignItems: 'center',
+          flexDirection: "column",
+          imageRendering: "pixelated",
+          gap: "32px",
+          justifyContent: 'center',
+          background: "url(https://cloud-h22j3ald8-hack-club-bot.vercel.app/0pixelbox.png)",
+          backgroundSize: "cover",
+          padding: 3, // Adjust padding as needed
+        }}
+      >
+        <Image alt="Free" style={{width: "104px", height: "104px", imageRendering: "pixelated"}} src="https://cloud-2ccduwqc9-hack-club-bot.vercel.app/0nomoney.png"/>
+        <Text sx={{color: "#fff", fontFamily: "billy", fontSize: 24, fontWeight: 600, textAlign: "center", lineHeight: 1.25}}>Stay At Steve<br/> For Free</Text>
+      </Box>
+      <Box
+        sx={{
+          backgroundColor: 'black',
+          color: 'white',
+          aspectRatio: 1, // Ensure a square aspect ratio
+          display: 'flex',
+          imageRendering: "pixelated",
+
+          alignItems: 'center',
+          flexDirection: "column",
+          gap: "32px",
+          justifyContent: 'center',
+          background: "url(https://cloud-h22j3ald8-hack-club-bot.vercel.app/0pixelbox.png)",
+          backgroundSize: "cover",
+          padding: 3, // Adjust padding as needed
+        }}
+      >
+        <Image alt="5min walk" style={{width: "104px", height: "104px", imageRendering: "pixelated"}} src="https://cloud-2c20hobub-hack-club-bot.vercel.app/05min_walk.png"/>
+        <Text sx={{color: "#fff", fontFamily: "billy", fontSize: 24, fontWeight: 600, textAlign: "center", lineHeight: 1.25}}>Walk to HQ<br/> in 5min</Text>
+      </Box>
+
+      <Box
+        sx={{
+          backgroundColor: 'black',
+          color: 'white',
+          aspectRatio: 1, // Ensure a square aspect ratio
+          display: 'flex',
+          imageRendering: "pixelated",
+
+          alignItems: 'center',
+          flexDirection: "column",
+          gap: "32px",
+          justifyContent: 'center',
+          background: "url(https://cloud-h22j3ald8-hack-club-bot.vercel.app/0pixelbox.png)",
+          backgroundSize: "cover",
+          padding: 3, // Adjust padding as needed
+        }}
+      >
+        <Image alt="friends building together" style={{width: "104px", height: "104px", imageRendering: "pixelated"}} src="https://cloud-hc1t198xx-hack-club-bot.vercel.app/0wefriends.png"/>
+        <Text sx={{color: "#fff", fontFamily: "billy", fontSize: 24, fontWeight: 600, textAlign: "center", lineHeight: 1.25}}>Collaborate on<br/> HQ Projects IRL</Text>
+      </Box>
+
+    </Grid>
+    <Box style={{marginTop: 48, display: "flex",  padding: 24, backgroundColor: "#91979C"}} columns={'3fr 1fr'}>
+        <Box style={{padding: "16px", backgroundColor: "#000"}}>
+    <Image alt="Image of Steve" width={"100%"} style={{height: "100%", aspectRatio: "16/9", objectFit: "cover"}} src={images[selectedImage]}/>
+    </Box>
+
+<Box style={{flexDirection: "column", alignItems: "center", width: "142px", padding: "24px 24px 24px 0px", backgroundColor: "#000", justifyContent: "space-between", display: "flex"}}>
+        {images.map((image, idx) => 
+        <Image key={idx} alt="" style={{display: idx == selectedImage ? ("flex") : ("flex"), cursor: "pointer", aspectRatio: "1", objectFit: "cover",opacity: idx != selectedImage ? (0.5) : (1)}} onClick={() => setSelectedImages(idx)} width={"96px"} height={"96px"} src={image}/>
+        )}
+</Box>
+    </Box>
+      {/* <Image src="https://cloud-qutaee770-hack-club-bot.vercel.app/0untitled__1_.gif" />
+      <Image src="https://cloud-qvzblkbvs-hack-club-bot.vercel.app/0ezgif-4-91825479d0.gif" />
+      <Image src="https://cloud-mltm380a0-hack-club-bot.vercel.app/13__1_.gif" />
+      <Image src="https://cloud-ecnni31d6-hack-club-bot.vercel.app/0ezgif-4-39f9efb85b.gif" />
+      <Image src="https://cloud-mltm380a0-hack-club-bot.vercel.app/35__1_.gif" /> */}
+      </Container>
+
+      <Image alt="" sx={{marginBottom: 0}} src="https://cloud-5sry4ilri-hack-club-bot.vercel.app/0dirtrow.png"/>
+      <Box style={{backgroundColor: "#000", marginTop: -8}}>
+      <Container sx={{marginTop: 0}}>
+      <Heading
+  sx={{
+    color: '#F8E32E',
+    fontFamily: 'Billy',
+    fontSize: 72,
+    fontStyle: 'normal',
+    fontWeight: 700,
+    paddingTop: 32,
+    paddingBottom: 32,
+    lineHeight: '100%', // 76px
+    textShadow: '6px 6px 0px #000, 6px -6px 0px #000, -6px 6px 0px #000, -6px -6px 0px #000',
+  }}
+>
+  Book Your Stay
+</Heading>
+<p style={{color: "#fff", marginBottom: 0}}>Coming Soon...</p>
+<Box style={{display: "flex", gap: "16px"}}>
+<Box>
+      <Box>
+        <Text sx={{fontFamily: "billy", color: "#fff", fontSize: 18}}>Name</Text>
+        <Input placeholder={"Marsha Mellow"} sx={{
+          backgroundColor: "#fff",
+          color: "#000"
+          }} />
+      </Box>
+      <Box>
+      <Text sx={{fontFamily: "billy", color: "#fff", fontSize: 18}}>What do you plan to work on?</Text>
+        <Input placeholder={"Marsha Mellow"} sx={{
+          backgroundColor: "#fff",
+          color: "#000"
+          }} />
+
+      </Box>
+      <Box>
+      <Text sx={{fontFamily: "billy", color: "#fff", fontSize: 18}}>Start Date</Text>
+      <DatePicker
+      
+                selected={startDate}
+                onChange={handleStartDateChange}
+                selectsStart
+                startDate={startDate}
+                endDate={endDate}
+                excludeDates={disabledDates}
+            />
+
+      </Box>
+      <Box>
+      <Text sx={{fontFamily: "billy", color: "#fff", fontSize: 18}}>End Date</Text>
+      <DatePicker
+      
+                selected={endDate}
+                onChange={handleEndDateChange}
+                selectsEnd
+                startDate={startDate}
+                endDate={endDate}
+                minDate={startDate}
+                excludeDates={disabledDates}
+            />
+      </Box>
+
+      </Box>
+<Box>
+  <Box>
+  <Text sx={{fontFamily: "billy", color: "#fff", fontSize: 18}}>Email</Text>
+        <Input placeholder={"Marsha Mellow"} sx={{
+          backgroundColor: "#fff",
+          color: "#000"
+          }} />
+  </Box>
+      <Box>
+
+      <Text sx={{fontFamily: "billy", color: "#fff", fontSize: 18}}>Check All That Apply <br/></Text>
+       <Box sx={{display: "flex", gap: "16px"}}> 
+        <Box>
+        <Box sx={{display: "flex"}}>
+          <Checkbox/>
+          <Text sx={{color: "#fff", marginRight: "0px"}}>Club Leader</Text>
+        </Box>
+        <Box sx={{display: "flex"}}>
+          <Checkbox/>
+          <Text sx={{color: "#fff", marginRight: "0px"}}>Hackathon Organizer</Text>
+        </Box>
+        </Box>
+        <Box>
+        <Box sx={{display: "flex"}}>
+          <Checkbox/>
+          <Text sx={{color: "#fff", marginRight: "0px"}}>Member Of The Slack</Text>
+        </Box>
+        <Box sx={{display: "flex"}}>
+          <Checkbox/>
+          <Text sx={{color: "#fff", marginRight: "0px"}}>Project Contributor</Text>
+        </Box>
+        </Box>
+        </Box>
+      </Box>
+      <Box>
+        <Button type="submit">Submit</Button>
+      </Box>
+      <Box>
+        
+      </Box>
+      </Box>
+      </Box>
+
+{/* 
+      <Box>
+        <Text>
+          <strong>Frequently Asked Questions</strong>
+        </Text>
+
+        <Text>What's Tracy House, Bank, and HQ?</Text>
+        <Text>What's the environment like at HQ?</Text>
+        <Text>What's are the sleeping arrangements?</Text>
+        <Text>How cold is it in the winter?</Text>
+        <Text>Where will I get food?</Text>
+        <Text>Who can stay at Steve?</Text>
+        <Text>How many people can stay at Steve?</Text>
+        <Text>How long can I stay at Steve?</Text>
+      </Box> */}
+      {/* <Box>
+        Have additional questions? Send us an email at{' '}
+        <Link href="mailto:steve@hackclub.com">steve@hackclub.com</Link>
+      </Box> */}
+      </Container>
+      </Box>
+            </Box>
+    </>
+  )
+}
+
+export default StevePage

yarn.lock

@@ -1218,6 +1218,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.21.0":
+  version "7.23.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.1.tgz#72741dc4d413338a91dcb044a86f3c0bc402646d"
+  integrity sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.12.13", "@babel/template@^7.12.7":
   version "7.12.13"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz"
@@ -1832,6 +1839,11 @@
     tiny-glob "^0.2.9"
     tslib "^2.4.0"
 
+"@popperjs/core@^2.11.8":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@rushstack/eslint-patch@^1.1.3":
   version "1.1.3"
   resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz"
@@ -2569,7 +2581,7 @@ chokidar@^3.4.0, chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
-classnames@^2.2.5:
+classnames@^2.2.5, classnames@^2.2.6:
   version "2.3.2"
   resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz"
   integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
@@ -2814,6 +2826,13 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+date-fns@^2.30.0:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
 debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
@@ -4308,7 +4327,7 @@ lodash@^4.17.19, lodash@^4.17.21:
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -4884,6 +4903,18 @@ react-before-after-slider-component@^1.1.8:
   resolved "https://registry.yarnpkg.com/react-before-after-slider-component/-/react-before-after-slider-component-1.1.8.tgz#3df14381703aaa43428cdac05f271b8b492d25ca"
   integrity sha512-KcY231f68+7bF0Zkfat55jvgNSSCB5TkBtm1HhLeb336jtQ0hYKkdq6VwrleNrfeVdUD2v+E7DzgNJYc6dsY3Q==
 
+react-datepicker@^4.18.0:
+  version "4.18.0"
+  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.18.0.tgz#d66301acc47833d31fa6f46f98781b084106da0e"
+  integrity sha512-0MYt3HmLbHVk1sw4v+RCbLAVg5TA3jWP7RyjZbo53PC+SEi+pjdgc92lB53ai/ENZaTOhbXmgni9GzvMrorMAw==
+  dependencies:
+    "@popperjs/core" "^2.11.8"
+    classnames "^2.2.6"
+    date-fns "^2.30.0"
+    prop-types "^15.7.2"
+    react-onclickoutside "^6.13.0"
+    react-popper "^2.3.0"
+
 react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
@@ -4893,6 +4924,11 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-fast-compare@^3.0.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
 react-fast-compare@^3.2.0:
   version "3.2.0"
   resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz"
@@ -4925,6 +4961,11 @@ react-masonry-css@^1.0.16:
   resolved "https://registry.npmjs.org/react-masonry-css/-/react-masonry-css-1.0.16.tgz"
   integrity sha512-KSW0hR2VQmltt/qAa3eXOctQDyOu7+ZBevtKgpNDSzT7k5LA/0XntNa9z9HKCdz3QlxmJHglTZ18e4sX4V8zZQ==
 
+react-onclickoutside@^6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz#e165ea4e5157f3da94f4376a3ab3e22a565f4ffc"
+  integrity sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==
+
 react-page-visibility@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/react-page-visibility/-/react-page-visibility-7.0.0.tgz"
@@ -4932,6 +4973,14 @@ react-page-visibility@^7.0.0:
   dependencies:
     prop-types "^15.7.2"
 
+react-popper@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
+  integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==
+  dependencies:
+    react-fast-compare "^3.0.1"
+    warning "^4.0.2"
+
 react-relative-time@^0.0.9:
   version "0.0.9"
   resolved "https://registry.yarnpkg.com/react-relative-time/-/react-relative-time-0.0.9.tgz#2fcbd7e9a74ee82ff0eac24bfbd26a7dc2998ccc"
@@ -5944,6 +5993,13 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
+warning@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 web-namespaces@^1.0.0:
   version "1.1.4"
   resolved "https://registry.npmjs.org/web-namespaces/-/web-namespaces-1.1.4.tgz"