Partially migrate search.

assets/js/react/components/Button.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import clsx from "clsx"
+import { Button as BaseButton, ButtonProps } from "@mui/base/Button"
+
+export const Button = React.forwardRef<
+  HTMLButtonElement,
+  ButtonProps & { invert?: boolean; href?: string }
+>(function Button(props, ref) {
+  const { invert, className, href, ...other } = props
+
+  const button = (
+    <BaseButton
+      ref={ref}
+      className={clsx(
+        "cursor-pointer rounded-lg px-4 py-1.5 text-sm font-semibold transition disabled:cursor-not-allowed disabled:opacity-50",
+        invert
+          ? "bg-white text-neutral-950 hover:bg-neutral-200"
+          : "bg-neutral-950 text-white hover:bg-neutral-800",
+        className
+      )}
+      {...other}
+    />
+  )
+
+  if (href === undefined) {
+    return button
+  }
+
+  return <a href={href}>{button}</a>
+})

assets/js/react/components/CaptionImage.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+
+interface CaptionImageProps {
+  title?: string
+  subtitle?: string
+  src: string
+}
+
+export function CaptionImage({ title, subtitle, src }: CaptionImageProps) {
+  return (
+    <div className="group relative h-96 overflow-hidden rounded-3xl bg-neutral-100">
+      <img
+        alt=""
+        src={src}
+        className="h-full w-full object-cover transition duration-500 motion-safe:group-hover:scale-105"
+      />
+      <div className="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black to-black/0 to-40% p-6">
+        {title && (
+          <p className="font-display text-base/6 font-semibold tracking-wide text-white">
+            {title}
+          </p>
+        )}
+        {subtitle && <p className="mt-2 text-sm text-white">{subtitle}</p>}
+      </div>
+    </div>
+  )
+}

assets/js/react/components/FadeIn.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+import { motion, useReducedMotion } from "framer-motion"
+
+const FadeInStaggerContext = React.createContext(false)
+
+const viewport = { once: true, margin: "0px 0px -200px" }
+
+export function FadeIn({ ...props }) {
+  let shouldReduceMotion = useReducedMotion()
+  let isInStaggerGroup = React.useContext(FadeInStaggerContext)
+
+  return (
+    <motion.div
+      variants={{
+        hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 24 },
+        visible: { opacity: 1, y: 0 },
+      }}
+      transition={{ duration: 0.5 }}
+      {...(isInStaggerGroup
+        ? {}
+        : {
+            initial: "hidden",
+            whileInView: "visible",
+            viewport,
+          })}
+      {...props}
+    />
+  )
+}
+
+export function FadeInStagger({ faster = false, ...props }) {
+  return (
+    <FadeInStaggerContext.Provider value={true}>
+      <motion.div
+        initial="hidden"
+        whileInView="visible"
+        viewport={viewport}
+        transition={{ staggerChildren: faster ? 0.12 : 0.2 }}
+        {...props}
+      />
+    </FadeInStaggerContext.Provider>
+  )
+}

assets/js/react/components/FallbackMessage.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import clsx from "clsx"
+
+import { FadeIn } from "./FadeIn"
+
+export type FallbackMessageProps = React.ComponentPropsWithoutRef<"div"> & {
+  title: string
+  body: string
+}
+
+export const FallbackMessage = React.forwardRef(function FallbackMessage(
+  props: FallbackMessageProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const { title, body, className, ...other } = props
+  return (
+    <FadeIn
+      ref={ref}
+      className={clsx("flex flex-col items-center text-center", className)}
+      {...other}
+    >
+      <h1 className="font-display text-2xl font-semibold text-neutral-950">
+        {title}
+      </h1>
+      <p className="mt-2 text-sm text-neutral-600">{body}</p>
+    </FadeIn>
+  )
+})

assets/js/react/components/FilterScroll.tsx

