Dialog

"use client"
 
import React, { useState } from 'react'
import { Avatar, Button, Dialog, DialogTitle, List, ListItem, ListItemAvatar, ListItemButton, ListItemText, Typography } from 'archi-ui'
import { Plus } from 'lucide-react';
 
export default function MyReactPage() {
 
  const emails = ['username@gmail.com', 'user117@gmail.com'];
 
  const [open, setOpen] = useState(false)
  const [selectedValue, setSelectedValue] = useState(emails[1])
 
  const handleClick = () => {
    setOpen(true);
  }
 
  const handleCLose = () => {
    setOpen(false);
  }
  
  const handleItemClick = (email) => {
    setSelectedValue(email)
    setOpen(false);
  }
 
  return (
    <div className='flex flex-col items-center justify-center gap-4'>
      <Typography variant='subtitle1'>Seleted: {selectedValue}</Typography>
      <Button variant='filled' onClick={handleClick}>Open simple dialog</Button>
      <Dialog open={open} onClose={handleCLose}>
        <DialogTitle>Set backup account</DialogTitle>
          <List>
            {emails.map((email) => (
              <ListItem disablePadding key={email}>
                <ListItemButton onClick={() => handleItemClick(email)} className='gap-2'>
                  <ListItemAvatar>
                    <Avatar className='bg-primary' />
                  </ListItemAvatar>
                  <ListItemText primary={email} />
                </ListItemButton>
              </ListItem>
            ))}
            <ListItem disablePadding>
              <ListItemButton onClick={handleCLose} className='gap-2'>
                <ListItemAvatar>
                  <Avatar>
                    <Plus />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText primary='Add account' />
              </ListItemButton>
            </ListItem>
          </List>
      </Dialog>
    </div>
  );
}

"use client"
 
import React, { useState } from 'react'
import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from 'archi-ui'
 
export default function MyReactPage() {
 
  const [open, setOpen] = useState(false);
 
  const handleClick = () => {
    setOpen(true);
  }
 
  const handleCLose = () => {
    setOpen(false);
  }
 
  return (
    <div className='flex items-center justify-center'>
      <Button variant='filled' onClick={handleClick}>Open alert dialog</Button>
      <Dialog open={open} onClose={handleCLose}>
        <DialogTitle>Use Google's location services?</DialogTitle>
        <DialogContent>
          Let Google help apps detemine location. This means sening anonymous location data to Google, even no apps are running.
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCLose}>Disagree</Button>
          <Button onClick={handleCLose}>Agree</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

"use client"
 
import React, { useState } from 'react'
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Input } from 'archi-ui';
 
export default function MyReactPage() {
 
  const [open, setOpen] = useState(false);
 
  const handleClick = () => {
    setOpen(true);
  }
 
  const handleCLose = () => {
    setOpen(false);
  }
 
  return (
    <div className='flex items-center justify-center'>
      <Button variant='filled' onClick={handleClick}>Open form dialog</Button>
      <Dialog open={open} onClose={handleCLose}>
        <DialogTitle>Subscription</DialogTitle>
        <DialogContent>
          <p>To subscribe to this website, please enter your email address here. We will send updates occasionally.</p>
          <Input placeholder='Email address' fullwidth variant='standard' required autoFocus />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCLose}>Cancel</Button>
          <Button onClick={handleCLose}>Subscribe</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

"use client"
 
import React, { useState } from 'react'
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Typography } from 'archi-ui';
import { XIcon } from 'lucide-react';
 
export default function MyReactPage() {
 
  const [open, setOpen] = useState(false);
 
  const handleClick = () => {
    setOpen(true);
  }
 
  const handleCLose = () => {
    setOpen(false);
  }
 
  return (
    <div className='flex items-center justify-center'>
      <Button variant='filled' onClick={handleClick}>Open dialog</Button>
      <Dialog open={open} onClose={handleCLose}>
        <DialogTitle>Dialog title</DialogTitle>
        <IconButton onClick={handleCLose} className='absolute right-4 top-4'>
          <XIcon />
        </IconButton>
        <DialogContent dividers>
          <Typography gutterBottom>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi reiciendis nihil pariatur explicabo doloribus tempore, rem quaerat, assumenda minima est exercitationem delectus dicta suscipit, quidem fugiat consectetur quod officia eos.</Typography>
          <Typography gutterBottom>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi reiciendis nihil pariatur explicabo doloribus tempore, rem quaerat, assumenda minima est exercitationem delectus dicta suscipit, quidem fugiat consectetur quod officia eos.</Typography>
          <Typography gutterBottom>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi reiciendis nihil pariatur explicabo doloribus tempore, rem quaerat, assumenda minima est exercitationem delectus dicta suscipit, quidem fugiat consectetur quod officia eos.</Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCLose}>Save changes</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

"use client"
 
import React, { useState } from 'react'
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Typography } from 'archi-ui';
import { XIcon } from 'lucide-react';
 
