Features Component - shadcn/ui

features.tsx

'use client'

// https://ui.shadcn.com/docs/components/tabs
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'

// https://github.com/shadcn-ui/ui/blob/bf0c8b596bd7fb32daed989cab318430fd4c8919/apps/www/hooks/use-media-query.tsx#L4
import { useMediaQuery } from '@/lib/hooks/use-media-query'

// https://github.com/shadcn-ui/ui/blob/bf0c8b596bd7fb32daed989cab318430fd4c8919/apps/www/lib/utils.ts
import { cn } from '@/lib/utils'

const features = [
  {
    title: 'Journal',
    description:
      'Keep track of all your trades. Add notes, chart pictures, tweets, youtube videos, and more.',
    image: {
      dark: 'your_url_here',
      light: 'your_url_here'
    }
  },
  {
    title: 'Reports',
    description: 'Auto generated reports per symbol and custom tags. Tax reports coming soon!',
    image: {
      dark: 'your_url_here',
      light: 'your_url_here'
    }
  },
  {
    title: 'Calendar',
    description: 'All your trades organized into a classic Calendar, giving you a brief overview.',
    image: {
      dark: 'your_url_here',
      light: 'your_url_here'
    }
  },
  {
    title: 'Share',
    description: 'Easily share your trades with friends through our shareable components feature.',
    image: {
      dark: 'your_url_here',
      light: 'your_url_here'
    }
  }
]

export function Features() {
  const isDesktop = useMediaQuery('(min-width: 1024px)')

  return (
    <section
      id='features'
      aria-label='Features for running your books'
      className='overflow-hidden py-20'
    >
      <div className='container'>
        <div className='pb-20 md:mx-auto md:text-center'>
          <h2 className='font-cal text-3xl sm:text-4xl md:text-5xl'>
            The all-in-one trading journal.
          </h2>
          <p className='pt-6 text-lg tracking-tight text-muted-foreground'>
            Well everything you need when we're actually finished making the product.
          </p>
        </div>

        <Tabs
          defaultValue='Journal'
          className='lg:grid lg:grid-cols-12'
          orientation={isDesktop ? 'vertical' : 'horizontal'}
        >
          {/* Tabs List */}
          <div className='lg:col-span-5 lg:my-auto'>
            <TabsList
              className={cn(
                'h-fit w-full justify-normal', // override default styles
                'p-4', // base styles
                'overflow-x-auto rounded-b-none', // small screens
                'lg:flex-col lg:justify-center lg:rounded-md lg:rounded-r-none lg:p-1' // large screens
              )}
              // doesn't work in Safari (use justify-normal on parent with first:ml-auto last:mr-auto on children)
              // style={{ justifyContent: 'safe center' }}
            >
              {features.map((feat) => (
                <TabsTrigger
                  key={feat.title}
                  className={cn(
                    'whitespace-normal', // override default styles
                    'data-[state=inactive]:hover:bg-black/5 dark:data-[state=inactive]:hover:bg-white/5', // base styles
                    'first:ml-auto last:mr-auto', // small screens
                    'lg:flex lg:h-32 lg:w-full lg:flex-col lg:items-start lg:rounded-r-none lg:text-left' // large screens
                  )}
                  value={feat.title}
                >
                  <h3 className='font-cal text-lg text-foreground'>{feat.title}</h3>
                  <p className='hidden pt-3 text-sm lg:block'>{feat.description}</p>
                </TabsTrigger>
              ))}
            </TabsList>
          </div>

          {/* Tabs Content */}
          <div className='my-auto lg:col-span-7'>
            {features.map((feat) => (
              <TabsContent
                forceMount
                key={feat.title}
                value={feat.title}
                className={cn(
                  'mt-0', // override default styles
                  'rounded-b-md bg-muted shadow-xl data-[state=inactive]:hidden', // base styles
                  'lg:rounded-t-md' // large styles
                )}
              >
                <div className='flex w-fit justify-center bg-muted p-4 pt-0 lg:hidden'>
                  <p>{feat.description}</p>
                </div>
                <div className='w-[45rem] sm:w-auto lg:w-[65rem] lg:rounded-t-md'>
                  <img
                    className='hidden rounded-md dark:block'
                    src={feat.image.dark}
                    width={2880}
                    height={1880}
                    alt={feat.title}
                  />
                  <img
                    className='rounded-md dark:hidden'
                    src={feat.image.light}
                    width={2880}
                    height={1880}
                    alt={feat.title}
                  />
                </div>
              </TabsContent>
            ))}
          </div>
        </Tabs>
      </div>
    </section>
  )
}

Inspired by https://salient.tailwindui.com