Display map when button clicked

mauriciabad · Mar 19, 2024 · 873bd00 · 873bd00
1 parent dc56ae2
commit 873bd00
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 8 deletions.
diff --git a/src/app/[locale]/(app)/explore/_components/main-map-or-placeholder.tsx b/src/app/[locale]/(app)/explore/_components/main-map-or-placeholder.tsx
@@ -0,0 +1,93 @@
+'use client'
+
+import { Button } from '@nextui-org/react'
+import { IconMap } from '@tabler/icons-react'
+import { ClassValue } from 'clsx'
+import { FC, useState } from 'react'
+import { MainMap } from '~/components/map/main-map'
+import { cn } from '~/helpers/cn'
+
+export const MainMapOrPlaceholder: FC<{
+  className?: string
+  classNames?: {
+    controls?: string
+    expanded?: ClassValue
+    collapsed?: ClassValue
+  }
+}> = ({ className, classNames }) => {
+  const [showingMap, setShowingMap] = useState<boolean>(false)
+
+  return showingMap ? (
+    <MainMap
+      className={cn(className, classNames?.expanded)}
+      classNames={classNames}
+    />
+  ) : (
+    <div
+      className={cn(
+        'relative cursor-pointer',
+        'flex items-center justify-center',
+        'bg-gradient-to-r from-[#add19f] from-50%  to-[#aad3df] to-50%',
+        className,
+        classNames?.collapsed
+      )}
+      onClick={() => setShowingMap(true)}
+    >
+      <MapPlaceholderImg className="absolute inset-0 z-0 mx-auto h-full" />
+      <Button
+        onPress={() => setShowingMap(true)}
+        variant="faded"
+        size="lg"
+        startContent={<IconMap />}
+      >
+        Show map
+      </Button>
+    </div>
+  )
+}
+
+const MapPlaceholderImg: FC<{
+  className?: string
+}> = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="528"
+    height="768"
+    fill="none"
+    viewBox="0 0 528 768"
+    className={className}
+  >
+    <path
+      fill="#ADD19F"
+      d="M191.021 0c0 5.848 17.05 23.39 16.563 30.7-.487 7.31-7.795 2.437-8.769 10.721-.974 8.285-8.768 33.137 4.384 37.036 13.153 3.898 19.486.487 19.973-8.772.487-9.259 3.897-6.822 5.359-6.822 1.461 0 9.255 6.822 14.614 6.822s9.743-4.873 13.64-3.41c3.897 1.461 2.923 5.36 5.846 5.36 2.922 0 6.333-1.95 9.743-1.95s2.922 2.924 4.384 2.924c1.461 0 6.333-6.335 14.614-6.335s24.357-3.898 30.203-4.386c5.845-.487 17.05 21.442 23.382 25.828 6.333 4.386 8.769-3.899 10.23-5.36 1.462-1.463 11.692 7.796 8.282 12.67-3.41 4.873 15.588 26.314 19.485 28.263 3.897 1.95 19.486 9.259 24.845 8.285 5.358-.975 3.41-8.285 8.281-8.285s3.897 11.208 7.307 12.183c3.41.975 5.846-2.436 8.769 0 2.922 2.437-1.462 13.157-2.436 14.619-.974 1.462-7.307 3.412-7.794 5.361-.488 1.949 1.948 10.721 4.384 11.208 2.436.487 11.691 2.924 12.178 14.619.488 11.696.975 10.234-.974 10.721-1.948.487-5.358-2.437-7.794-2.437s-17.05 5.848-17.05 9.259c0 3.411 2.436 6.823 0 11.208-2.436 4.386-23.87.975-26.793 4.386-2.923 3.411 23.87 20.955 25.331 23.391 1.462 2.437-.487 6.335 1.462 7.31 1.948.974 4.871-7.31 9.256-4.873 4.384 2.436 1.461 4.385 3.41 6.335 1.948 1.949 2.435-.488 4.384 1.949 1.948 2.436-1.949 12.67-4.384 15.594-2.436 2.924-14.127 4.386-9.743 9.746s2.436 1.949 9.743 3.898c7.307 1.95 13.152 12.671 17.537 12.671 4.384 0 3.41-9.747 3.41-16.569 0-6.822 3.41-9.259 4.384-13.157.974-3.899 4.384-13.158 7.307-12.183 2.923.975 0 8.284 0 10.233 0 1.95 4.871 4.386 3.897 14.132-.974 9.747-2.923 11.696-2.923 14.62 0 2.924 2.923 4.873 2.923 10.72 0 5.848-3.41 8.285-5.846 8.285-2.435 0-4.384-6.335-8.768-5.361-4.384.975-9.256 14.132-9.743 17.056-.487 2.924 1.949 4.386.974 6.823-.974 2.436-24.844 21.928-25.331 31.187-.487 9.259 22.896 18.518 22.896 23.879 0 5.36-8.282 14.132-7.307 21.441.974 7.31 30.202 14.132 29.715 25.34-.487 11.208-33.125 28.752-39.458 29.239-6.333.487-12.666-1.462-16.563-1.462-3.897 0-14.614 8.771-14.127 11.695.487 2.924 7.794 5.848 7.307 8.285-.487 2.436-11.204-.975-12.666 2.436-1.461 3.411-4.871 19.005-7.794 21.929-2.923 2.924-3.897.975-8.281 1.949-4.385.975-88.66 46.295-89.634 57.016-.974 10.72 2.923 11.695 3.897 12.182.974.488 6.82 1.462 6.82 5.848s-8.281 16.081-8.281 18.03c0 1.95-3.41 9.747-4.872 15.107-1.461 5.36-1.461 7.31-7.307 7.31s-11.691-2.437-12.666 0c-.974 2.436 3.41 6.335 3.41 8.771 0 2.437-10.717 1.95-11.204 5.361-.487 3.411-9.255 8.771-7.307 12.67 1.949 3.898 17.537 1.949 19.486 8.771 1.948 6.823-4.385 23.878 1.948 25.34 6.333 1.462 16.563-4.385 16.563-6.822 0-2.436-.974-7.797 3.897-12.183 4.872-4.385 9.743-9.746 13.64-6.335 3.118 2.729-2.923 17.543-1.948 18.518.974.975 12.957-10.623 14.127-8.284 1.461 2.924-2.923 13.157-4.872 14.132-1.948.974-19.485 10.233-18.511 11.695.974 1.462 7.307-2.924 9.256 0 1.948 2.924-9.256 20.467-9.256 21.442 0 .974 17.537-12.183 20.46-9.259 2.923 2.924-20.947 24.365-23.87 25.34-2.923.975-23.87 4.386-24.357 10.721-.487 6.335-5.359 10.233-4.872 13.645.488 3.411 3.41 5.847 4.872 5.847 1.461 0 16.563.488 21.434 1.949 4.871 1.462 7.307 8.285 7.307 10.234H0V0h191.021Z"
+    />
+    <path
+      fill="#AAD3DF"
+      d="M191 0c0 5.848 17.057 23.39 16.569 30.7-.487 7.31-7.797 2.437-8.772 10.721-.974 8.285-8.772 33.137 4.386 37.036 13.158 3.898 19.494.487 19.981-8.772.487-9.259 3.899-6.822 5.361-6.822 1.462 0 9.259 6.822 14.62 6.822 5.36 0 9.746-4.873 13.645-3.41 3.899 1.461 2.924 5.36 5.848 5.36s6.335-1.95 9.746-1.95c3.412 0 2.924 2.924 4.386 2.924 1.462 0 6.336-6.335 14.62-6.335 8.285 0 24.367-3.898 30.215-4.386 5.848-.487 17.057 21.442 23.392 25.828 6.335 4.386 8.772-3.899 10.234-5.36 1.462-1.463 11.696 7.796 8.285 12.67-3.412 4.873 15.594 26.314 19.493 28.263 3.899 1.95 19.493 9.259 24.854 8.285 5.361-.975 3.411-8.285 8.285-8.285 4.873 0 3.898 11.208 7.31 12.183 3.411.975 5.848-2.436 8.772 0 2.924 2.437-1.462 13.157-2.437 14.619-.975 1.462-7.31 3.412-7.797 5.361-.488 1.949 1.949 10.721 4.386 11.208 2.436.487 11.696 2.924 12.183 14.619.487 11.696.974 10.234-.975 10.721-1.949.487-5.36-2.437-7.797-2.437-2.437 0-17.057 5.848-17.057 9.259 0 3.411 2.437 6.823 0 11.208-2.436 4.386-23.879.975-26.803 4.386-2.924 3.411 23.879 20.955 25.341 23.391 1.462 2.437-.487 6.335 1.462 7.31 1.95.974 4.874-7.31 9.26-4.873 4.386 2.436 1.462 4.385 3.411 6.335 1.949 1.949 2.437-.488 4.386 1.949 1.949 2.436-1.949 12.67-4.386 15.594-2.437 2.924-14.133 4.386-9.747 9.746 4.386 5.36 2.437 1.949 9.747 3.898 7.31 1.95 13.158 12.671 17.544 12.671 4.386 0 3.411-9.747 3.411-16.569 0-6.822 3.411-9.259 4.386-13.157.975-3.899 4.386-13.158 7.31-12.183 2.924.975 0 8.284 0 10.233 0 1.95 4.873 4.386 3.899 14.132-.975 9.747-2.924 11.696-2.924 14.62 0 2.924 2.924 4.873 2.924 10.72 0 5.848-3.412 8.285-5.848 8.285-2.437 0-4.386-6.335-8.772-5.361-4.386.975-9.26 14.132-9.747 17.056-.487 2.924 1.949 4.386.975 6.823-.975 2.436-24.854 21.928-25.341 31.187-.488 9.259 22.904 18.518 22.904 23.879 0 5.36-8.284 14.132-7.31 21.441.975 7.31 30.215 14.132 29.727 25.34-.487 11.208-33.138 28.752-39.473 29.239-6.336.487-12.671-1.462-16.57-1.462-3.898 0-14.62 8.771-14.132 11.695.487 2.924 7.797 5.848 7.31 8.285-.488 2.436-11.209-.975-12.671 2.436-1.462 3.411-4.873 19.005-7.797 21.929-2.924 2.924-3.899.975-8.285 1.949-4.386.975-88.695 46.295-89.669 57.016-.975 10.72 2.924 11.695 3.898 12.182.975.488 6.823 1.462 6.823 5.848s-8.285 16.081-8.285 18.03c0 1.95-3.411 9.747-4.873 15.107-1.462 5.36-1.462 7.31-7.31 7.31s-11.696-2.437-12.67 0c-.975 2.436 3.411 6.335 3.411 8.771 0 2.437-10.721 1.95-11.209 5.361-.487 3.411-9.259 8.771-7.31 12.67 1.95 3.898 17.544 1.949 19.494 8.771 1.949 6.823-4.386 23.878 1.949 25.34 6.335 1.462 16.569-4.385 16.569-6.822 0-2.436-.975-7.797 3.899-12.183 4.873-4.385 9.746-9.746 13.645-6.335 3.119 2.729-2.924 17.543-1.949 18.518.974.975 12.963-10.623 14.132-8.284 1.462 2.924-2.924 13.157-4.873 14.132-1.949.974-19.493 10.233-18.519 11.695.975 1.462 7.31-2.924 9.26 0 1.949 2.924-9.26 20.467-9.26 21.442 0 .974 17.544-12.183 20.468-9.259 2.924 2.924-20.955 24.365-23.879 25.34-2.924.975-23.879 4.386-24.366 10.721-.488 6.335-5.361 10.233-4.874 13.645.488 3.411 3.412 5.847 4.874 5.847 1.462 0 16.569.488 21.442 1.949 4.873 1.462 7.31 8.285 7.31 10.234H528V0H191Z"
+    />
+    <path
+      stroke="#97789D"
+      stroke-width="2"
+      d="M191 0c0 5.848 17.051 23.39 16.564 30.7-.487 7.31-7.795 2.437-8.769 10.721-.975 8.285-8.769 33.137 4.384 37.036 13.154 3.898 19.488.487 19.975-8.772.487-9.259 3.897-6.822 5.359-6.822 1.461 0 9.256 6.822 14.615 6.822s9.744-4.873 13.641-3.41c3.898 1.461 2.923 5.36 5.846 5.36s6.334-1.95 9.744-1.95 2.923 2.924 4.384 2.924c1.462 0 6.334-6.335 14.616-6.335s24.359-3.898 30.205-4.386c5.846-.487 17.051 21.442 23.384 25.828 6.334 4.386 8.77-3.899 10.231-5.36 1.462-1.463 11.692 7.796 8.282 12.67-3.41 4.873 15.59 26.314 19.487 28.263 3.898 1.95 19.487 9.259 24.846 8.285 5.359-.975 3.411-8.285 8.282-8.285 4.872 0 3.898 11.208 7.308 12.183 3.41.975 5.846-2.436 8.769 0 2.923 2.437-1.461 13.157-2.436 14.619-.974 1.462-7.307 3.412-7.794 5.361-.488 1.949 1.948 10.721 4.384 11.208 2.436.487 11.692 2.924 12.18 14.619.487 11.696.974 10.234-.975 10.721-1.948.487-5.359-2.437-7.795-2.437-2.435 0-17.051 5.848-17.051 9.259 0 3.411 2.436 6.823 0 11.208-2.436 4.386-23.872.975-26.795 4.386-2.923 3.411 23.872 20.955 25.334 23.391 1.461 2.437-.488 6.335 1.461 7.31 1.949.974 4.872-7.31 9.257-4.873 4.384 2.436 1.461 4.385 3.41 6.335 1.949 1.949 2.436-.488 4.384 1.949 1.949 2.436-1.948 12.67-4.384 15.594-2.436 2.924-14.128 4.386-9.744 9.746 4.385 5.36 2.436 1.949 9.744 3.898 7.307 1.95 13.154 12.671 17.538 12.671 4.385 0 3.41-9.747 3.41-16.569 0-6.822 3.411-9.259 4.385-13.157.974-3.899 4.385-13.158 7.308-12.183 2.923.975 0 8.284 0 10.233 0 1.95 4.872 4.386 3.897 14.132-.974 9.747-2.923 11.696-2.923 14.62 0 2.924 2.923 4.873 2.923 10.72 0 5.848-3.41 8.285-5.846 8.285s-4.385-6.335-8.769-5.361c-4.385.975-9.257 14.132-9.744 17.056-.487 2.924 1.949 4.386.975 6.823-.975 2.436-24.846 21.928-25.334 31.187-.487 9.259 22.898 18.518 22.898 23.879 0 5.36-8.282 14.131-7.308 21.441.974 7.31 30.205 14.132 29.718 25.34-.487 11.208-33.128 28.752-39.462 29.239-6.333.487-12.666-1.462-16.564-1.462-3.897 0-14.615 8.771-14.128 11.695.487 2.924 7.795 5.848 7.308 8.285-.487 2.436-11.205-.975-12.667 2.436-1.461 3.411-4.872 19.005-7.795 21.929-2.923 2.924-3.897.975-8.282 1.949-4.384.975-88.666 46.295-89.64 57.016-.975 10.72 2.923 11.695 3.897 12.182.974.488 6.82 1.462 6.82 5.848s-8.282 16.081-8.282 18.03c0 1.95-3.41 9.747-4.871 15.107-1.462 5.36-1.462 7.31-7.308 7.31s-11.692-2.437-12.667 0c-.974 2.436 3.411 6.335 3.411 8.771 0 2.437-10.718 1.949-11.205 5.361-.488 3.411-9.257 8.771-7.308 12.67 1.949 3.898 17.538 1.949 19.487 8.771 1.949 6.823-4.385 23.878 1.949 25.34 6.333 1.462 16.564-4.385 16.564-6.822 0-2.436-.975-7.797 3.897-12.183 4.872-4.385 9.744-9.746 13.641-6.335 3.118 2.729-2.923 17.543-1.949 18.518.975.975 12.959-10.623 14.129-8.284 1.461 2.924-2.923 13.157-4.872 14.132-1.949.974-19.487 10.233-18.513 11.695.974 1.462 7.308-2.924 9.256 0 1.949 2.924-9.256 20.467-9.256 21.442 0 .974 17.538-12.183 20.462-9.259 2.923 2.924-20.949 24.365-23.872 25.34-2.923.975-23.872 4.386-24.359 10.721-.487 6.335-5.359 10.233-4.872 13.645.487 3.411 3.41 5.847 4.872 5.847 1.461 0 16.564.488 21.436 1.949 4.872 1.462 7.307 8.285 7.307 10.234"
+    />
+    <path
+      fill="#ADD19F"
+      d="M263.5 306c-30.1 0-54.5 24.4-54.5 54.5h109c0-30.1-24.4-54.5-54.5-54.5Z"
+    />
+    <path
+      stroke="#8FAF82"
+      stroke-width="4"
+      d="M318 360.5c0-30.1-24.4-54.5-54.5-54.5S209 330.4 209 360.5"
+    />
+    <path
+      fill="#EAD6B3"
+      stroke="#706654"
+      d="M229 290h4v4h4v4h4v-4h4v-4h4v4h4v4h4v-4h4v-4h4v4h4v4h4v-4h4v-4h4v4h4v4h4v-4h4v-4h4v4h4v4h4v26l-42 5-42-5v-26h4v-4h4v-4Z"
+    />
+    <path
+      stroke="#8FAF82"
+      stroke-width="4"
+      d="M306 323.887c-9.989 2.508-25.316 4.113-42.5 4.113-17.768 0-33.551-1.716-43.5-4.372"
+    />
+  </svg>
+)
diff --git a/src/app/[locale]/(app)/explore/layout.tsx b/src/app/[locale]/(app)/explore/layout.tsx
@@ -1,10 +1,9 @@
 import { unstable_setRequestLocale } from 'next-intl/server'
 import type { FC, PropsWithChildren } from 'react'
