🚀 BUILD STUPID S#!T, GET STUPID PRIZES!

Co-authored-by: Samuel Fernandez <[email protected]>
Co-authored-by: Rhys  <[email protected]>
Co-authored-by: BrightTheBackpack <[email protected]>
Co-authored-by: Sam Poder <[email protected]>

components/IndexCard.js

@@ -0,0 +1,16 @@
+import { Box, Heading} from "theme-ui";
+
+export default function IndexCard({ title, children, url}) {
+    return (
+        <Box
+        sx={{
+            p: 4,
+            borderRadius: 4,
+            boxShadow: '0 0 8px rgba(0, 0, 0, 0.125)',
+            bg: 'white',
+        }}>
+        <Heading as='h2'>{title}</Heading>
+        {children}
+        </Box>
+    )
+}

components/Map.js

@@ -0,0 +1,85 @@
+import { useState, useEffect } from 'react'
+import { Box } from 'theme-ui'
+import { IndexCard } from './IndexCard'
+import {
+  MapContainer,
+  TileLayer,
+  Marker,
+  Popup,
+  ZoomControl,
+  Tooltip,
+} from 'react-leaflet'
+import 'leaflet/dist/leaflet.css'
+import L from 'leaflet'
+
+const starIcon = new L.Icon({
+  iconUrl: `/elements/star-sticker.svg`,
+  iconAnchor: null,
+  popupAnchor: null,
+  shadowUrl: null,
+  shadowSize: null,
+  shadowAnchor: null,
+  iconSize: new L.Point(60, 60),
+  popupAnchor: [0, 0]
+})
+//placeholder icon
+const pinIcon = new L.Icon({
+    iconUrl: `/elements/sticky-note.svg`,
+    iconAnchor: null,
+    popupAnchor: null,
+    shadowUrl: null,
+    shadowSize: null,
+    shadowAnchor: null,
+    iconSize: new L.Point(20, 20),
+    popupAnchor: [0, 0]
+})
+const StyledMapContainer = MapContainer;
+
+export default function Map({full}) {
+  const [center, setCenter] = useState(
+    window.innerWidth > 767.98 ? [35.683, -25.099] : [55, -100]
+  )
+  const [events, setEvents] = useState([
+    { name: 'Flagship', location: "Los Angeles", lat: 34.0522, lng: -118.2437, description: "yada yada yada", flagship: true },
+    { name: 'Flagship', location: "New York", lat: 40.7128, lng: -74.0060, description: "yada yada yada" },
+]);    
+
+  const bounds = [
+    [-85, -Infinity],
+    [85, Infinity]
+  ];
+
+  return (
+    <>
+      <StyledMapContainer
+        center={center}
+        maxBounds={bounds}
+        maxBoundsViscosity={1.0}
+        zoom={2.5}
+        minZoom={1}
+        style={{ width: full ? '80vw' : '80%', height: full ? '100vh' : '100vh', zIndex: 0 }}
+        worldCopyJump={true}
+        zoomControl={!full}
+      >
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        {events.map((event, idx) => (
+          <Marker
+            position={[event.lat, event.lng]}
+            key={idx}
+            icon={event.flagship ? starIcon : pinIcon}
+          >
+        {/* <Popup className="custom-popup" style={{ position: 'absolute', top: '10px', right: '10px', transform: 'none' }}>
+              {event.description}
+            </Popup> */}
+            <Tooltip>{event.name}</Tooltip>
+          </Marker>
+        ))}
+        {full && <ZoomControl position="topright" />}
+      </StyledMapContainer>
+
+    </>
+  )
+}

lib/theme.js

@@ -1,5 +1,15 @@
 import theme from "@hackclub/theme";
 
+theme.fonts.heading = "moonblossom";
+theme.fonts.body = "p22-stanyan";
 
+theme.config.initialColorModeName = "light";
+theme.config.useColorSchemeMediaQuery = false;
+
+theme.colors.primary = "#337D78"
+theme.colors.red = "#F1A3BA"
+theme.colors.blue = "#91CCF4"
+theme.colors.yellow = "#F3D24F"
+theme.styles.a.color = theme.colors.primary
 
 export default theme;

package.json

@@ -17,9 +17,11 @@
     "@mdx-js/loader": "^2.2.1",
     "@mdx-js/react": "^2.1.1",
     "@next/mdx": "^13.1.1",
+    "leaflet": "^1.9.4",
     "next": "^13.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-leaflet": "^4.0.0",
     "theme-ui": "0.15.4"
   }
 }

pages/_app.js

@@ -4,6 +4,7 @@ import NextApp from 'next/app'
 // import '@hackclub/theme/fonts/reg-bold.css'
 import theme from '../lib/theme'
 import { ThemeProvider } from 'theme-ui'
+import '../styles/globals.css'
 
 export default class App extends NextApp {
   render() {