@@ -0,0 +1,118 @@
+import * as React from "react"
+import clsx from "clsx"
+
+import type { Query } from "../types/Query"
+
+import FilterIcon from "../icons/Filter"
+import RightArrowIcon from "../icons/RightArrow"
+import RisingGraphIcon from "../icons/RisingGraph"
+import { Button } from "./Button"
+
+interface FilterOption {
+  title: string
+  Icon: ({ ...props }: { [x: string]: any }) => React.JSX.Element
+  enable: (q: Query) => Query
+  isEnabled: (q: Query) => boolean
+}
+
+const filters: FilterOption[] = [
+  {
+    title: "FIDE 2000+",
+    Icon: RisingGraphIcon,
+    enable: (q) => {
+      q.fideRating[0] = Math.max(2000, q.fideRating[0])
+      return q
+    },
+    isEnabled: (q) => q.fideRating[0] >= 2000,
+  },
+]
+
+enum Direction {
+  LEFT,
+  RIGHT,
+}
+
+interface FilterScrollProps {
+  query: Query
+  onModal: () => void
+  onEnable: (q: Query) => void
+}
+
+export function FilterScroll({ query, onModal, onEnable }: FilterScrollProps) {
+  const viewport = React.useRef<HTMLDivElement>(null)
+  const [isFlush, setIsFlush] = React.useState([true, false])
+
+  const scrollDir = (dir: Direction) => {
+    const v = viewport.current
+    if (!v) {
+      return
+    }
+    const delta = v.clientWidth / 2
+    const left = v.scrollLeft + (dir == Direction.RIGHT ? delta : -delta)
+    v.scroll({ left, behavior: "smooth" })
+
+    const isFlushLeft = left <= 1
+    const isFlushRight = left + v.clientWidth >= v.scrollWidth
+    setIsFlush([isFlushLeft, isFlushRight])
+  }
+
+  return (
+    <div className="flex items-center gap-x-8">
+      <div className="relative flex overflow-hidden">
+        <div
+          ref={viewport}
+          className="flex items-center gap-x-12 overflow-hidden"
+        >
+          {[...filters].map((e) => (
+            <div
+              key={e.title}
+              className={clsx("flex-none cursor-pointer text-center", {
+                "fill-amber-500 text-amber-500": e.isEnabled(query),
+              })}
+              onClick={() => onEnable(e.enable({ ...query }))}
+            >
+              <e.Icon className="mx-auto h-6 w-6" />
+              <span className="text-xs">{e.title}</span>
+            </div>
+          ))}
+        </div>
+        <div
+          className={clsx(
+            "pointer-events-none absolute top-1/2 -translate-y-1/2 bg-gradient-to-r from-white to-transparent to-90% py-4 pr-60",
+            isFlush[0] ? "hidden" : ""
+          )}
+        >
+          <Button
+            className="pointer-events-auto rounded-full border border-neutral-900 py-4"
+            onClick={() => {
+              scrollDir(Direction.LEFT)
+            }}
+            invert
+          >
+            <RightArrowIcon className="h-3 w-3 rotate-180 fill-white" />
+          </Button>
+        </div>
+        <div
+          className={clsx(
+            "pointer-events-none absolute right-0 top-1/2 -translate-y-1/2 bg-gradient-to-r from-transparent from-10% to-white py-4 pl-60",
+            isFlush[1] ? "hidden" : ""
+          )}
+        >
+          <Button
+            className="pointer-events-auto rounded-full border border-neutral-900 py-4"
+            onClick={() => {
+              scrollDir(Direction.RIGHT)
+            }}
+            invert
+          >
+            <RightArrowIcon className="h-3 w-3 fill-white" />
+          </Button>
+        </div>
+      </div>
+      <Button className="flex gap-x-2 py-4" onClick={onModal}>
+        <FilterIcon className="h-6 w-6 fill-white" />
+        <span className="font-display">Filter</span>
+      </Button>
+    </div>
+  )
+}

assets/js/react/components/Loading.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+
+import LogoMark from "../icons/LogoMark"
+
+function Fallback() {
+  return (
+    <div className="flex items-center justify-center p-8">
+      <LogoMark size={30} className="animate-[spin_2.5s_linear_infinite]" />
+      <span className="sr-only">Loading...</span>
+    </div>
+  )
+}
+
+type LoadingProps = React.ComponentPropsWithoutRef<"div"> & {
+  loading: boolean
+}
+
+export const Loading = React.forwardRef<HTMLDivElement, LoadingProps>(
+  function Loading(props, ref) {
+    const { loading, children, ...other } = props
+    return (
+      <div ref={ref} {...other}>
+        {loading ? <Fallback /> : children}
+      </div>
+    )
+  }
+)

