Card

import React from 'react';
import { Avatar, Button, Card, CardActions, CardContent, CardHeader, IconButton, Typography } from 'archi-ui'
import { EllipsisVertical } from 'lucide-react'
 
export default function MyReactPage() {
  return (
    <Card>
      <CardHeader
        title='Lorem ipsum dolor sit amet'
        subheader='June 11, 2025'
        avatar={<Avatar className='bg-warning'>R</Avatar>}
        action={
          <IconButton>
            <EllipsisVertical size={16} />
          </IconButton>
        }
      />
      <CardContent>
        <Typography variant='body1'>Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptatem officia quidem fuga quis ipsa, atque cum tenetur adipisci quisquam, nisi dignissimos minus, voluptates explicabo ex. Earum consequatur atque amet.</Typography>
      </CardContent>
      <CardActions>
        <Button>Learn more</Button>
        <Button>Share</Button>
      </CardActions>
    </Card>
  );
}

import React from 'react';
import { Button, Card, CardActions, CardContent } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center gap-2'>
      <Card variant='outlined'>
        <CardContent>
          <h2 className='text-2xl'>Outlined</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptatem officia quidem fuga quis ipsa, atque cum tenetur adipisci quisquam, nisi dignissimos minus, voluptates explicabo ex. Earum consequatur atque amet.</p>
        </CardContent>
        <CardActions>
          <Button>Learn more</Button>
        </CardActions>
      </Card>
      <Card variant='elevation'>
        <CardContent>
          <h2 className='text-2xl'>Elevation</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptatem officia quidem fuga quis ipsa, atque cum tenetur adipisci quisquam, nisi dignissimos minus, voluptates explicabo ex. Earum consequatur atque amet.</p>
        </CardContent>
        <CardActions>
          <Button>Learn more</Button>
        </CardActions>
      </Card>
    </div>
  );
}

import React from 'react';
import { Avatar, Button, Card, CardActions, CardContent, CardHeader, IconButton } from 'archi-ui'
import { EllipsisVertical, Heart, Share2 } from 'lucide-react'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center gap-2'>
      <Card style={{ width: '350px' }}>
        <CardHeader
          avatar={
            <Avatar size='md'>R</Avatar>
          }
          title='Lorem ipsum dolor sit amet'
          subheader='June 11, 2025'
          action={
            <IconButton>
              <EllipsisVertical size={16} />
            </IconButton>
          }
        />
        <img src='/caterpillar.jpg' alt='Caterpillar' />
        <CardContent className='flex flex-col items-center'>
          <p className='text-justify'>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione fugiat voluptas rem quasi similique tempora? Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </CardContent>
        <CardActions className='justify-between'>
          <div className='flex items-center gap-2'>
            <IconButton>
              <Heart />
            </IconButton>
            <IconButton>
              <Share2 />
            </IconButton>
          </div>
          <Button variant='link'>Read more</Button>
        </CardActions>
      </Card>
    </div>
  );
}

import React from 'react';
import { Avatar, Button, Card, CardActions, CardContent, FormControl, FormHelperText, Input, Label, Link } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center'>
      <Card style={{ width: '350px' }}>
        <div className='flex items-center justify-center p-4'>
          <Avatar className='w-12 h-12 bg-secondary' />
        </div>
        <CardContent>
          <FormControl error>
            <Label htmlFor='email'>Email:</Label>
            <Input type='email' placeholder='Email' defaultValue='jhondoe@gmail.co' fullwidth />
            <FormHelperText>Invalid email Id</FormHelperText>
          </FormControl>
          <FormControl>
            <Label htmlFor='password'>Password:</Label>
            <Input type='password' placeholder='Password' fullwidth />
          </FormControl>
          <Link href='#' underline='hover'>Forget password?</Link>
        </CardContent>
        <CardActions className='flex flex-col justify-center gap-2'>
          <Button variant='filled' color='primary' fullwidth>Login</Button>
          <Link href='#' underline='hover'>Don't have account? Sign-up</Link>
        </CardActions>
      </Card>
    </div>
  );
}

import React from 'react';
import { Card, CardContent, IconButton, Typography } from 'archi-ui'
import { Play, SkipBack, SkipForward } from 'lucide-react'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center'>
      <Card className='flex' style={{ width: '360px' }}>
        <div className='flex flex-col flex-5/6'>
          <CardContent className='flex flex-col'>
            <Typography variant="h3">
              Live From Space
            </Typography>
            <Typography
              variant="subtitle1"
              className='text-secondary'
            >
              Mac Miller
            </Typography>
          </CardContent>
          <div className='flex items-center pl-2 pb-2'>
            <IconButton>
              <SkipBack size={16} />
            </IconButton>
            <IconButton size='lg'>
              <Play />
            </IconButton>
            <IconButton>
              <SkipForward size={16} />
            </IconButton>
          </div>
        </div>
        <div>
          <img
            src='/music1.jpg'
            alt="Live from space album cover"
            style={{ height: '100%' }}
          />
        </div>
      </Card>
    </div>
  );
}