export default function MyReactPage() {
 
  const [open, setOpen] = useState(false);
 
  const handleClick = () => {
    setOpen(true);
  }
 
  const handleCLose = () => {
    setOpen(false);
  }
 
  return (
    <div className='flex items-center justify-center'>
      <Button variant='filled' onClick={handleClick}>Open full screen dialog</Button>
      <Dialog fullscreen open={open} onClose={handleCLose}>
        <DialogTitle>Dialog title</DialogTitle>
        <IconButton onClick={handleCLose} className='absolute right-4 top-4'>
          <XIcon />
        </IconButton>
        <DialogContent dividers>
          <Typography gutterBottom>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi reiciendis nihil pariatur explicabo doloribus tempore, rem quaerat, assumenda minima est exercitationem delectus dicta suscipit, quidem fugiat consectetur quod officia eos.</Typography>
          <Typography gutterBottom>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi reiciendis nihil pariatur explicabo doloribus tempore, rem quaerat, assumenda minima est exercitationem delectus dicta suscipit, quidem fugiat consectetur quod officia eos.</Typography>
          <Typography gutterBottom>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi reiciendis nihil pariatur explicabo doloribus tempore, rem quaerat, assumenda minima est exercitationem delectus dicta suscipit, quidem fugiat consectetur quod officia eos.</Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCLose}>Cancel</Button>
          <Button onClick={handleCLose}>Save changes</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

"use client"
 
import React, { useState } from 'react'
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, MenuItem, Select, Switch, Typography } from 'archi-ui';
 
export default function MyReactPage() {
 
  const [open, setOpen] = useState(false);
  const [maxWidth, setMaxWidth] = useState('sm')
  const [fullWidth, setFullWidth] = useState(false)
    
  const handleClick = () => {
    setOpen(true);
  }
 
  const handleCLose = () => {
    setOpen(false);
  }
 
  const handlMaxWidthChange = (value) => {
    setMaxWidth(value)
  }
 
  const handlFullWidthChange = (event) => {
    setFullWidth(event.target.checked)
  }
 
  return (
    <div className='flex items-center justify-center'>
      <Button variant='filled' onClick={handleClick}>Open dialog</Button>
      <Dialog open={open} fullwidth={fullWidth} maxwidth={maxWidth} onClose={handleCLose}>
        <DialogTitle>Optional sizes</DialogTitle>
        <DialogContent>
          <p>You can set my maximum width and whether to adapt or not.</p>
          <div className='flex flex-col items-center justify-center gap-4'>
            <FormControl>
              <Select value={maxWidth} autoFocus onValueChange={handlMaxWidthChange}>
                <MenuItem value='false'>false</MenuItem>
                <MenuItem value='xs'>xs</MenuItem>
                <MenuItem value='sm'>sm</MenuItem>
                <MenuItem value='md'>md</MenuItem>
                <MenuItem value='lg'>lg</MenuItem>
                <MenuItem value='xl'>xl</MenuItem>
              </Select>
            </FormControl>
            <FormControl>
              <Switch variant='standard' checked={fullWidth} onChange={handlFullWidthChange} />
              <Typography>Full width</Typography>
            </FormControl>
          </div>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCLose}>Close</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

"use client"
 
import React, { useState } from 'react'
import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from 'archi-ui';
 
export default function MyReactPage() {
 
  const [open, setOpen] = useState(false);
  const [scroll, setScroll] = useState('inside');
    
  const handleClick = (scrollType) => {
    setOpen(true);
    setScroll(scrollType)
  }
 
  const handleCLose = () => {
    setOpen(false);
  }
 
  return (
    <div className='flex items-center justify-center gap-2'>
      <Button variant='filled' onClick={() => handleClick('inside')}>Scroll inside</Button>
      <Button variant='filled' onClick={() => handleClick('outside')}>Scroll outside</Button>
      <Dialog open={open} scroll={scroll} onClose={handleCLose}>
        <DialogTitle>Subscribe</DialogTitle>
        <DialogContent dividers={scroll === 'inside'}>
          {[...new Array(50)].map(() => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, tempora cupiditate numquam non velit ipsam laboriosam aut harum doloribus aperiam nesciunt distinctio in corrupti sit vitae itaque omnis assumenda porro.',).join('\n')}
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCLose}>Close</Button>
          <Button onClick={handleCLose}>Subscribe</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}