Merge branch 'main' into map-placeholder

mauriciabad · Mar 23, 2024 · 177db17 · 177db17
2 parents 5d26cac + 7b887f3
commit 177db17
Show file tree

Hide file tree

Showing 29 changed files with 616 additions and 229 deletions.
diff --git a/public/images/404-map-original.jpeg b/public/images/404-map-original.jpeg
diff --git a/public/images/404-map.png b/public/images/404-map.png
diff --git a/src/app/[locale]/(app)/explore/_components/back-link.tsx b/src/app/[locale]/(app)/explore/_components/back-link.tsx
@@ -8,12 +8,12 @@ import { Link, usePathname } from '~/navigation'
 export const BackLink: FC = () => {
   const t = useTranslations('explore')
   const pathname = usePathname()
-  if (pathname !== '/explore/') return null
+  if (pathname === '/explore') return null
 
   return (
     <Link href="/explore" className="flex h-full self-stretch">
       <IconArrowLeft size={24} />
-      <span className="ml-2">{t('back-to-map')}</span>
+      <span className="ml-2">{t('back')}</span>
     </Link>
   )
 }
diff --git a/src/app/[locale]/(app)/explore/_components/links-to-categories-modal.tsx b/src/app/[locale]/(app)/explore/_components/links-to-categories-modal.tsx
@@ -13,12 +13,14 @@ import {
 import { useTranslations } from 'next-intl'
 import { FC } from 'react'
 import { PlaceMarker } from '~/components/generic/place-marker'
+import { cn } from '~/helpers/cn'
 import { Link } from '~/navigation'
 import { CategoryGroupListItem } from './list-category-groups'
 
 export const LinksToCategoriesModal: FC<{
   group: CategoryGroupListItem
-}> = ({ group }) => {
+  className?: string
+}> = ({ group, className }) => {
   const t = useTranslations('explore')
   const { isOpen, onOpen, onOpenChange } = useDisclosure()
 
@@ -32,7 +34,7 @@ export const LinksToCategoriesModal: FC<{
         variant="bordered"
         radius="full"
         onClick={onOpen}
-        className="mx-auto flex"
+        className={cn('mx-auto flex', className)}
       >
         {t('see-all-categories')}
       </Button>

diff --git a/src/app/[locale]/(app)/explore/_components/list-category-groups.tsx b/src/app/[locale]/(app)/explore/_components/list-category-groups.tsx
@@ -75,7 +75,7 @@ export const ListCategoryGroups: FC<{
         })}
       </ul>
 
-      <LinksToCategoriesModal group={group} />
+      <LinksToCategoriesModal group={group} className="mb-8" />
     </>
   )
 }

diff --git a/src/app/[locale]/(app)/explore/places/[placeId]/_components/place-details.tsx b/src/app/[locale]/(app)/explore/places/[placeId]/_components/place-details.tsx
@@ -5,6 +5,7 @@ import { CategoryTagList } from '~/components/category-tags/category-tag-list'
 import { IconTitle } from '~/components/generic/icon-title'
 import { MarkdownContent } from '~/components/generic/markdown-content'
 import { OptimizedImage } from '~/components/generic/optimized-image'
+import { ShareButton } from '~/components/generic/share-button'
 import { ApiRouterOutput } from '~/server/api/router'
 import { FeaturesBlock } from '../../../../../../../components/features/features-block'
 import { VisitMissionsAcordion } from '../../../../missions/_components/visit-missions-acordion'
