Card

import { Avatar, Flex, IconButton, Paper, Text } from '@pillar-ui/core'
import { Checkbox, DotsHorizontal, Trophy, Users } from '@pillar-ui/icons'
import React from 'react'

export const CardProfile = () => {
  return (
    <Flex
      background="B1"
      border
      width="fit-content"
      p="6"
      corner="3"
      as={Paper}
      gap="6"
      direction="col"
      justify="center"
    >
      <Flex justify="between" items="center" gap="2">
        <Text weight="5" size="6">
          Profile
        </Text>
        <IconButton size="3" title="More Options" icon={<DotsHorizontal />} />
      </Flex>
      <Flex direction="col" items="center">
        <Avatar src="https://i.pravatar.cc/60?img=20" variant="dashed" size="7" title="Hamza Miloud Amar" />
        <Text weight="5">Hamza Miloud Amar</Text>
        <Text color="b" low size="3">
          Frontend Developer
        </Text>
      </Flex>

      <Flex gap="4">
        <Paper as={Flex} gap="2" p="2" border corner="2">
          <Users width="16" />
          <Text weight="5">11</Text>
        </Paper>
        <Paper as={Flex} gap="2" p="2" border corner="2">
          <Checkbox width="16" />
          <Text weight="5">25</Text>
        </Paper>
        <Paper as={Flex} gap="2" p="2" border corner="2">
          <Trophy width="16" />
          <Text weight="5">125</Text>
        </Paper>
      </Flex>
    </Flex>
  )
}

import { Avatar, AvatarGroup, Button, Flex, Link, Paper, Text } from '@pillar-ui/core'
import React from 'react'

export const CardSocial = () => {
  return (
    <Paper as="article" background="B1" dir="ltr" border p="4" corner="3" flow="4">
      <Flex items="center" justify="between" gap="3">
        <Flex gap="4">
          <Avatar color="b" variant="dashed" />
          <div>
            <Text>Hamza Miloud Amar</Text>
            <Text color="b" low size="3">
              Frontend Developer
            </Text>
          </div>
        </Flex>
        <Button>Follow</Button>
      </Flex>
      <div>
        <Text color="b" low size="4">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor dolores rerum tempora minus dignissimos beatae
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor dolores rerum tempora minus dignissimos beatae
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor dolores rerum tempora minus dignissimos beatae
        </Text>
      </div>
      <Flex gap="2" items="center">
        <AvatarGroup size="1">
          <Avatar src="https://i.pravatar.cc/120?img=1" title="Hamza" />
          <Avatar src="https://i.pravatar.cc/120?img=2" title="Hamza" />
          <Avatar src="https://i.pravatar.cc/120?img=3" title="Hamza" />
          <Avatar src="https://i.pravatar.cc/120?img=4" title="Hamza" />
          <Avatar src="https://i.pravatar.cc/120?img=5" title="Hamza" />
          <Avatar fallback="32+" title="More Viewers" />
        </AvatarGroup>
        <Link size="3" color="b">
          Dan and 38 others
        </Link>
      </Flex>
      <Flex gap="3">
        <Button variant="soft" color="b" size="4">
          250 Likes
        </Button>
        <Button variant="soft" color="b" size="4">
          180 Followers
        </Button>
      </Flex>
    </Paper>
  )
}

import { Avatar, AvatarGroup, Button, Flex, Link, Paper, Text } from '@pillar-ui/core'
import React from 'react'

