import Callout from "@radui/ui/Callout";
import Text from "@radui/ui/Text";

const CalloutExample = () => (
  <Callout color="red">
        <BookmarkIcon />
        <Text className="font-bold">Error</Text>
        <Text>Something went wrong. Please try again later.</Text>
  </Callout>
)
Show more

import Callout from '@radui/ui/Callout';
import Text from "@radui/ui/Text";
import Separator from '@radui/ui/Separator';

import { BookmarkIcon } from '../docs/codeUsage';
import TooltipWrapper from '@/components/ui/Tooltip';

const CalloutVariants = () => {
  const calloutVariants = ['soft', 'outline'];
  const calloutStyleDescription = {
    soft: 'Soft callout have a soft background color and a border.',
    outline: 'Outline callout have a border and a background color.',
  };

  return (
    <div>
      <div className="flex items-center gap-4">
        {calloutVariants.map((variant) => (
          <span key={variant}>
            <Callout variant={variant} className="space-x-2">
                <BookmarkIcon />
                <Text className="font-bold">Error</Text>
                <Text>Something went wrong. Please try again later.</Text>
            </Callout>
            <Separator orientation="horizontal" style={{ marginTop: 20 }} />
            <TooltipWrapper label={calloutStyleDescription[variant]} placement="bottom">
              <Text className="text-gray-800 font-light inline-block cursor-help">
                {variant}
              </Text>
            </TooltipWrapper>
          </span>
        ))}
      </div>
    </div>
  );
};

export default CalloutVariants;
Show more

import Callout from '@radui/ui/Callout';
import Text from "@radui/ui/Text";
import { BookmarkIcon } from '../docs/codeUsage';

const CalloutSizes = () => {
    const sizes = ['small', 'medium', 'large', 'x-large'];
    const variants = ['soft', 'outline'];
    return <div className='flex flex-col gap-4'>
        {variants.map((variant, index) => {
            return <div key={index} className='flex justify-center flex-wrap gap-4'>
                {sizes.map((size, index) => {
                    return (
                       <Callout key={index} size={size} variant={variant}>
                         <BookmarkIcon />
                         <Text className="font-bold">Error</Text>
                         <Text>Something went wrong. Please try again later.</Text>
                       </Callout>)
                })}
            </div>
        })}
    </div>
}

export default CalloutSizes;
Show more

import Callout from '@radui/ui/Callout';
import Text from "@radui/ui/Text";
import { BookmarkIcon } from '../docs/codeUsage';

const CalloutColor = () => {
    const sizes = ['small', 'medium', 'large', 'x-large'];
    const variants = ['soft', 'outline'];
    return <div className='flex flex-col gap-4'>
        {variants.map((variant, index) => {
            return <div key={index} className='flex justify-center flex-wrap gap-4'>
                {sizes.map((size, index) => {
                    return (
                     <Callout key={index} size={size} variant={variant} color='pink'>
                        <BookmarkIcon />
                        <Text className="font-bold">Error</Text>
                        <Text>Something went wrong. Please try again later.</Text>
                     </Callout>)
                })}
            </div>
        })}
    </div>
}

export default CalloutColor;
Show more