# NOTE系統選擇一個病人來滑出來側欄


## Claude Artifact

https://claude.site/artifacts/fc2586f8-d1ff-4043-ad64-83893bc73148?fullscreen=true

## Source Code

import React, { useState } from 'react';
import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
import { Card } from "@/components/ui/card";

const PatientSelector = () => {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const [selectedPatient, setSelectedPatient] = useState(null);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [isFloating, setIsFloating] = useState(true);

  // 模擬病人數據
  const patients = [
    { id: 1, name: "王大明" },
    { id: 2, name: "李小華" },
    { id: 3, name: "張美玲" },
    { id: 4, name: "陳志明" },
    { id: 5, name: "林雅婷" },
    { id: 6, name: "黃建志" },
  ];

  const handlePatientClick = (patient) => {
    setSelectedPatient(patient);
    setIsDialogOpen(true);
  };

  const handleConfirmSelection = () => {
    setIsDialogOpen(false);
    setIsSidebarOpen(false);  // 自動關閉側邊欄
  };

  return (
    <div className="relative min-h-screen">
      {/* 主按鈕 */}
      <div className="flex justify-center p-8">
        <button 
          onClick={() => setIsSidebarOpen(true)}
          className={`
            bg-blue-500 
            hover:bg-blue-600 
            text-white 
            font-bold 
            py-4 
            px-8 
            rounded-lg 
            shadow-lg
            transition-all
            duration-1000
            ease-in-out
            ${isFloating ? 
              'translate-y-1 scale-105 shadow-xl' : 
              'translate-y-0 scale-100 shadow-lg'
            }
          `}
        >
          請選擇一個病人再開始
        </button>
      </div>

      {/* 側邊欄 */}
      <div 
        className={`
          fixed top-0 left-0 h-full w-72 bg-white shadow-xl
          transform transition-transform duration-300 ease-in-out
          ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'}
        `}
      >
        <div className="p-4">
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-xl font-bold">病人列表</h2>
            <button 
              onClick={() => setIsSidebarOpen(false)}
              className="text-gray-500 hover:text-gray-700"
            >
              ✕
            </button>
          </div>
          
          <div className="space-y-3">
            {patients.map(patient => (
              <Card 
                key={patient.id} 
                className="p-4 cursor-pointer hover:bg-gray-50 transition-colors"
                onClick={() => handlePatientClick(patient)}
              >
                <h3 className="font-medium">{patient.name}</h3>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* 選擇提示對話框 */}
      <AlertDialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>
              你選擇了 {selectedPatient?.name}
            </AlertDialogTitle>
          </AlertDialogHeader>
          <AlertDialogAction onClick={handleConfirmSelection}>
            確定
          </AlertDialogAction>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
};

export default PatientSelector;