btrc-hub/frontend/src/components/users/UserCodeDialogue.tsx

import { Button } from '@/components/ui/button'
import { Dialog,
         DialogContent,
         DialogDescription,
         DialogTitle,
         DialogTrigger } from '@/components/ui/dialog'

type Props = { visible:         boolean
	       onVisibleChange: (visible: boolean) => void
	       user:            User | null }


export default ({ visible, onVisibleChange, user }: Props) => {
  return (
      <Dialog open={visible} onOpenChange={onVisibleChange}>
        <DialogContent className="space-y-6">
          <DialogTitle>引継ぎコード</DialogTitle>
	  <div>
	    <p>あなたの引継ぎコードはこちらです：</p>
	    <div className="m-2">{user?.inheritanceCode}</div>
	    <p className="mt-1 text-sm text-red-500">
	      このコードはほかの人には教えないでください!
	    </p>
	    <div className="my-4">
	      <Button className="px-4 py-2 bg-red-600 text-white rounded disabled:bg-gray-400">
		引継ぎコードを変更する
	      </Button>
	    </div>
	  </div>
	</DialogContent>
      </Dialog>)
}