"use client"import { useState } from "react"import { XIcon } from "lucide-react"import { Portal } from "@/components/portal"import { Button } from "@/components/ui/button"import { Card, CardContent } from "@/components/ui/card"export default function PortalDemo() {  const [open, setOpen] = useState(true)  return (    <div className="flex w-full max-w-sm items-center gap-2">      <Button onClick={() => setOpen(true)}>Show notification</Button>      {open && (        <Portal>          <Card className="fixed bottom-6 left-1/2 z-50 w-[calc(100%-2rem)] max-w-sm -translate-x-1/2 shadow-lg">            <CardContent className="flex items-center justify-between gap-4 p-4">              <p className="text-sm">Changes saved successfully.</p>              <Button                variant="ghost"                size="icon"                className="shrink-0"                aria-label="Dismiss notification"                onClick={() => setOpen(false)}              >                <XIcon />              </Button>            </CardContent>          </Card>        </Portal>      )}    </div>  )}