60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
"use client";
|
|
/*
|
|
* Documentation:
|
|
* Help circle — https://app.subframe.com/f023064a5ca0/library?component=Help+circle_bdf8292f-ad00-49d7-9ca6-98c24f58f842
|
|
*/
|
|
|
|
import React from "react";
|
|
import { FeatherHelpCircle } from "@subframe/core";
|
|
import * as SubframeCore from "@subframe/core";
|
|
import * as SubframeUtils from "../../utils";
|
|
|
|
export interface HelpCircleRootProps
|
|
extends React.HTMLAttributes<HTMLDivElement> {
|
|
icon?: React.ReactNode;
|
|
size?: "small" | "medium" | "large";
|
|
shape?: "default" | "background";
|
|
className?: string;
|
|
}
|
|
|
|
const HelpCircleRoot = React.forwardRef<HTMLDivElement, HelpCircleRootProps>(
|
|
function HelpCircleRoot(
|
|
{
|
|
icon = <FeatherHelpCircle />,
|
|
size = "medium",
|
|
shape = "default",
|
|
className,
|
|
...otherProps
|
|
}: HelpCircleRootProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/bdf8292f flex cursor-pointer items-center justify-center rounded-md",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
{icon ? (
|
|
<SubframeCore.IconWrapper
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-default-medium-0 font-body-default-medium-0 text-icon-neutral-tertiary group-hover/bdf8292f:text-icon-neutral-secondary",
|
|
{
|
|
"text-body-large-0 font-body-large-0": size === "large",
|
|
"text-body-small-regular-0 font-body-small-regular-0":
|
|
size === "small",
|
|
}
|
|
)}
|
|
>
|
|
{icon}
|
|
</SubframeCore.IconWrapper>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
export const HelpCircle = HelpCircleRoot;
|