LayoutSwitcher.tsx raw

   1  import { Button } from '@/components/ui/button'
   2  import { cn } from '@/lib/utils'
   3  import { useScreenSize } from '@/providers/ScreenSizeProvider'
   4  import { useUserPreferences } from '@/providers/UserPreferencesProvider'
   5  import { Columns2, PanelLeft } from 'lucide-react'
   6  
   7  export default function LayoutSwitcher({ collapse }: { collapse: boolean }) {
   8    const { enableSingleColumnLayout, updateEnableSingleColumnLayout } = useUserPreferences()
   9    const { canUseDoublePane } = useScreenSize()
  10  
  11    if (!canUseDoublePane) {
  12      return null
  13    }
  14  
  15    if (collapse) {
  16      return (
  17        <Button
  18          variant="ghost"
  19          className="size-12 hover:border"
  20          onClick={() => updateEnableSingleColumnLayout(!enableSingleColumnLayout)}
  21        >
  22          {enableSingleColumnLayout ? (
  23            <PanelLeft className="!size-5" />
  24          ) : (
  25            <Columns2 className="!size-5" />
  26          )}
  27        </Button>
  28      )
  29    }
  30  
  31    return (
  32      <div className="rounded-lg bg-muted p-1 shadow-inner">
  33        <div className="relative flex items-center justify-around">
  34          <div
  35            className="py-1 w-full z-10 cursor-pointer flex flex-col items-center"
  36            onClick={() => updateEnableSingleColumnLayout(false)}
  37          >
  38            <Columns2 className={cn('size-5', enableSingleColumnLayout && 'text-muted-foreground')} />
  39          </div>
  40          <div
  41            className="py-1 w-full z-10 cursor-pointer flex flex-col items-center"
  42            onClick={() => updateEnableSingleColumnLayout(true)}
  43          >
  44            <PanelLeft
  45              className={cn('size-5', !enableSingleColumnLayout && 'text-muted-foreground')}
  46            />
  47          </div>
  48          <div
  49            className={cn(
  50              'rounded-md absolute top-0 left-0 inset-0 w-1/2 h-full transition-transform shadow-sm',
  51              !enableSingleColumnLayout
  52                ? 'translate-x-0 bg-surface-background'
  53                : 'translate-x-full bg-background'
  54            )}
  55          />
  56        </div>
  57      </div>
  58    )
  59  }
  60