-import { MainMap } from '~/components/map/main-map'
 import { MainMapProvider } from '~/components/providers/main-map-provider'
-import { cn } from '~/helpers/cn'
 import { parseLocale, type LocaleRouteParams } from '~/i18n'
 import { ExploreTopbar } from './_components/explore-topbar'
+import { MainMapOrPlaceholder } from './_components/main-map-or-placeholder'
 import { MapDrawer } from './_components/map-drawer'
 
 type ExploreLayoutProps = PropsWithChildren<LocaleRouteParams>
@@ -19,14 +18,15 @@ const ExploreLayout: FC<ExploreLayoutProps> = async ({ params, children }) => {
 
       <main className="relative flex grow flex-col">
         <MainMapProvider>
-          <MainMap
-            className={cn(
-              'min-h-[calc(100dvh_-_65px_-_57px_-_57px)]',
-              'sticky top-16 grow',
-              '-mb-2 box-content pb-2'
-            )}
+          <MainMapOrPlaceholder
+            className="-mb-2 box-content pb-2"
             classNames={{
               controls: 'bottom-6',
+              expanded: [
+                'min-h-[calc(100dvh_-_65px_-_57px_-_57px)]',
+                'sticky top-16 grow',
+              ],
+              collapsed: 'h-48',
             }}
           />