cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

📝 docs: add modal to the example page

Browse Source
This commit is contained in:
Wahyu Kurniawan 2024-03-08 15:30:53 +07:00
parent 296e149391
commit 300b8e4b5e
No known key found for this signature in database
GPG Key ID: 040A1549143A8E33
1 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/frontend/src/pages/components/index.tsx
View File

@ -35,6 +35,8 @@ import {
import { renderDefaultTag, renderMinimalTag } from './renders/tag'; import { renderDefaultTag, renderMinimalTag } from './renders/tag';
import { renderToast, renderToastsWithCta } from './renders/toast'; import { renderToast, renderToastsWithCta } from './renders/toast';
import { renderTooltips } from './renders/tooltip'; import { renderTooltips } from './renders/tooltip';
import { Button } from 'components/shared/Button';
import { Modal } from 'components/shared/Modal';
const Page: React.FC = () => { const Page: React.FC = () => {
const [singleDate, setSingleDate] = useState<Value>(); const [singleDate, setSingleDate] = useState<Value>();
@ -43,6 +45,7 @@ const Page: React.FC = () => {
useState<string>('Test 1'); useState<string>('Test 1');
const [switchValue, setSwitchValue] = useState(false); const [switchValue, setSwitchValue] = useState(false);
const [selectedRadio, setSelectedRadio] = useState<string>(''); const [selectedRadio, setSelectedRadio] = useState<string>('');
const [openModal, setOpenModal] = useState(false);
return ( return (
<div className="relative h-full min-h-full"> <div className="relative h-full min-h-full">
@ -57,6 +60,31 @@ const Page: React.FC = () => {
<div className="w-full h border border-gray-200 px-20 my-10" /> <div className="w-full h border border-gray-200 px-20 my-10" />
{/* Modal */}
<div className="flex flex-col gap-10 items-center justify-between">
<div className="flex flex-col gap-10 items-center justify-between">
<h1 className="text-2xl font-bold">Modal</h1>
<div className="flex flex-col gap-10 items-center justify-center">
<Modal open={openModal}>
<Modal.Trigger asChild>
<Button onClick={() => setOpenModal(true)}>Open modal</Button>
</Modal.Trigger>
<Modal.Content>
<Modal.Header>Modal title</Modal.Header>
<Modal.Body>
<p>Modal content</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={() => setOpenModal(false)}>Close</Button>
</Modal.Footer>
</Modal.Content>
</Modal>
</div>
</div>
</div>
<div className="w-full h border border-gray-200 px-20 my-10" />
{/* Steps */} {/* Steps */}
<div className="flex flex-col gap-10 items-center justify-between"> <div className="flex flex-col gap-10 items-center justify-between">
<div className="flex flex-col gap-10 items-center justify-between"> <div className="flex flex-col gap-10 items-center justify-between">