59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
import { useState } from "react";
|
|
import { Dialog } from "@headlessui/react";
|
|
import { Button } from "./Button/Button";
|
|
import Typography from "components/typography/Typography";
|
|
|
|
export function BottomSheetBar() {
|
|
// The open/closed state lives outside of the Dialog and is managed by you
|
|
let [isOpen, setIsOpen] = useState(true);
|
|
|
|
function handleDeactivate() {
|
|
alert("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA");
|
|
}
|
|
|
|
return (
|
|
/*
|
|
Pass `isOpen` to the `open` prop, and use `onClose` to set
|
|
the state back to `false` when the user clicks outside of
|
|
the dialog or presses the escape key.
|
|
*/
|
|
<Dialog
|
|
open={isOpen}
|
|
onClose={() => {}}
|
|
className="absolute bottom-0 bg-blue-900 text-white w-full"
|
|
>
|
|
<Dialog.Panel className="flex px-[47px] py-6 justify-between items-center">
|
|
<Dialog.Description className="items-center">
|
|
By clicking “Accept All Cookies”, you agree to the storing of cookies
|
|
on your device to enhance site navigation, analyze site usage, and
|
|
assist in our marketing efforts.
|
|
</Dialog.Description>
|
|
{/*
|
|
You can render additional buttons to dismiss your dialog by setting
|
|
`isOpen` to `false`.
|
|
*/}
|
|
<div className="flex flex-col md:flex-row">
|
|
<Button
|
|
defaultStyle={false}
|
|
emphasis="low"
|
|
className=" items-center grow-0 min-h-max mx-3 text-blue-600 hover:bg-blue-200 focus:outline-none active:bg-blue-400"
|
|
onClick={handleDeactivate}
|
|
>
|
|
<Typography fontWeightVariant="semibold">
|
|
Customize settings
|
|
</Typography>
|
|
</Button>
|
|
<Button
|
|
className="md:w-max min-h-max mx-3 focus:outline-none items-center"
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
<Typography fontWeightVariant="semibold">
|
|
Accept all cookies
|
|
</Typography>
|
|
</Button>
|
|
</div>
|
|
</Dialog.Panel>
|
|
</Dialog>
|
|
);
|
|
}
|