New explore screen

src/app/[locale]/(app)/explore/_components/links-to-categories-modal.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ScrollShadow,
+  useDisclosure,
+} from '@nextui-org/react'
+import { useTranslations } from 'next-intl'
+import { FC } from 'react'
+import { PlaceMarker } from '~/components/generic/place-marker'
+import { Link } from '~/navigation'
+import { ApiRouterOutput } from '~/server/api/router'
+
+type PlaceCategoryGroup = NonNullable<
+  ApiRouterOutput['explore']['listCategoryGroups']
+>[number]
+
+export const LinksToCategoriesModal: FC<{
+  group: PlaceCategoryGroup
+}> = ({ group }) => {
+  const t = useTranslations('explore')
+  const { isOpen, onOpen, onOpenChange } = useDisclosure()
+
+  return (
+    <>
+      <Button
+        variant="bordered"
+        radius="full"
+        onClick={onOpen}
+        className="mx-auto flex"
+      >
+        {t('see-all-categories')}
+      </Button>
+
+      <Modal
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        scrollBehavior="inside"
+      >
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">
+                {group.name}
+              </ModalHeader>
+              <ModalBody>
+                <ScrollShadow>
+                  <ul>
+                    {group.placeCategories.map(({ category }) => (
+                      <Button
+                        as={Link}
+                        key={category.id}
+                        href={`/explore/search?placeCategory=${category.id}`}
+                        variant="light"
+                        fullWidth
+                        className="flex items-center justify-start px-2"
+                        startContent={
+                          <PlaceMarker
+                            icon={category.icon}
+                            color={category.color}
+                            size="md"
+                          />
+                        }
+                      >
+                        {category.namePlural}
+                      </Button>
+                    ))}
+                  </ul>
+                </ScrollShadow>
+              </ModalBody>
+              <ModalFooter>
+                <Button
+                  fullWidth
+                  color="primary"
+                  variant="light"
+                  onPress={onClose}
+                >
+                  {t('close')}
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}

src/app/[locale]/(app)/explore/_components/list-category-groups.tsx

@@ -0,0 +1,81 @@
+import { Card } from '@nextui-org/card'
+import { CardBody, Skeleton } from '@nextui-org/react'
+import { FC } from 'react'
+import { CategoryIcon } from '~/components/icons/category-icon'
+import { cn } from '~/helpers/cn'
+import { colorClasses } from '~/helpers/color-classes'
+import { ApiRouterOutput } from '~/server/api/router'
+import { LinksToCategoriesModal } from './links-to-categories-modal'
+
+type PlaceCategoryGroup = NonNullable<
+  ApiRouterOutput['explore']['listCategoryGroups']
+>[number]
+
+export const ListCategoryGroups: FC<{
+  group: PlaceCategoryGroup
+}> = ({ group }) => {
+  const highlightedCategories = group.placeCategories
+    .filter((category) => category.highlight)
+    .map(({ category }) => category)
+
+  return (
+    <>
+      <h3 className="mt-4 px-2 text-center font-title text-2xl font-semibold uppercase leading-none text-stone-900 first:mt-0">
+        {group.name}
+      </h3>
+      <ul className="my-2 grid grid-cols-2 gap-2 px-4">
+        {highlightedCategories.map((category) => (
+          <Card
+            as="li"
+            key={category.id}
+            shadow="md"
+            className={cn(
+              'shadow-md',
+              colorClasses.shadow[category.color],
+              'bg-gradient-to-br text-white',
+              colorClasses.gradientBg[category.color]
+            )}
+          >
+            <CardBody
+              className={cn(
+                'relative flex min-h-16 flex-row gap-2',
+                'overflow-hidden'
+              )}
+            >
+              <CategoryIcon
+                icon={category.icon}
+                size={24}
+                className="shrink-0"
+              />
+              <span className="flex-1 font-semibold uppercase leading-5 tracking-wide">
+                {category.namePlural}
+              </span>
+              <CategoryIcon
+                icon={category.icon}
+                strokeWidth={2}
+                size={64}
+                className="absolute bottom-0 right-1 z-0 shrink-0 opacity-10"
+              />
+            </CardBody>
+          </Card>
+        ))}
+      </ul>
+
+      <LinksToCategoriesModal group={group} />
+    </>
+  )
+}
+
+export const ListCategoryGroupsSkeleton: FC = () => {
+  return (
+    <>
+      <Skeleton className="mx-auto mt-4 h-6 w-full max-w-32 rounded-full first:mt-0" />
+      <div className="my-2 grid grid-cols-2 gap-2 px-4">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Skeleton key={i} className="h-16 w-full rounded-lg" />
+        ))}
+      </div>
+      <Skeleton className="mx-auto mt-2 h-10 w-full max-w-48 rounded-full" />
+    </>
+  )
+}

src/app/[locale]/(app)/explore/loading.tsx

@@ -1,16 +1,13 @@
 import { FC } from 'react'
-import { CategoriesGridSkeleton } from './_components/categories-grid'
-import { ListPlacesOfCategorySkeleton } from './_components/list-items-of-category'
+import { ListCategoryGroupsSkeleton } from './_components/list-category-groups'
 
 const Loading: FC = () => {
   return (
-    <>
-      <CategoriesGridSkeleton />
-
+    <div className="pt-6">
       {[...Array(5)].map((_, i) => (
-        <ListPlacesOfCategorySkeleton key={i} />
+        <ListCategoryGroupsSkeleton key={i} />
       ))}
-    </>
+    </div>
   )
 }