Shadcn's Sheet x Dialog

return (
    <Dialog>
      <Sheet>
        <div className=" py-8 lg:py-16">
          <div className="container flex-none md:flex max-w-screen-2xl items-center md:justify-between mb-8">
            <div>
              <p className="max-w-3xl mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl xl:text-6xl dark:text-white">
                Code Audit
              </p>
              <p className="max-w-3xl font-light text-gray-500 md:text-lg lg:text-xl dark:text-gray-400">
                Paste contract code below to audit code.
              </p>
            </div>
            <SheetTrigger asChild>
              <Button className="hidden md:block" onClick={() => {}}>
                Audit your code
              </Button>
            </SheetTrigger>
          </div>
          <div className="container items-center max-w-screen-2xl">
            <div className="h-96 border border-black dark:border-white rounded-md overflow-auto mb-6">
              <CodeEditor
                value={code}
                language="sol"
                placeholder="Please enter a Solidity code here."
                onChange={(evn) => setCode(evn.target.value)}
                padding={15}
                style={{
                  fontSize: 12,
                  // backgroundColor: "#f5f5f5",
                  fontFamily:
                    "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
                }}
              />
            </div>
            <SheetTrigger className="block md:hidden ml-auto">
              Audit your code
            </SheetTrigger>
          </div>
        </div>
        <SheetContent
          side="bottom"
          className="p-8 bg-white dark:bg-black dark:border-slate-800 h-5/6"
        >
          <SheetHeader className="container mb-7">
            <div>
              <SheetTitle className="max-w-3xl mb-2 text-3xl font-extrabold tracking-tight leading-none md:text-4xl xl:text-5xl dark:text-white">
                Report Results
              </SheetTitle>
              <SheetDescription className="max-w-3xl font-light text-gray-500 md:text-base lg:text-lg dark:text-gray-400">
                Here’s what our product says about your contract.
              </SheetDescription>
            </div>
          </SheetHeader>

          <div className="container">
            <div className="max-w-7xl p-4 border-2 border-green-500 rounded-xl">
              <div className="flex items-center gap-2">
                <p className=" text-gray-500 dark:text-gray-400">
                  Vulnerability Score
                </p>
                <DialogTrigger asChild>
                  <IoIosInformationCircle className=" text-gray-500 dark:text-gray-400" />
                </DialogTrigger>
                <DialogContent className="sm:max-w-[425px]">
                  <DialogHeader>
                    <DialogTitle>Edit profile</DialogTitle>
                    <DialogDescription>
                      Make changes to your profile here. Click save when you're
                      done.
                    </DialogDescription>
                  </DialogHeader>
                  <div className="grid gap-4 py-4">
                    <div className="grid grid-cols-4 items-center gap-4">
                      <Label htmlFor="name" className="text-right">
                        Name
                      </Label>
                      <Input
                        id="name"
                        defaultValue="Pedro Duarte"
                        className="col-span-3"
                      />
                    </div>
                    <div className="grid grid-cols-4 items-center gap-4">
                      <Label htmlFor="username" className="text-right">
                        Username
                      </Label>
                      <Input
                        id="username"
                        defaultValue="@peduarte"
                        className="col-span-3"
                      />
                    </div>
                  </div>
                  <DialogFooter>
                    <Button type="submit">Save changes</Button>
                  </DialogFooter>
                </DialogContent>
              </div>
              <div className="flex flex-col md:flex-row items-center gap-5">
                <div className="flex items-center gap-4 ">
                  <IoThumbsUpSharp className="text-green-500" size={90} />
                  <div className="flex-col">
                    <p className="text-green-500 text-3xl md:text-4xl xl:text-5xl font-extrabold">
                      Low
                    </p>
                    <p>Value: 2</p>
                  </div>
                </div>
                <div>
                  <p className="">Description : </p>
                  <p className="">
                    The contract does not have a significant impact on possible
                    scenarios for the use of the contract and is probably
                    subjective.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </SheetContent>
      </Sheet>
    </Dialog>
  );