"use client";
import Callout from "@radui/ui/Callout";

export const BookmarkIcon = () => {
    return <svg width="24" height="24" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 2C3.22386 2 3 2.22386 3 2.5V13.5C3 13.6818 3.09864 13.8492 3.25762 13.9373C3.41659 14.0254 3.61087 14.0203 3.765 13.924L7.5 11.5896L11.235 13.924C11.3891 14.0203 11.5834 14.0254 11.7424 13.9373C11.9014 13.8492 12 13.6818 12 13.5V2.5C12 2.22386 11.7761 2 11.5 2H3.5Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>;
};

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;
Show more

"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-800 font-light inline-block cursor-help">
                {variant}
              </Text>
            </TooltipWrapper>
          </span>
        })}
      </div>
    </div>
  );
};

export default CalloutVariants;
Show more

"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;
Show more

"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;
Show more