oz Posts - Answer Overflow

Posts Comments

KPCKevin Powell - Community

•Created by oz on 10/12/2024 in #front-end

How to create a similar tab selection effect in react.

2 replies

KPCKevin Powell - Community

•Created by oz on 5/23/2024 in #front-end

Aligning sibling labels with card content

2 replies

KPCKevin Powell - Community

•Created by oz on 5/13/2024 in #front-end

Nextjs Multi layout setup

Is there a standard way to handle multiple view ui changes in nextjs app dir. I would like to conditionally render a basic / advanced view on a page based on user's choice should I use route groups for each route to handle this setup example mode toggler is in app/(dashboard)/layout.client.tsx

export function ModeSwitch() {
  const [mode, setMode] = useState(false)

  const toggleMode = () => {
    setMode(!mode)
  }

  return (
    <div className='flex items-center gap-x-2'>
      <Switch
        checked={mode}
        onChange={toggleMode}
        className="group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
      >
        <span className="sr-only">Toggle Mode</span>
        <span aria-hidden="true" className="pointer-events-none absolute h-full w-full rounded-md bg-white" />
        <span
          aria-hidden="true"
          className={classNames(
            mode ? 'bg-indigo-600' : 'bg-gray-200',
            'pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out'
          )}
        />
        <span
          aria-hidden="true"
          className={classNames(
            mode ? 'translate-x-5' : 'translate-x-0',
            'pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow ring-0 transition-transform duration-200 ease-in-out'
          )}
        />
      </Switch>
      <span className="text-xs text-gray-900">Advanced Mode</span>
    </div>
  )
}

export function ModeSwitch() {
  const [mode, setMode] = useState(false)

  const toggleMode = () => {
    setMode(!mode)
  }

  return (
    <div className='flex items-center gap-x-2'>
      <Switch
        checked={mode}
        onChange={toggleMode}
        className="group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
      >
        <span className="sr-only">Toggle Mode</span>
        <span aria-hidden="true" className="pointer-events-none absolute h-full w-full rounded-md bg-white" />
        <span
          aria-hidden="true"
          className={classNames(
            mode ? 'bg-indigo-600' : 'bg-gray-200',
            'pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out'
          )}
        />
        <span
          aria-hidden="true"
          className={classNames(
            mode ? 'translate-x-5' : 'translate-x-0',
            'pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow ring-0 transition-transform duration-200 ease-in-out'
          )}
        />
      </Switch>
      <span className="text-xs text-gray-900">Advanced Mode</span>
    </div>
  )
}

based on selected view when user navigates to home either show the basic view or advanced app/(dashboard)/(advanced)/home/page.tsx and app/(dashboard)/(basic)/home/page.tsx

1 replies

KPCKevin Powell - Community

•Created by oz on 7/18/2023 in #front-end

hey, can anyone help me achieve this border design using the css clip property

I have an image, and I would like to have this shape (a semi circle or a triangle on the right or left border) of the image

11 replies

Gaming

Programming