supabase/apps/www/pages/features.tsx

import DefaultLayout from '~/components/Layouts/Default'
import SectionContainer from '~/components/Layouts/SectionContainer'
import Panel from '~/components/Panel'
import { features } from '~/data/features'
import { breadcrumbs } from '~/lib/breadcrumbs'
import { breadcrumbListSchema, serializeJsonLd } from '~/lib/json-ld'
import { motion } from 'framer-motion'
import { debounce } from 'lib/helpers'
import { Search } from 'lucide-react'
import { NextSeo } from 'next-seo'
import { useRouter } from 'next/compat/router'
import Head from 'next/head'
import Link from 'next/link'
import React, { useCallback, useEffect, useState } from 'react'
import { Button, Checkbox, cn, InputGroup, InputGroupAddon, InputGroupInput } from 'ui'

function FeaturesPage() {
  const router = useRouter()
  const [searchTerm, setSearchTerm] = useState<string>((router?.query.q as string) || '')
  const [selectedProducts, setSelectedProducts] = useState<string[]>(
    (router?.query.products as string)?.split(',') || []
  )
  const [showSelfHostedOnly, setShowSelfHostedOnly] = useState<boolean>(
    router?.query.selfHosted === 'true'
  )

  const HAS_ACTIVE_FILTERS = selectedProducts.length || searchTerm.length || showSelfHostedOnly

  const products = Array.from(new Set(features.flatMap((feature) => feature.products)))

  // Debounced function to update URL params
  const updateQueryParamsDebounced = useCallback(
    debounce(() => updateQueryParams(), 300),
    [searchTerm, selectedProducts, showSelfHostedOnly]
  )

  const updateQueryParams = () => {
    const params = new URLSearchParams()
    if (searchTerm) params.set('q', searchTerm)
    if (selectedProducts.length > 0) params.set('products', selectedProducts.join(','))
    if (showSelfHostedOnly) params.set('selfHosted', 'true')

    router?.replace({ pathname: '/features', query: params.toString() }, undefined, {
      shallow: true,
    })
  }

  // Apply filters based on initial URL params on mount
  useEffect(() => {
    updateQueryParamsDebounced()
    return updateQueryParamsDebounced.cancel // Cleanup on unmount
  }, [searchTerm, selectedProducts, updateQueryParamsDebounced])

  // Sync state with query parameters when they change
  useEffect(() => {
    if (router?.query.q !== searchTerm) setSearchTerm((router?.query.q as string) || '')
    if (router?.query.products !== selectedProducts.join(',')) {
      setSelectedProducts((router?.query.products as string)?.split(',') || [])
    }
    const selfHostedParam = router?.query.selfHosted === 'true'
    if (selfHostedParam !== showSelfHostedOnly) setShowSelfHostedOnly(selfHostedParam)
  }, [router?.query.q, router?.query.products, router?.query.selfHosted])

  // Handle search input change
  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(e.target.value)
  }

  // Handle product checkbox change
  const handleProductChange = (product: string) => {
    setSelectedProducts((prev) =>
      prev.includes(product) ? prev.filter((p) => p !== product) : [...prev, product]
    )
  }

  // Filter features based on search term and selected products
  const filteredFeatures = features.filter((feature) => {
    const matchesSearch =
      feature.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      feature.subtitle.toLowerCase().includes(searchTerm.toLowerCase()) ||
      feature.description.toLowerCase().includes(searchTerm.toLowerCase())

    const matchesProduct =
      selectedProducts.length === 0 ||
      feature.products.some((product) => selectedProducts.includes(product))

    const matchesSelfHosted = !showSelfHostedOnly || feature.status?.availableOnSelfHosted === true

    return matchesSearch && matchesProduct && matchesSelfHosted
  })

  const meta = {
    title: 'Supabase Features',
    description:
      'From authentication to storage, everything you need to build and ship your next project.',
  }

  return (
    <>
      <NextSeo
        title={meta.title}
        description={meta.description}
        openGraph={{
          title: meta.title,
          description: meta.description,
          url: '/customers',
        }}
      />
      <Head>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: serializeJsonLd(breadcrumbListSchema(breadcrumbs.features)),
          }}
        />
      </Head>
      <DefaultLayout>
        <SectionContainer className="py-0! sm:px-0!">
          <div className="border border-muted rounded-xl bg-alternative my-4 px-6 py-8 md:py-10 lg:px-16 lg:py-20 xl:px-20 bg-center bg-cover bg-[url('/images/features/features-cover-light.svg')] dark:bg-[url('/images/features/features-cover-dark.svg')]">
            <motion.div
              className="mx-auto sm:max-w-xl text-center flex flex-col items-center gap-3"
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0, transition: { duration: 0.5, easing: 'easeOut' } }}
            >
              <h1 className="h1 text-foreground m-0!">Supabase Features</h1>
              <p className="text-foreground-light text-base">
                Everything you need <br className="md:hidden" /> to build and ship your next
                project.
              </p>
            </motion.div>
          </div>
        </SectionContainer>
        <SectionContainer className="relative grid md:grid-cols-4 md:gap-4 pt-0!">
          <div className="relative w-full h-full">
            <div className="mb-4 flex flex-col gap-4 sticky top-20">
              <InputGroup className="w-full">
                <InputGroupAddon>
                  <Search />
                </InputGroupAddon>
                <InputGroupInput
                  size="small"
                  autoComplete="off"
                  type="search"
                  placeholder="Search features"
                  value={searchTerm}
                  onChange={handleSearchChange}
                />
              </InputGroup>
              <div className="hidden md:flex flex-col gap-2.5">
                <div className="flex items-center gap-2 text-foreground-light hover:text-foreground cursor-pointer! hover:cursor-pointer! transition-colors">
                  <Checkbox
                    id="self-hosted-filter"
                    checked={showSelfHostedOnly}
                    onCheckedChange={() => setShowSelfHostedOnly(!showSelfHostedOnly)}
                    className="[&_input]:m-0"
                  />
                  <label
                    htmlFor="self-hosted-filter"
                    className="text-sm leading-none! flex-1 text-left"
                  >
                    Show only self-hosted features
                  </label>
                </div>
              </div>
              <div className="hidden md:flex flex-col gap-4">
                <h2 className="text-sm text-foreground-lighter">Filter by tags:</h2>
                <div className="flex flex-col gap-2.5">
                  {products
                    .sort((a, b) => (a.toLowerCase() > b.toLowerCase() ? 1 : -1))
                    .map((product) => (
                      <div
                        key={product}
                        className="flex items-center gap-2 text-foreground-light hover:text-foreground cursor-pointer! hover:cursor-pointer! transition-colors"
                      >
                        <Checkbox
                          id={product}
                          checked={selectedProducts.includes(product)}
                          onCheckedChange={() => handleProductChange(product)}
                          className="[&_input]:m-0"
                        />
                        <label
                          htmlFor={product}
                          className="text-sm leading-none! capitalize flex-1 text-left"
                        >
                          {product}
                        </label>
                      </div>
                    ))}
                </div>
                <div className="text-foreground-muted text-xs">
                  Features selected: {filteredFeatures.length}
                </div>
              </div>
              <Button
                tabIndex={HAS_ACTIVE_FILTERS ? 0 : -1}
                block
                type="dashed"
                onClick={() => {
                  setSelectedProducts([])
                  setSearchTerm('')
                  setShowSelfHostedOnly(false)
                }}
                className={cn(
                  'opacity-0 transition-opacity hidden md:block',
                  HAS_ACTIVE_FILTERS && 'block! opacity-100'
                )}
              >
                Clear all filters
              </Button>
            </div>
          </div>
          <div className="md:col-span-3 flex flex-col gap-4 md:gap-8">
            {!filteredFeatures?.length ? (
              <p className="text-foreground-lighter text-sm">
                No features found with these filters
              </p>
            ) : (
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-4">
                {filteredFeatures
                  .sort((a, b) => (a.title > b.title ? 1 : -1))
                  .map((feature) => (
                    <Link
                      key={`feat-${feature.title}`}
                      href={`/features/${feature.slug}`}
                      className="flex flex-col justify-start items-stretch group cursor-pointer transition rounded-xl focus-visible:ring-2 focus-visible:ring-foreground-lighter outline-hidden outline-0 focus-visible:outline-4 focus-visible:outline-offset-1 focus-visible:outline-brand-600"
                    >
                      <Panel
                        hasActiveOnHover
                        outerClassName="h-full"
                        innerClassName="flex md:flex-col gap-3 sm:gap-2 h-full items-start p-2"
                      >
                        <div className="relative rounded-lg min-h-[80px] max-h-[80px] md:max-h-[140px] h-full md:h-auto aspect-square md:w-full md:aspect-video! bg-alternative flex items-center justify-center shadow-inner border border-muted">
                          <feature.icon className="w-5 h-5 text-foreground-light group-hover:text-foreground transition-colors" />
                        </div>
                        <div className="md:p-2 md:pt-1 flex flex-col h-full md:h-auto grow gap-0.5 md:gap-1.5 justify-center md:justify-start">
                          <h3 className="text-sm md:text-base text-foreground leading-5!">
                            {feature.title}
                          </h3>
                          <p className="text-foreground-light text-sm line-clamp-2">
                            {feature.subtitle}
                          </p>
                        </div>
                      </Panel>
                    </Link>
                  ))}
              </div>
            )}
          </div>
        </SectionContainer>
      </DefaultLayout>
    </>
  )
}

export default FeaturesPage