import React from 'react';
import { Card, CardContent, Chip, Divider, Typography } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center'>
      <Card style={{ maxWidth: 360 }}>
        <CardContent>
          <Typography gutterBottom variant='h5'>Toothbrush</Typography>
          <Typography gutterBottom variant='h6'>$4.50</Typography>
          <Typography gutterBottom variant='body2'>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati natus id, expedita culpa iure earum? Vel harum blanditiis accusantium illum!
          </Typography>
          <Divider />
          <div>
            <Typography gutterBottom variant='body2'>Select type</Typography>
            <div className='flex gap-2'>
              <Chip color='primary' size='sm'>Soft</Chip>
              <Chip size='sm'>Medium</Chip>
              <Chip size='sm'>Hard</Chip>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

import React from 'react';
import { Divider, List, ListItem, ListItemText } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center'>
      <List className="w-full h-auto p-0 rounded-md border border-border border-solid bg-accent">
        <ListItem>
          <ListItemText primary='Full width variant below' />
        </ListItem>
        <Divider variant='fullwidth' />
        <ListItem>
          <ListItemText primary='Inset variant below' />
        </ListItem>
        <Divider variant='inset' />
        <ListItem>
          <ListItemText primary='Middle variant below' />
        </ListItem>
        <Divider variant='middle' />
        <ListItem>
          <ListItemText primary='List item' />
        </ListItem>
      </List>
    </div>
  );
}

import React from 'react';
import { Card, Divider, Typography } from 'archi-ui'
import { AlignCenter, AlignLeft, AlignRight, Bold, Italic } from 'lucide-react'
 
export default function MyReactPage() {
  return (
    <div className='flex flex-col items-center justify-center gap-4'>
      <Card variant='outlined' className='flex items-center justify-center gap-2 px-2 py-1'>
        <Typography>Cut</Typography>
        <Divider orientation='vertical' className='h-5' />
        <Typography>Copy</Typography>
        <Divider orientation='vertical' className='h-5' />
        <Typography>Paste</Typography>
        <Divider orientation='vertical' className='h-5' />
        <Typography>Select All</Typography>
      </Card>
      <Card variant='outlined' className='flex items-center justify-center gap-2 px-2 py-1'>
        <AlignLeft />
        <AlignCenter />
        <AlignRight />
        <Divider orientation='vertical' className='h-5' />
        <Bold />
      </Card>
      <Card variant='outlined' className='flex items-center justify-center gap-2 px-2 py-1'>
        <Bold />
        <Divider orientation='vertical' className='h-5' />
        <Italic />
      </Card>
    </div>
  );
}

import React from 'react';
import { Chip, Divider } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='w-full text-center bg-accent border border-solid rounded-md p-4'>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium doloribus labore sequi, alias impedit vel.</p>
      <Divider>Center</Divider>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium doloribus labore sequi, alias impedit vel.</p>
      <Divider textAlign='start'>Left</Divider>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium doloribus labore sequi, alias impedit vel.</p>
      <Divider textAlign='end'>Right</Divider>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium doloribus labore sequi, alias impedit vel.</p>
      <Divider><Chip>Chip</Chip></Divider>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium doloribus labore sequi, alias impedit vel.</p>
    </div>
  );
}