import Button from "@radui/ui/Button"

const ButtonExample = () => (
    <div>
        <Button color="green">Click Me!</Button>
    </div>
)

import Text from '@radui/ui/Text';
import Separator from '@radui/ui/Separator';
import Tooltip from '@radui/ui/Tooltip';
import Button from '@radui/ui/Button';

const Arrow = () => (
  <svg 
    width="15" 
    height="15" 
    viewBox="0 0 15 15" 
    fill="none" 
    xmlns="http://www.w3.org/2000/svg"
  >
    <path 
      d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" 
      fill="currentColor" 
      fillRule="evenodd" 
      clipRule="evenodd"
    />
  </svg>
);

const ButtonVariants = () => {
  const buttonVariants = ['solid', 'soft', 'outline', 'ghost'];
  const buttonStyleDescription = {
    solid: 'Solid buttons are the most common type of button. They have a solid background color and a border.',
    soft: 'Soft buttons have a soft background color and a border.',
    outline: 'Outline buttons have a border and a background color.',
    ghost: 'Ghost buttons have a border and a background color.',
  };

  return (
    <div>
      <div className="flex items-center gap-4">
        {buttonVariants.map((variant) => (
          <span key={variant}>
            <Button variant={variant} className="space-x-2">
              <span >Button</span>
              <Arrow />
            </Button>
            <Separator orientation="horizontal" style={{ marginTop: 20 }} />
            <Tooltip label={buttonStyleDescription[variant]} placement="bottom">
              <Text className="text-gray-800 font-light inline-block cursor-help">
                {variant}
              </Text>
            </Tooltip>
          </span>
        ))}
      </div>
    </div>
  );
};

export default ButtonVariants;

import Button from '@radui/ui/Button';


const ButtonSizes = () => {
    const sizes = ['small', 'medium', 'large', 'x-large'];
    const variants = ['solid', 'soft', 'outline', 'ghost'];
    return <div className='flex flex-col gap-4'>
        {variants.map((variant, index) => {
            return <div key={index} className='flex items-center gap-4'>
                {sizes.map((size, index) => {
                    return <Button key={index} size={size} variant={variant}>
                        <span>Button</span>
                        </Button>
                })}
            </div>
        })}
    </div>
}

export default ButtonSizes;

import Button from '@radui/ui/Button';


const ButtonColor = () => {
    const sizes = ['small', 'medium', 'large', 'x-large'];
    const variants = ['solid', 'soft', 'outline', 'ghost'];
    return <div className='flex flex-col gap-4'>
        {variants.map((variant, index) => {
            return <div key={index} className='flex items-center gap-4'>
                {sizes.map((size, index) => {
                    return <Button key={index} size={size} variant={variant} color='pink'>Button</Button>
                })}
            </div>
        })}
    </div>
}

export default ButtonColor;