Popover

<Popover>
    <PopoverTrigger>
        <Button>
            <Calendar size={20} /> Details
        </Button>
    </PopoverTrigger>
    <PopoverContent>
        <div className="temxt-zinc-800 flex flex-col gap-2">
            <h1 className="text-xl">Weekly Meeting</h1>
            <h2 className="text-base text-zinc-500 dark:text-zinc-400">
                Discuss progress and roadblocks
            </h2>
 
            <br />
 
            <span className="flex gap-2 align-middle">
                <Calendar strokeWidth={1.2} size={24} />
                <span className="text-base font-light">
                    October 7th, 2024
                </span>
            </span>
 
            <span className="flex gap-2 align-middle">
                <Clock strokeWidth={1.2} size={24} />
                <span className="text-base font-light"> 9 - 10AM </span>
            </span>
 
            <br />
 
            <PopoverClose>
                <Button variant="outline" className="w-full flex-grow">
                    Join
                </Button>
            </PopoverClose>
        </div>
    </PopoverContent>
</Popover>