@@ -21,8 +22,17 @@ export const PlaceDetails: FC<{
   const t = useTranslations('explore')
 
   return (
-    <div className="mt-2 px-4">
-      <h2 className="font-title text-xl font-semibold">{place.name}</h2>
+    <div className="mt-4 px-4">
+      <div className="mb-2 flex">
+        <h2 className="grow font-title text-xl font-semibold">{place.name}</h2>
+        <ShareButton
+          data={{
+            title: `${place.name} | Begur Secret`,
+            url: `/explore/places/${place.id}`,
+            text: place.description ?? undefined,
+          }}
+        />
+      </div>
 
       {place.description && (
         <p className="text-stone-800">{place.description}</p>
@@ -38,44 +48,45 @@ export const PlaceDetails: FC<{
         className="mt-4"
       />
 
-      {place.images && place.images.length >= 1 ? (
-        <div className="mt-4 grid grid-cols-[2fr_1fr] grid-rows-2 gap-2">
-          <OptimizedImage
-            radius="lg"
-            shadow="sm"
-            className="aspect-[4/3]"
-            classNames={{
-              wrapper: 'row-span-2',
-            }}
-            image={place.mainImage}
-            alt={place.name}
-          />
+      {place.mainImage &&
+        (place.images && place.images.length >= 1 ? (
+          <div className="mt-4 grid grid-cols-[2fr_1fr] grid-rows-2 gap-2">
+            <OptimizedImage
+              radius="lg"
+              shadow="sm"
+              className="aspect-[4/3]"
+              classNames={{
+                wrapper: 'row-span-2',
+              }}
+              image={place.mainImage}
+              alt={place.name}
+            />
+            <OptimizedImage
+              radius="lg"
+              shadow="sm"
+              alt={place.name}
+              full="both"
+              image={place.images[0]}
+            />
+            <ViewMoreImagesButtonAndDialog
+              images={
+                place.mainImage
+                  ? [place.mainImage, ...place.images]
+                  : place.images
+              }
+              buttonText={t('see-more')}
+              className="h-full"
+            />
+          </div>
+        ) : (
           <OptimizedImage
             radius="lg"
             shadow="sm"
             alt={place.name}
-            full="both"
-            image={place.images[0]}
-          />
-          <ViewMoreImagesButtonAndDialog
-            images={
-              place.mainImage
-                ? [place.mainImage, ...place.images]
-                : place.images
-            }
-            buttonText={t('see-more')}
-            className="h-full"
+            className="mt-4 aspect-[4/3] object-cover"
+            image={place.mainImage}
           />
-        </div>
-      ) : (
-        <OptimizedImage
-          radius="lg"
-          shadow="sm"
-          alt={place.name}
-          className="mt-4 aspect-[4/3] object-cover"
-          image={place.mainImage}
-        />
-      )}
+        ))}
 
       <CategoryTagList
         mainCategory={place.mainCategory}

diff --git a/src/app/[locale]/(app)/explore/places/page.tsx b/src/app/[locale]/(app)/explore/places/page.tsx
@@ -0,0 +1,15 @@
+import { unstable_setRequestLocale } from 'next-intl/server'
+import type { FC } from 'react'
+import { parseLocale, type LocaleRouteParams } from '~/i18n'
+import { redirect } from '~/navigation'
+
+const PlacesPage: FC<LocaleRouteParams> = async ({ params }) => {
+  const locale = parseLocale(params.locale)
+  unstable_setRequestLocale(locale)
+
+  redirect('/explore')
+
+  return null
+}
+
+export default PlacesPage
diff --git a/src/app/[locale]/(app)/explore/routes/[routeId]/_components/route-details.tsx b/src/app/[locale]/(app)/explore/routes/[routeId]/_components/route-details.tsx
@@ -5,6 +5,7 @@ import { CategoryTagList } from '~/components/category-tags/category-tag-list'
 import { IconTitle } from '~/components/generic/icon-title'
 import { MarkdownContent } from '~/components/generic/markdown-content'
 import { OptimizedImage } from '~/components/generic/optimized-image'
+import { ShareButton } from '~/components/generic/share-button'
 import { ApiRouterOutput } from '~/server/api/router'
 import { FeaturesBlock } from '../../../../../../../components/features/features-block'
 import { ViewMoreImagesButtonAndDialog } from '../../../places/[placeId]/_components/view-more-images-button-and-dialog'
@@ -17,51 +18,61 @@ export const RouteDetails: FC<{
   const t = useTranslations('explore')
 
   return (
-    <div className="mt-2 px-4">
-      <h2 className="font-title text-xl font-semibold">{route.name}</h2>
+    <div className="mt-4 px-4">
+      <div className="mb-2 flex">
+        <h2 className="grow font-title text-xl font-semibold">{route.name}</h2>
+        <ShareButton
+          data={{
+            title: `${route.name} | Begur Secret`,
+            url: `/explore/routes/${route.id}`,
+            text: route.description ?? undefined,
+          }}
+        />
+      </div>
 
       {route.description && (
         <p className="text-stone-800">{route.description}</p>
       )}
 
-      {route.images && route.images.length >= 1 ? (
-        <div className="mt-4 grid grid-cols-[2fr_1fr] grid-rows-2 gap-2">
-          <OptimizedImage
-            radius="lg"
-            shadow="sm"
-            className="aspect-[4/3]"
-            classNames={{
-              wrapper: 'row-span-2',
-            }}
-            image={route.mainImage}
-            alt={route.name}
-          />
+      {route.mainImage &&
+        (route.images && route.images.length >= 1 ? (
+          <div className="mt-4 grid grid-cols-[2fr_1fr] grid-rows-2 gap-2">
+            <OptimizedImage
+              radius="lg"
+              shadow="sm"
+              className="aspect-[4/3]"
+              classNames={{
+                wrapper: 'row-span-2',
+              }}
+              image={route.mainImage}
+              alt={route.name}
+            />
+            <OptimizedImage
+              radius="lg"
+              shadow="sm"
+              alt={route.name}
+              full="both"
+              image={route.images[0]}
+            />
+            <ViewMoreImagesButtonAndDialog
+              images={
+                route.mainImage
+                  ? [route.mainImage, ...route.images]
+                  : route.images
+              }
+              buttonText={t('see-more')}
+              className="h-full"
+            />
+          </div>
+        ) : (
           <OptimizedImage
             radius="lg"
             shadow="sm"
             alt={route.name}
-            full="both"
-            image={route.images[0]}
-          />
-          <ViewMoreImagesButtonAndDialog
-            images={
-              route.mainImage
-                ? [route.mainImage, ...route.images]
-                : route.images
-            }
-            buttonText={t('see-more')}
-            className="h-full"
+            className="mt-4 aspect-[4/3] object-cover"
+            image={route.mainImage}
           />
-        </div>
-      ) : (
-        <OptimizedImage
-          radius="lg"
-          shadow="sm"
-          alt={route.name}
-          className="mt-4 aspect-[4/3] object-cover"
-          image={route.mainImage}
-        />
-      )}
+        ))}
 
       <CategoryTagList
         mainCategory={route.mainCategory}

diff --git a/src/app/[locale]/(app)/explore/routes/page.tsx b/src/app/[locale]/(app)/explore/routes/page.tsx
@@ -0,0 +1,15 @@
+import { unstable_setRequestLocale } from 'next-intl/server'
+import type { FC } from 'react'
+import { parseLocale, type LocaleRouteParams } from '~/i18n'
+import { redirect } from '~/navigation'
+
+const RoutesPage: FC<LocaleRouteParams> = async ({ params }) => {
+  const locale = parseLocale(params.locale)
+  unstable_setRequestLocale(locale)
+
+  redirect('/explore')
+
+  return null
+}
+
+export default RoutesPage
diff --git a/src/app/[locale]/(app)/explore/search/_components/place-list.tsx b/src/app/[locale]/(app)/explore/search/_components/place-list.tsx
@@ -1,52 +1,76 @@
 'use client'
 
 import { Card, CardBody } from '@nextui-org/card'
+import { IconMapPinOff } from '@tabler/icons-react'
+import { useTranslations } from 'next-intl'
 import { FC } from 'react'
 import { CategoryTagList } from '~/components/category-tags/category-tag-list'
 import { OptimizedImage } from '~/components/generic/optimized-image'
 import { Link } from '~/navigation'
 import { ApiRouterOutput } from '~/server/api/router'
 
-type Places =
-  | ApiRouterOutput['places']['search']
-  | ApiRouterOutput['placeLists']['getVisitedPlaces']
+type BaseItem =
+  | ApiRouterOutput['search']['places' | 'routes'][number]
+  | ApiRouterOutput['placeLists']['getVisitedPlaces'][number]
 
 export const PlaceList: FC<{
-  places: Places
-}> = ({ places }) => {
+  items: (BaseItem & {
+    type: 'place' | 'route'
+  })[]
+}> = ({ items }) => {
+  const t = useTranslations('explore')
+
+  if (!items || items.length === 0) {
+    return (
+      <div className="space-y-1 pt-8">
+        <IconMapPinOff
+          size={48}
+          stroke={1}
+          className="mx-auto text-stone-500"
+        />
+        <p className="text-center">{t('no-places')}</p>
+      </div>
+    )
+  }
   return (
     <ul className="py-2">
-      {places?.map((place) => (
-        <li key={place.id}>
+      {items.map((item) => (
+        <li key={item.id}>
           <Card
             as={Link}
             shadow="none"
             radius="none"
-            key={place.id}
+            key={item.id}
             isPressable
-            href={`/explore/places/${place.id}`}
+            href={
+              item.type === 'place'
+                ? `/explore/places/${item.id}`
+                : `/explore/routes/${item.id}`
+            }
           >
             <CardBody className="grid grid-cols-[1fr_auto] px-4 py-2">
               <div>
-                <h2 className="font-title font-bold">{place.name}</h2>
+                <h2 className="font-title font-bold">{item.name}</h2>
 
                 <CategoryTagList
-                  mainCategory={place.mainCategory}
-                  categories={place.categories.map((c) => c.category)}
+                  mainCategory={item.mainCategory}
+                  categories={item.categories.map((c) => c.category)}
                   wrap
                   className="mt-2"
                 />
 
-                {place.description && (
-                  <p className="text-stone-800">{place.description}</p>
+                {item.description && (
+                  <p className="text-stone-800">{item.description}</p>
                 )}
               </div>
-              <OptimizedImage
-                radius="md"
-                alt={place.name}
-                className="z-0 aspect-[4/3] h-16 w-auto object-cover"
-                image={place.mainImage}
-              />
+              {item.mainImage && (
+                <OptimizedImage
+                  radius="md"
+                  alt={item.name}
+                  className="z-0 aspect-[4/3] h-16 w-auto object-cover"
+                  image={item.mainImage}
+                />
+              )}
             </CardBody>
           </Card>
         </li>