mobile guide filters

Author: davemooreuws

src/components/guides/GuideList.tsx

@@ -26,7 +26,7 @@ interface Props {
 
 const GuideList: React.FC<Props> = ({ className, guides }) => {
   const { searchParams } = useParams()
-  const selectedTags = searchParams.get('tags')?.split(',') || []
+  const selectedTags = searchParams?.get('tags')?.split(',') || []
   const { currentLanguage } = useLang()
   const filteredGuides = guides.filter((guide) => {
     let include = true
@@ -40,7 +40,13 @@ const GuideList: React.FC<Props> = ({ className, guides }) => {
     return include && selectedTags.some((tag) => guide.tags?.includes(tag))
   })
 
-  return (
+  return filteredGuides.length === 0 ? (
+    <div className={className}>
+      <p className="text-lg">
+        No guides found. Please try selecting different filters.
+      </p>
+    </div>
+  ) : (
     <ul className={cn('space-y-4', className)}>
       {filteredGuides.map((guide) => (
         <li key={guide.slug}>

src/components/guides/GuideMobileFilters.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../ui/dialog'
+import { Button } from '../ui/button'
+import { AdjustmentsHorizontalIcon } from '@heroicons/react/24/outline'
+import { GuideFilters } from './GuideFilters'
+
+interface GuideMobileFiltersProps {
+  allTags: string[]
+}
+
+const GuideMobileFilters: React.FC<GuideMobileFiltersProps> = ({ allTags }) => {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="icon">
+          <AdjustmentsHorizontalIcon className="h-6 w-6" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader className="mb-10">
+          <DialogTitle className="sr-only">Set Filters</DialogTitle>
+        </DialogHeader>
+        <GuideFilters allTags={allTags} />
+        <DialogClose asChild>
+          <Button className="mt-10 w-full">Apply</Button>
+        </DialogClose>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default GuideMobileFilters

src/components/guides/GuidePage.tsx

@@ -3,29 +3,35 @@ import React, { Suspense } from 'react'
 
 import { GuideFilters } from './GuideFilters'
 import GuideList from './GuideList'
+import { Button } from '../ui/button'
+import { AdjustmentsHorizontalIcon } from '@heroicons/react/24/outline'
+import GuideMobileFilters from './GuideMobileFilters'
 
 interface Props {
   guides: Doc[]
   allTags: string[]
 }
 
-// TODO change this to use server actions
 const GuidePage: React.FC<Props> = ({ guides, allTags }) => {
   return (
-    <div>
-      <div className="gap-x-4 lg:grid lg:grid-cols-[280px,1fr]">
-        <div className="border-r">
-          <aside
-            aria-label="Sidebar"
-            className="sticky top-[calc(var(--header-height)+1px+2rem)] mt-10 hidden max-h-[calc(100vh-var(--header-height)-3rem)] w-80 space-y-10 overflow-y-auto lg:block"
-          >
-            <GuideFilters allTags={allTags} />
-          </aside>
-        </div>
-        <Suspense>
-          <GuideList guides={guides} className="relative mx-8 mt-10 w-full" />
-        </Suspense>
+    <div className="gap-x-4 lg:grid lg:grid-cols-[280px,1fr]">
+      <div className="hidden border-r pb-10 lg:block">
+        <aside
+          aria-label="Sidebar"
+          className="sticky top-[calc(var(--header-height)+1px+2rem)] mt-10 max-h-[calc(100vh-var(--header-height)-3rem)] w-80 space-y-10 overflow-y-auto"
+        >
+          <GuideFilters allTags={allTags} />
+        </aside>
       </div>
+      <div className="relative -top-5 lg:hidden">
+        <GuideMobileFilters allTags={allTags} />
+      </div>
+      <Suspense>
+        <GuideList
+          guides={guides}
+          className="relative mx-2 my-4 w-full lg:mx-8 lg:my-10"
+        />
+      </Suspense>
     </div>
   )
 }