1'use client'
2
3import clsx from 'clsx'
4import { useState } from 'react'
5
6import { beforeAndAfterSlides } from './data'
7import { Title } from '../../atoms/title/title'
8import { Button } from '../../atoms/button/button'
9import { BeforeAndAfterSlide } from './before-and-after-slide'
10import { Paragraph } from '../../atoms/paragraph/paragraph'
11
12export const BeforeAndAfter = () => {
13  const [isBefore, setIsBefore] = useState(true)
14
15  return (
16    <section className='relative mb-32 overflow-x-clip px-4 pb-2 pt-20 md:px-0'>
17      <Title as='h2' variant='medium' className='pb-6 text-center'>
18        Before and With Spice
19      </Title>
20      <Paragraph className='pb-6 text-center'>
21        See how Spice has been deployed in production architectures.
22      </Paragraph>
23
24      <div className='relative'>
25        <div className='absolute left-1/2 top-7 z-10 grid w-full -translate-x-1/2 grid-cols-2 items-center justify-center gap-2 px-6 sm:px-20 md:top-9 md:w-auto md:px-0'>
26          <Button
27            variant={'tag'}
28            className={clsx('whitespace-pre', isBefore && 'bg-alpha-100')}
29            onClick={() => setIsBefore(true)}
30          >
31            Before Spice
32          </Button>
33          <Button
34            variant={'tag'}
35            className={clsx(!isBefore && 'bg-alpha-100')}
36            onClick={() => setIsBefore(false)}
37          >
38            With Spice
39          </Button>
40        </div>
41
42        <BeforeAndAfterSlide slideData={beforeAndAfterSlides[0]} isBefore={isBefore} />
43      </div>
44    </section>
45  )
46}
47

1'use client'
2
3import clsx from 'clsx'
4import { useState } from 'react'
5
6import { beforeAndAfterSlides } from './data'
7import { Title } from '../../atoms/title/title'
8import { Button } from '../../atoms/button/button'
9import { BeforeAndAfterSlide } from './before-and-after-slide'
10import { Paragraph } from '../../atoms/paragraph/paragraph'
11
12export const BeforeAndAfter = () => {
13  const [isBefore, setIsBefore] = useState(true)
14
15  return (
16    <section className='relative mb-32 overflow-x-clip px-4 pb-2 pt-20 md:px-0'>
17      <Title as='h2' variant='medium' className='pb-6 text-center'>
18        Before and With Spice
19      </Title>
20      <Paragraph className='pb-6 text-center'>
21        See how Spice has been deployed in production architectures.
22      </Paragraph>
23
24      <div className='relative'>
25        <div className='absolute left-1/2 top-7 z-10 grid w-full -translate-x-1/2 grid-cols-2 items-center justify-center gap-2 px-6 sm:px-20 md:top-9 md:w-auto md:px-0'>
26          <Button
27            variant={'tag'}
28            className={clsx('whitespace-pre', isBefore && 'bg-alpha-100')}
29            onClick={() => setIsBefore(true)}
30          >
31            Before Spice
32          </Button>
33          <Button
34            variant={'tag'}
35            className={clsx(!isBefore && 'bg-alpha-100')}
36            onClick={() => setIsBefore(false)}
37          >
38            With Spice
39          </Button>
40        </div>
41
42        <BeforeAndAfterSlide slideData={beforeAndAfterSlides[0]} isBefore={isBefore} />
43      </div>
44    </section>
45  )
46}
47