assets/js/react/components/Logo.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import clsx from "clsx"
 
-import LogoMark from "../icons/Logomark"
+import LogoMark from "../icons/LogoMark"
 
 export function Logo({
   invert = false,

assets/js/react/icons/Filter.tsx

@@ -0,0 +1,14 @@
+import * as React from "react"
+
+const SvgComponent = ({ ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlSpace="preserve"
+    viewBox="0 0 32 32"
+    {...props}
+  >
+    <path d="M8 9.142V4H6v5.142c-1.72.447-3 2-3 3.858s1.28 3.411 3 3.858v10.096h2V16.858c1.72-.447 3-2 3-3.858S9.72 9.589 8 9.142zM7 15a2 2 0 1 1-.001-3.999A2 2 0 0 1 7 15zm10 1.142V4h-2v12.142c-1.72.447-3 2-3 3.858s1.28 3.411 3 3.858v3.096h2v-3.096c1.72-.447 3-2 3-3.858s-1.28-3.411-3-3.858zM16 22a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 22zm13-6c0-1.858-1.28-3.411-3-3.858V4h-2v8.142c-1.72.447-3 2-3 3.858s1.28 3.411 3 3.858v7.096h2v-7.096c1.72-.447 3-2 3-3.858zm-4 2a2 2 0 1 1-.001-3.999A2 2 0 0 1 25 18z" />
+  </svg>
+)
+
+export default SvgComponent

assets/js/react/icons/RightArrow.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const SvgComponent = ({ ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style={{
+      fill: "none",
+      stroke: "currentcolor",
+      strokeWidth: "5.33333px",
+      overflow: "visible",
+    }}
+    viewBox="0 0 32 32"
+    {...props}
+  >
+    <path d="m12 4 11.3 11.3a1 1 0 0 1 0 1.4L12 28" />
+  </svg>
+)
+
+export default SvgComponent

assets/js/react/icons/RisingGraph.tsx

@@ -0,0 +1,15 @@
+import * as React from "react"
+
+const SvgComponent = ({ ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlSpace="preserve"
+    stroke="currentColor"
+    viewBox="0 0 512 512"
+    {...props}
+  >
+    <path d="M0 477.031h512v8H0zM112.688 387.016v60.75h78.625v-79.844c-25.516 7.75-51.735 14.219-78.625 19.094zM8.688 397.906v49.859h78.625v-56.734c-25.719 3.688-51.954 6-78.625 6.875zM216.438 359.719v88.047h79.125V326.5c-25.329 12.609-51.75 23.719-79.125 33.219zM320.313 313.5v134.266h79.375V261.547c-24.813 19.062-51.344 36.437-79.375 51.953zM424.25 241.672v206.094h79.5V158.953c-23.359 29.828-50.031 57.516-79.5 82.719zM413.078 57.688l27.656 23.172C352.953 190.391 185.391 329.125 0 349.766v22.141c183.875-6.5 381.109-132.453 483.547-255.172L512 140.563V26.969l-98.922 30.719z" />
+  </svg>
+)
+
+export default SvgComponent

assets/js/react/pages/Search.tsx

@@ -0,0 +1,63 @@
+import * as React from "react"
+
+import type { Query } from "../types/Query"
+
+import { CaptionImage } from "../components/CaptionImage"
+import { Container } from "../components/Container"
+import { FadeIn, FadeInStagger } from "../components/FadeIn"
+import { FallbackMessage } from "../components/FallbackMessage"
+import { FilterScroll } from "../components/FilterScroll"
+import { Loading } from "../components/Loading"
+
+const FIDE_RATING_MIN = 1500
+const FIDE_RATING_MAX = 3200
+
+interface Coach {
+  id: string
+  imageUrl: string
+  name: string
+  title: string
+  slug: string
+}
+
+const defaultQuery: Query = {
+  fideRating: [FIDE_RATING_MIN, FIDE_RATING_MAX],
+}
+
+export function Search() {
+  const [query, setQuery] = React.useState<Query>(defaultQuery)
+  const [loading, setLoading] = React.useState(true)
+  const [coaches, setCoaches] = React.useState<Coach[]>([])
+
+  return (
+    <Container className="pt-8">
+      <FilterScroll query={query} onEnable={setQuery} onModal={() => {}} />
+      <Loading
+        className={loading || coaches.length === 0 ? "mt-40" : "mt-10"}
+        loading={loading}
+      >
+        {coaches.length > 0 ? (
+          <FadeInStagger
+            className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+            faster
+          >
+            {coaches.map((coach, index) => (
+              <FadeIn key={index} className="flex cursor-pointer flex-col">
+                <CaptionImage
+                  title={coach.name}
+                  subtitle={coach.title || undefined}
+                  src={coach.imageUrl}
+                />
+              </FadeIn>
+            ))}
+          </FadeInStagger>
+        ) : (
+          <FallbackMessage
+            title="Coming Soon"
+            body="Full search functionality will be added soon! Please come back later."
+          />
+        )}
+      </Loading>
+    </Container>
+  )
+}

assets/js/react/router.tsx

@@ -1,9 +1,11 @@
 import * as React from "react"
 import { createBrowserRouter } from "react-router-dom"
 
+import { Search } from "./pages/Search"
+
 export const router = createBrowserRouter([
   {
     path: "/",
-    element: <div />,
+    element: <Search />,
   },
 ])

assets/js/react/types/Query.ts

@@ -0,0 +1,3 @@
+export type Query = {
+  fideRating: [number, number]
+}

assets/package-lock.json

@@ -8,6 +8,7 @@
       "name": "boardwise",
       "version": "0.1.0",
       "dependencies": {
+        "@mui/base": "^5.0.0-beta.25",
         "clsx": "^2.0.0",
         "framer-motion": "^10.16.12",
         "react": "^18.2.0",
@@ -43,6 +44,17 @@
     "node_modules/.pnpm/scheduler@0.23.0": {
       "extraneous": true
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz",
+      "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@emotion/is-prop-valid": {
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
@@ -58,6 +70,120 @@
       "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
       "optional": true
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.1.tgz",
+      "integrity": "sha512-QgcKYwzcc8vvZ4n/5uklchy8KVdjJwcOeI+HnnTNclJjs2nYsy23DOCf+sSV1kBwD9yDAoVKCkv/gEPzgQU3Pw==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "dependencies": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.4.tgz",
+      "integrity": "sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+    },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.25",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.25.tgz",
+      "integrity": "sha512-Iiv+IcappRRv6IBlknIVmLkXxfp51NEX1+l9f+dIbBuPU4PaRULegr1lCeHKsC45KU5ruxM5xMg4R/de03aJQg==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.4",
+        "@floating-ui/react-dom": "^2.0.4",
+        "@mui/types": "^7.2.10",
+        "@mui/utils": "^5.14.19",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.10",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.10.tgz",
+      "integrity": "sha512-wX1vbDC+lzF7FlhT6A3ffRZgEoKWPF8VqRoTu4lZwouFX2t90KyCMsgepMw5DxLak1BSp/KP86CmtZttikb/gQ==",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.14.19",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.19.tgz",
+      "integrity": "sha512-qAHvTXzk7basbyqPvhgWqN6JbmI2wLB/mf97GkSlz5c76MiKYV6Ffjvw9BjKZQ1YRb8rDX9kgdjRezOcoB91oQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.4",
+        "@types/prop-types": "^15.7.11",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.1.tgz",
@@ -75,14 +201,13 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.11",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
-      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
+      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
-      "dev": true
     },
     "node_modules/@types/react": {
       "version": "18.2.40",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.40.tgz",
       "integrity": "sha512-H+BUhb9C1zBtogDLAk+KCNRKiHDrqSwQT/0z0PVTwMFBxqg3011ByLomADtgkgMkfwj4AMOiXBReyLTUBg681g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -123,7 +248,7 @@
       "version": "0.16.8",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
       "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/clsx": {
       "version": "2.0.0",
@@ -137,7 +262,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/framer-motion": {
       "version": "10.16.12",
@@ -178,6 +303,29 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -201,6 +349,11 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
     "node_modules/react-router": {
       "version": "6.20.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.1.tgz",
@@ -231,6 +384,11 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+    },
     "node_modules/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -246,6 +404,14 @@
     }
   },
   "dependencies": {
+    "@babel/runtime": {
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz",
+      "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==",
+      "requires": {
+        "regenerator-runtime": "^0.14.0"
+      }
+    },
     "@emotion/is-prop-valid": {
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
@@ -261,6 +427,72 @@
       "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
       "optional": true
     },
+    "@floating-ui/core": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.1.tgz",
+      "integrity": "sha512-QgcKYwzcc8vvZ4n/5uklchy8KVdjJwcOeI+HnnTNclJjs2nYsy23DOCf+sSV1kBwD9yDAoVKCkv/gEPzgQU3Pw==",
+      "requires": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "requires": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "@floating-ui/react-dom": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.4.tgz",
+      "integrity": "sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==",
+      "requires": {
+        "@floating-ui/dom": "^1.5.1"
+      }
+    },
+    "@floating-ui/utils": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+    },
+    "@mui/base": {
+      "version": "5.0.0-beta.25",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.25.tgz",
+      "integrity": "sha512-Iiv+IcappRRv6IBlknIVmLkXxfp51NEX1+l9f+dIbBuPU4PaRULegr1lCeHKsC45KU5ruxM5xMg4R/de03aJQg==",
+      "requires": {
+        "@babel/runtime": "^7.23.4",
+        "@floating-ui/react-dom": "^2.0.4",
+        "@mui/types": "^7.2.10",
+        "@mui/utils": "^5.14.19",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/types": {
+      "version": "7.2.10",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.10.tgz",
+      "integrity": "sha512-wX1vbDC+lzF7FlhT6A3ffRZgEoKWPF8VqRoTu4lZwouFX2t90KyCMsgepMw5DxLak1BSp/KP86CmtZttikb/gQ==",
+      "requires": {}
+    },
+    "@mui/utils": {
+      "version": "5.14.19",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.19.tgz",
+      "integrity": "sha512-qAHvTXzk7basbyqPvhgWqN6JbmI2wLB/mf97GkSlz5c76MiKYV6Ffjvw9BjKZQ1YRb8rDX9kgdjRezOcoB91oQ==",
+      "requires": {
+        "@babel/runtime": "^7.23.4",
+        "@types/prop-types": "^15.7.11",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      }
+    },
+    "@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
+    },
     "@remix-run/router": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.1.tgz",
@@ -275,14 +507,13 @@
     "@types/prop-types": {
       "version": "15.7.11",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
-      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
+      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
-      "dev": true
     },
     "@types/react": {
       "version": "18.2.40",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.40.tgz",
       "integrity": "sha512-H+BUhb9C1zBtogDLAk+KCNRKiHDrqSwQT/0z0PVTwMFBxqg3011ByLomADtgkgMkfwj4AMOiXBReyLTUBg681g==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -323,7 +554,7 @@
       "version": "0.16.8",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
       "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
-      "dev": true
+      "devOptional": true
     },
     "clsx": {
       "version": "2.0.0",
@@ -334,7 +565,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
-      "dev": true
+      "devOptional": true
     },
     "framer-motion": {
       "version": "10.16.12",
@@ -358,6 +589,28 @@
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+    },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -375,6 +628,11 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
     "react-router": {
       "version": "6.20.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.1.tgz",
@@ -392,6 +650,11 @@
         "react-router": "6.20.1"
       }
     },
+    "regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+    },
     "scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",

assets/package.json

@@ -2,6 +2,7 @@
   "name": "boardwise",
   "version": "0.1.0",
   "dependencies": {
+    "@mui/base": "^5.0.0-beta.25",
     "clsx": "^2.0.0",
     "framer-motion": "^10.16.12",
     "react": "^18.2.0",