@ozen-ui/kit

Version:
React component library
37 lines (36 loc) • 2.61 kB
JavaScript
import { __assign, __rest } from "tslib";
import React from 'react';
import { useThemeProps } from '../../../../hooks/useThemeProps';
import { cn, isFunction, polymorphicComponentWithRef } from '../../../../utils';
import { Avatar } from '../../../Avatar';
import { Stack } from '../../../Stack';
import { Typography } from '../../../Typography';
import { useSidebarContext } from '../../SidebarContext';
import { SidebarCollapsibleItem } from '../SidebarCollapsibleItem';
import { SIDEBAR_USER_DEFAULT_TAG, SIDEBAR_USER_SIZE_TO_AVATAR, } from './constants';
export var cnSidebarUser = cn('SidebarUser');
export var SidebarUser = polymorphicComponentWithRef(function (inProps, ref) {
    var _a;
    var props = useThemeProps({
        props: inProps,
        name: 'SidebarUser',
    });
    var _b = props.as, as = _b === void 0 ? SIDEBAR_USER_DEFAULT_TAG : _b, className = props.className, avatarProps = props.avatarProps, name = props.name, online = props.online, status = props.status, after = props.after, other = __rest(props, ["as", "className", "avatarProps", "name", "online", "status", "after"]);
    var _c = useSidebarContext(), variant = _c.variant, size = _c.size;
    var isCollapsed = variant !== 'full';
    return (React.createElement(SidebarCollapsibleItem, __assign({}, other, { ref: ref, as: as, className: cnSidebarUser('', [className]), fixed: React.createElement(Avatar, __assign({}, avatarProps, { online: isFunction(online) ? online({ collapsed: isCollapsed }) : online, name: (_a = avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.name) !== null && _a !== void 0 ? _a : name, size: SIDEBAR_USER_SIZE_TO_AVATAR[size], indicatorProps: { className: cnSidebarUser('Indicator') }, className: cnSidebarUser('Avatar', [avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.className]), colorScheme: {
                text: 'content-primary',
                background: 'background-tertiary',
            } })), collapsed: isCollapsed, classNames: {
            content: cnSidebarUser('Content'),
            fixed: cnSidebarUser('Fixed'),
        }, contentFullWidth: {
            s: 184,
            m: 200,
        } }),
        React.createElement(Stack, { direction: "column", className: cnSidebarUser('Info') },
            React.createElement(Typography, { variant: "text-s", as: "span", className: cnSidebarUser('Name') }, name),
            status),
        after && (React.createElement(Stack, { display: "block", align: "center", justify: "center", className: cnSidebarUser('After') }, after))));
});
SidebarUser.displayName = 'SidebarUser';