more

package.json

@@ -11,11 +11,13 @@
     "spritesheet": "node scripts/buildSpritessheet.ts"
   },
   "dependencies": {
+    "@n8tb1t/use-scroll-position": "^2.0.3",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.7",
+    "@react-hooks-library/core": "^0.6.2",
     "@react-spring/three": "^9.7.3",
     "@react-spring/web": "^9.7.3",
     "@react-three/drei": "9.102.3",

public/sprites/spritesheet.json

@@ -1 +1 @@
-{"metadata":{"width":300,"height":300,"fullWidth":2400,"fullHeight":2100,"columns":8,"rows":7},"accelerometer":[0,0],"async-clipboard":[1,0],"audio":[0,1],"autofocus":[1,1],"auxclick":[2,0],"av1":[2,1],"background-attachment":[0,2],"background-sync":[1,2],"client-hints-dpr-width-viewport":[2,2],"colr-v1":[3,0],"cookie-store-api":[3,1],"createimagebitmap":[3,2],"css-container-queries-style":[0,3],"css-content-visibility":[1,3],"css-mixblendmode":[2,3],"css-overflow-anchor":[3,3],"css-paged-media":[4,0],"css-paint-api":[4,1],"css-resize":[4,2],"css-scrollbar":[4,3],"css-selection":[0,4],"css-text-wrap-balance":[1,4],"custom-elementsv1":[2,4],"fullscreen":[3,4],"gyroscope":[4,4],"http3":[5,0],"imagecapture":[5,1],"input-datetime":[5,2],"intersectionobserver-v2":[5,3],"link-icon-svg":[5,4],"link-rel-prefetch":[0,5],"link-rel-prerender":[1,5],"mediacapture-fromelement":[2,5],"mediasource":[3,5],"midi":[4,5],"missing-image":[5,5],"netinfo":[6,0],"notifications":[6,1],"ogg-vorbis":[6,2],"opus":[6,3],"orientation-sensor":[6,4],"permissions-policy":[6,5],"trusted-types":[0,6],"vibration":[1,6],"view-transitions":[2,6],"web-bluetooth":[3,6],"webcodecs":[4,6],"webnfc":[5,6],"webtransport":[6,6],"webusb":[7,0],"webxr":[7,1]}
+{"metadata":{"width":300,"height":300,"fullWidth":2400,"fullHeight":2400,"columns":8,"rows":8},"accelerometer":[0,0],"async-clipboard":[1,0],"audio":[0,1],"autofocus":[1,1],"auxclick":[2,0],"av1":[2,1],"background-attachment":[0,2],"background-sync":[1,2],"client-hints-dpr-width-viewport":[2,2],"colr-v1":[3,0],"cookie-store-api":[3,1],"createimagebitmap":[3,2],"css-container-queries-style":[0,3],"css-content-visibility":[1,3],"css-mixblendmode":[2,3],"css-overflow-anchor":[3,3],"css-paged-media":[4,0],"css-paint-api":[4,1],"css-resize":[4,2],"css-scrollbar":[4,3],"css-selection":[0,4],"css-text-wrap-balance":[1,4],"css3-cursors-grab":[2,4],"css3-cursors-newer":[3,4],"css3-cursors":[4,4],"custom-elementsv1":[5,0],"document-policy":[5,1],"fullscreen":[5,2],"gyroscope":[5,3],"http3":[5,4],"imagecapture":[0,5],"input-datetime":[1,5],"intersectionobserver-v2":[2,5],"link-icon-svg":[3,5],"link-rel-prefetch":[4,5],"link-rel-prerender":[5,5],"mediacapture-fromelement":[6,0],"mediasource":[6,1],"midi":[6,2],"missing-image":[6,3],"netinfo":[6,4],"notifications":[6,5],"ogg-vorbis":[0,6],"opus":[1,6],"orientation-sensor":[2,6],"permissions-policy":[3,6],"pointerlock":[4,6],"push-api":[5,6],"selection-api":[6,6],"srcset":[7,0],"trusted-types":[7,1],"vibration":[7,2],"view-transitions":[7,3],"web-bluetooth":[7,4],"webcodecs":[7,5],"webnfc":[7,6],"webtransport":[0,7],"webusb":[1,7],"webxr":[2,7]}

src/app/page.tsx

@@ -10,10 +10,11 @@ import { Links } from '../components/links';
 import { Drawer } from '../components/drawer';
 import { useEffect } from 'react';
 import Bowser from 'bowser';
-import { DrawerContents } from '../components/drawerContents';
 import { verticalViewWidth } from '../utils/constants';
 import { Search } from '../components/search';
 import Features from '../components/features';
+import { ErrorModal } from '../components/errorModal';
+import { Filter } from '../components/filter';
 
 const DesktopFeaturesDiv = styled.div`
   text-align: left;
@@ -125,6 +126,7 @@ export default function Home() {
   if (width && width < verticalViewWidth) {
     return (
       <CanIUseContextProvider>
+        <ErrorModal />
         <MobileCanvasDiv>
           <Canvas flat camera={cameraMobile} style={{ touchAction: 'none' }}>
             <Experience />
@@ -135,15 +137,25 @@ export default function Home() {
         </LinksDiv>
         <Drawer
           height={[openHeight, closedHeight]}
-          content={<DrawerContents />}
+          content={
+            <div
+              style={{
+                padding: '0px 30px 20px',
+                textAlign: 'left',
+              }}
+            >
+              <Features />
+            </div>
+          }
           footer={
             <div
               style={{
-                padding: '20px 25px',
+                padding: '13px 25px 20px',
                 borderTop: '1px solid var(--modalHr)',
               }}
             >
-              {/* <Filter /> */}
+              <Filter />
+              <div style={{ height: 8 }} />
               <Search />
             </div>
           }
@@ -155,6 +167,7 @@ export default function Home() {
   // Horizontal View
   return (
     <CanIUseContextProvider>
+      <ErrorModal />
       <DesktopCanvasDiv style={{ position: isFirefox ? 'fixed' : 'sticky' }}>
         <div
           style={{

src/components/badge.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Span = styled.span`
+  height: 28px;
+  border-radius: 20px;
+  font-size: 0.7rem;
+  width: 5.25ch;
+  text-align: center;
+  line-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  transition: 0.2s;
+  background: var(--badgeBgNonActive);
+  color: var(--badgeColorNonActive);
+  border: 1px solid var(--badgeBorderNonActive);
+  &.active {
+    background: var(--badgeBg);
+    color: var(--badgeColor);
+    border: 1px solid var(--badgeBorder);
+  }
+`;
+
+export const Badge = ({
+  active = false,
+  children,
+  style,
+}: {
+  active?: boolean;
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+}) => {
+  return (
+    <Span className={active ? 'active' : ''} style={style || {}}>
+      {children}
+    </Span>
+  );
+};