Callout

React

"use client";
import Callout from "@radui/ui/Callout";
import { Bookmark } from "lucide-react";

export const BookmarkIcon = () => <Bookmark size={18} strokeWidth={2} />;

const CalloutExample = () => (
        <Callout.Root color="red">
            <Callout.Icon>
                <BookmarkIcon />
            </Callout.Icon>
        <Callout.Text>
            Seems like there's been an error. Please try again.
        </Callout.Text>
    </Callout.Root>
)

export default CalloutExample;

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

import { BookmarkIcon } from './CalloutExample';
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,idx) => {
          console.log(variant);
          return <span key={idx}>
            <Callout.Root variant={variant} color="red">
              <Callout.Icon>
                <BookmarkIcon />
              </Callout.Icon>
              <Callout.Text>
                Seems like there's been an error. Please try again.
              </Callout.Text>
            </Callout.Root>
            <Separator orientation="horizontal" style={{ marginTop: 20 }} />
            <TooltipWrapper label={calloutStyleDescription[variant]} placement="bottom">
              <Text className="text-gray-950 font-light inline-block cursor-help">
                {variant}
              </Text>
            </TooltipWrapper>
          </span>
        })}
      </div>
    </div>
  );
};

export default CalloutVariants;

React
"use client";
import Callout from '@radui/ui/Callout';
import { BookmarkIcon } from './CalloutExample';

const CalloutSizes = () => {
    const sizes = ['small', 'medium', 'large', 'x-large'];
    const variants = ['soft', 'outline'];
    return <div className='flex flex-col gap-4'>

             <div  className='flex flex-col gap-4 justify-center flex-wrap'>
                {sizes.map((size, index) => {
                    return (
                       <Callout.Root size={size} color="red" key={index}>
                            <Callout.Icon>
                                <BookmarkIcon />
                            </Callout.Icon>
                            <Callout.Text>
                                Seems like there's been an error. Please try again.
                            </Callout.Text>
                        </Callout.Root>
                    )
                })}
            </div>

    </div>
}

export default CalloutSizes;

React
"use client";
import Callout from "@radui/ui/Callout";
import { BookmarkIcon } from './CalloutExample';

const CalloutColor = () => {
    const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink'];
    return <div className='flex flex-col gap-4 justify-center flex-wrap'>
                {colors.map((color, index) => {
                    return (
                        <Callout.Root color={color} key={index}>
                            <Callout.Icon>
                                <BookmarkIcon />
                            </Callout.Icon>
                            <Callout.Text>
                                Seems like there's been an error. Please try again.
                            </Callout.Text>
                        </Callout.Root>
                    )
                })}
            </div>
}

export default CalloutColor;