export const CardSocialRtl = () => {
  return (
    <Paper background="B1" as="article" dir="rtl" border p="4" corner="3" flow="4">
      <Flex items="center" justify="between" gap="3">
        <Flex gap="4">
          <Avatar color="b" variant="dashed" />
          <div>
            <Text>حمزة ميلود عمار</Text>
            <Text color="b" low size="3">
              مطور واجهات أمامية
            </Text>
          </div>
        </Flex>
        <Button>تابع</Button>
      </Flex>
      <div>
        <Text color="b" low size="4">
          البرمجة هي فن وعلم. نكتب أوامر للحاسوب لتنفيذ مهام محددة. تُستخدم لبناء التطبيقات، المواقع، وأنظمة التشغيل.
          تتطلب منطقًا وإبداعًا. تفتح البرمجة آفاقًا واسعة في عالم التكنولوجيا.
        </Text>
      </div>
      <Flex gap="2" items="center">
        <AvatarGroup size="1">
          <Avatar src="https://i.pravatar.cc/120?img=1" title="Hamza" />
          <Avatar src="https://i.pravatar.cc/120?img=2" title="Hamza" />
          <Avatar src="https://i.pravatar.cc/120?img=3" title="Hamza" />
          <Avatar src="https://i.pravatar.cc/120?img=4" title="Hamza" />
          <Avatar src="https://i.pravatar.cc/120?img=5" title="Hamza" />
          <Avatar fallback="32+" title="More Viewers" />
        </AvatarGroup>
        <Link size="3" color="b">
          دان و 38 آخرون
        </Link>
      </Flex>
      <Flex gap="3">
        <Button variant="soft" color="b" size="4">
          250 الإعجابات
        </Button>
        <Button variant="soft" color="b" size="4">
          180 المتابعون
        </Button>
      </Flex>
    </Paper>
  )
}

import { Avatar, Chips, Flex, Grid, Paper, Text } from '@pillar-ui/core'

interface UserProps {
  id: number
  online?: boolean
  name?: string
  email?: string
  job?: string
}

const USERS: UserProps[] = [
  {
    id: 1,
    name: 'Hamza Miloud Amar',
    email: 'hamza@gmail.com',
    job: 'Frontend Developer',
    online: true,
  },
  {
    id: 2,
    name: 'John Doe',
    email: 'john-doe@gmail.com',
    job: 'Backend Developer',
    online: false,
  },
]

const User = ({ online = false, name, email, job }: UserProps) => {
  const COLOR = online ? 'su' : 'd'
  const STATUS = online ? 'Online' : 'Offline'
  return (
    <Flex background="B1" as={Paper} p="4" corner="2" border items="center" justify="between" gap="5">
      <Flex gap="3">
        <Avatar title="John Doe" size="4" />
        <div>
          <Text size="4" weight="5">
            {name}
          </Text>
          <Text size="3" color="b" low>
            {email}
          </Text>
        </div>
      </Flex>
      <Flex gap="2" items="center">
        <Chips color={COLOR}>{STATUS}</Chips>
        <Chips color="b" variant="soft">
          {job}
        </Chips>
      </Flex>
    </Flex>
  )
}

export const CardUser = () => {
  return (
    <Grid cols={{ default: '1fr', md: '1fr 1fr' }} gap="4" items="center">
      {USERS.map((user) => (
        <User key={user.id} {...user} />
      ))}
    </Grid>
  )
}

import { Avatar, Button, Flex, Paper, Rating, Text } from '@pillar-ui/core'
import { Eye, ThumbDown, ThumbUp } from '@pillar-ui/icons'

export const CardReview = () => {
  return (
    <Paper background="B1" flow="4" border corner="2" p="5">
      <Flex as="header" items="center" justify="between">
        <Flex items="center" gap="3">
          <Avatar title="Hamza Miloud Amar" />
          <div>
            <Text weight="5" size="4">
              Hamza Miloud Amar
            </Text>
            <Rating rating={5} size="3" hideTitle title="Review rating 5 of 5" />
          </div>
        </Flex>
        <Text color="b" low size="3">
          1 day ago
        </Text>
      </Flex>
      <div className="">
        <Text size="4" color="b" low>
          I loved the product. It was very good. I would recommend it to everyone. I am very happy with the product.
        </Text>
      </div>
      <footer>
        <Flex items="center" justify="between">
          <Flex gap="3">
            <Button icon={<ThumbUp />} variant="soft" color="b" size="4">
              Like
            </Button>
            <Button icon={<ThumbDown />} variant="soft" color="b" size="4">
              Dislike
            </Button>
          </Flex>
          <Button icon={<Eye />} variant="text" color="d" size="4">
            Report Review
          </Button>
        </Flex>
      </footer>
    </Paper>
  )
}

