@fidely-ui/react
Version:
Fidely UI is a modern, beautifully crafted React design system powered by Ark UI and Panda CSS, delivering accessible and themeable components for building exceptional web apps
23 lines (22 loc) • 1.76 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { cx } from '@fidely-ui/styled-system/css';
import { Avatar } from '../avatar/index';
import { Text } from '../text/index';
import { Flex } from '../flex/index';
import { Stack } from '../stack/index';
export const Persona = forwardRef(function Persona(props, ref) {
const { name, title, img, imgSize = 'md', orientation = 'horizontal', spacing = 3, className, ...rest } = props;
const sizeMap = {
xs: { gap: 1, nameSize: 'xs', titleSize: 'xs', nameWeight: 'medium' },
sm: { gap: 1.5, nameSize: 'sm', titleSize: 'xs', nameWeight: 'medium' },
md: { gap: 2, nameSize: 'sm', titleSize: 'xs', nameWeight: 'semibold' },
lg: { gap: 3, nameSize: 'md', titleSize: 'sm', nameWeight: 'semibold' },
xl: { gap: 3.5, nameSize: 'md', titleSize: 'sm', nameWeight: 'semibold' },
'2xl': { gap: 4, nameSize: 'lg', titleSize: 'md', nameWeight: 'bold' },
};
const current = sizeMap[imgSize];
return (_jsxs(Flex, { ref: ref, flexDirection: orientation === 'horizontal' ? 'row' : 'column', alignItems: orientation === 'horizontal' ? 'center' : 'flex-start', gap: spacing ?? current.gap, className: cx('fidely-persona', className), ...rest, children: [_jsxs(Avatar.Root, { size: imgSize, children: [_jsx(Avatar.Fallback, { name: name }), _jsx(Avatar.Image, { src: img, alt: name })] }), (name || title) && (_jsxs(Stack, { gap: '0', children: [name && (_jsx(Text, { fontWeight: "medium", color: "fg.default", fontSize: current.nameSize, children: name })), title && (_jsx(Text, { color: "fg.muted", fontSize: current.titleSize, children: title }))] }))] }));
});
Persona.displayName = 'Persona';