Mobile Bottom Sheet Example

A classic mobile action sheet layout with header, body content, and action buttons.

import React from 'react';
import { Drawer } from '@ughur/temper';

export function MobileBottomSheet() {
  return (
    <Drawer.Root shouldScaleBackground>
      <Drawer.Trigger className="px-4 py-2 bg-indigo-600 text-white rounded-lg font-medium">
        Share Post
      </Drawer.Trigger>

      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40 z-50" />
        <Drawer.Content className="fixed bottom-0 left-0 right-0 bg-white rounded-t-2xl p-6 z-50 max-h-[85vh] flex flex-col">
          <Drawer.Handle className="w-12 h-1.5 bg-gray-300 rounded-full mx-auto mb-6" />

          <Drawer.Title className="text-xl font-bold text-gray-900 mb-1">
            Share this item
          </Drawer.Title>
          <Drawer.Description className="text-sm text-gray-500 mb-6">
            Choose a destination platform to share your post link.
          </Drawer.Description>

          <div className="grid grid-cols-4 gap-4 mb-6">
            {['Twitter', 'Facebook', 'LinkedIn', 'Copy Link'].map((action) => (
              <button
                key={action}
                className="flex flex-col items-center justify-center p-3 bg-gray-50 hover:bg-gray-100 rounded-xl text-xs font-medium text-gray-700">
                {action}
              </button>
            ))}
          </div>

          <Drawer.Close className="w-full py-3 bg-gray-100 text-gray-700 rounded-xl font-medium">
            Cancel
          </Drawer.Close>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}