import { Avatar, Flex, Grid, Paper, Rating, Text } from '@pillar-ui/core'
import { Quotes } from '@pillar-ui/icons'

const Testimonial = () => {
  return (
    <Paper as="article" p="4" background="B2" border corner="3">
      <Flex justify="between" direction="col" as={Paper} gap="4">
        <Flex gap="3" items="center">
          <Avatar variant="dashed" />
          <Paper flow="1">
            <div>
              <Flex gap="2" items="center">
                <Text size="4" weight="7">
                  Hamza Miloud Amar
                </Text>
                <Text color="b" low size="2">
                  (FrontEnd Developer)
                </Text>
              </Flex>
              <Text color="b" low size="3">
                hamza@gmail.com
              </Text>
            </div>
            <Rating rating={4} hideTitle size="3" />
          </Paper>
        </Flex>
        <Flex justify="between" items="end" gap="4">
          <Text color="b" low size="4">
            I loved the product. It was very good. I would recommend it to everyone. I am very happy with the product.
          </Text>
          <Quotes width="36" />
        </Flex>
      </Flex>
    </Paper>
  )
}

export const CardTestimonials = () => {
  return (
    <Grid gap="4" cols={{ default: '1fr', md: '1fr 1fr' }}>
      <Testimonial />
      <Testimonial />
      <Testimonial />
    </Grid>
  )
}

import { Flex, IconButton, Paper, ProgressBar, Text } from '@pillar-ui/core'
import { PlayerPlay, PlayerSkipBack, PlayerSkipForward } from '@pillar-ui/icons'
import React from 'react'

export const CardMedia = () => {
  return (
    <Flex background="B1" border width="fit-content" p="4" corner="3" as={Paper} gap="6" items="center">
      <Paper flow="5">
        <div>
          <Text size="4" weight="5">
            Card Media Here
          </Text>
          <Text color="b" low size="4">
            @miloudamar
          </Text>
        </div>
        <Paper flow="3">
          <ProgressBar color="se" label="Progress" value={50} size="1" />
          <Flex gap="3">
            <IconButton corner="full" size="4" icon={<PlayerSkipBack />} title="Go to Previous Sound" />
            <IconButton corner="full" size="4" icon={<PlayerPlay />} title="play Sound" />
            <IconButton corner="full" size="4" icon={<PlayerSkipForward />} title="Go to Next Sound" />
          </Flex>
        </Paper>
      </Paper>
      <div>
        <img className="R-3" src="https://picsum.photos/id/15/200/100" alt="kitten" />
      </div>
    </Flex>
  )
}

'use client'

import { Button, Chips, Flex, IconButton, Paper, Separator, Text } from '@pillar-ui/core'
import { Heart } from '@pillar-ui/icons'
import React, { useState } from 'react'

export const CardEcommerce = () => {
  const [isFavorite, setIsFavorite] = useState(false)
  return (
    <Paper width="300px" border>
      <img width={300} src="https://www.picsum.photos/300/200" alt="" />
      <Paper p="5" flow="2">
        <Flex gap="2" justify="between" items="start">
          <div>
            <Text weight="5" truncate="1">
              Hello world Nice to Meet You
            </Text>
            <Flex gap="2" wrap>
              <Chips variant="soft" color="b">
                Hello
              </Chips>
              <Chips variant="soft" color="b">
                Hello
              </Chips>
              <Chips variant="soft" color="b">
                Hello
              </Chips>
              <Chips variant="soft" color="b">
                Hello
              </Chips>
            </Flex>
          </div>
          <IconButton
            size="4"
            onClick={()=> setIsFavorite(!isFavorite)}
            icon={<Heart width="16" fill={isFavorite ? 'var(--D11)' : 'none'} />}
            title="Favorite"
            color={isFavorite ? 'd' : 'b'}
            variant={isFavorite ? 'mixed' : 'soft'}
          />
        </Flex>

        <Text size="4" color="b" low truncate="4">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor dolores rerum tempora minus dignissimos beatae
          reprehenderit neque assumenda, maxime commodi voluptates incidunt fugit optio illo ab ipsum architecto ad
          harum.
        </Text>
        <Button fluid>Buy Now</Button>
      </Paper>
    </Paper>
  )
}

