Right Motion Drawer

import Cmp from "@/registry/ui-layouts/right-motion-drawer";

export default function Demo() {
  return <Cmp />;
}

import MotionDrawer from '@/registry/ui-layouts/motion-drawer';
import React from 'react';

interface ListItem {
  name: string;
  url: string;
}
const data: ListItem[] = [
  { name: '1', url: '/private/loans' },
  { name: '2', url: '/private/cards' },
  { name: '3', url: '/private/deposits' },
  { name: '4', url: '/private/services' },
  { name: '5', url: '/private/services' },
  { name: '6', url: '/private/services' },
  { name: '7', url: '/private/services' },
];

function RightMotionDrawerExample() {
  return (
    <div>
      <MotionDrawer
        direction='right'
        buttonOpeningVariants='stay'
        width={300}
        className='text-black'
      >
        <nav className='space-y-4'>
          <h2 className='text-xl font-bold mb-4'>Menu</h2>
          <a href='#' className='block p-2 hover:bg-neutral-100 rounded-sm'>
            Home
          </a>
          <a href='#' className='block p-2 hover:bg-neutral-100 rounded-sm'>
            About
          </a>
          <a href='#' className='block p-2 hover:bg-neutral-100 rounded-sm'>
            Contact
          </a>
        </nav>
      </MotionDrawer>
      <h1 className='text-7xl text-center'>Motion Drawer</h1>
    </div>
  );
}

export default RightMotionDrawerExample;