import { Avatar, Button, Flex, Heading, Paper, Separator, Text } from '@pillar-ui/core'
import { ChevronDown, CircleCheck, User, Users } from '@pillar-ui/icons'
import React from 'react'

const Item = ({ id }: { id: string }) => {
  return (
    <Flex as="article" justify="between">
      <Flex gap="3" items="center">
        <Avatar src={`https://i.pravatar.cc/120?img=${id}`} size="4" title="bitcoin" variant="dashed" />
        <div>
          <Flex gap="1" items="center">
            <Text size="3" weight="5">
              Hamza Miloud Amar
            </Text>
            <CircleCheck width={16} fill="var(--I9)" stroke="var(--B1)" />
          </Flex>
          <Text size="3" color="se" low>
            @hamzaAmar
          </Text>
        </div>
      </Flex>
      <Button icon={<User />} variant="soft" size="3" color="b">
        Follow
      </Button>
    </Flex>
  )
}

export const CardList = () => {
  return (
    <Flex as="article" direction="col" gap="5" justify="between" className="l_box">
      <Flex justify="between" items="center">
        <Flex gap="3">
          <Users width="20" />
          <Heading as="h3" weight="5" size="4">
            People You may Know
          </Heading>
        </Flex>
        <Button size="3" variant="link">
          More
        </Button>
      </Flex>
      <Separator />
      <Paper flow="4">
        <Item id="1" />
        <Item id="2" />
        <Item id="3" />
        <Item id="4" />
      </Paper>
    </Flex>
  )
}

import { Avatar, AvatarGroup, Badge, Button, Flex, Paper, Separator, Switch, Text } from '@pillar-ui/core'
import { Plus } from '@pillar-ui/icons'
import React from 'react'

const MeetingItem = () => {
  return (
    <Paper gap="4" background="B1" as={Flex} wrap justify="between" items="center" p="3">
      <Text leading="1" size="7" weight="6">
        09:30
      </Text>

      <div>
        <Text weight="5">Daily Standup</Text>
        <Text size="3" color="b" low>
          Team Organization
        </Text>
      </div>

      <AvatarGroup size="2">
        <Avatar src="https://i.pravatar.cc/120?img=1" title="Hamza" />
        <Avatar src="https://i.pravatar.cc/120?img=2" title="Hamza" />
        <Avatar src="https://i.pravatar.cc/120?img=3" title="Hamza" />
        <Avatar src="https://i.pravatar.cc/120?img=4" title="Hamza" />
        <Avatar src="https://i.pravatar.cc/120?img=5" title="Hamza" />
      </AvatarGroup>

      <Flex gap="2" items="center">
        <Text color="b" low>
          Privacy
        </Text>
        <Switch label="Privacy" />
      </Flex>
    </Paper>
  )
}

export const CardMeeting = () => {
  return (
    <Paper background="B1" as="section" corner="5" p="5" flow="4">
      <Flex justify="between" items="center" gap="3">
        <Flex items="center" gap="2">
          <Text weight="5" size="5">
            Today Meeting
          </Text>
          <Badge variant="soft" size="4" type="numeric" number={2} />
        </Flex>

        <Button icon={<Plus />} variant="text">
          Add New Meet
        </Button>
      </Flex>

      <Paper className="B-s">
        <MeetingItem />
        <MeetingItem />
        <MeetingItem />
      </Paper>
    </Paper>
  )
}