@lark-apaas/miaoda-core 0.1.0-alpha.1

package/lib/components/SidebarNav/Sidebar.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { clsxWithTw } from "../../utils/utils.js";
+import { LogoInfo, NavMenu, TopHeaderThemeClass, UserAvatarLayout } from "../common/index.js";
+function SidebarNav({ activeClassName, className, navList }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: clsxWithTw('h-full overflow-y-auto scrollbar-none w-[260px] dark:border-gray-800', className),
+        children: /*#__PURE__*/ jsxs("div", {
+            className: clsxWithTw('fixed top-0 bottom-0 left-0 w-[260px] flex flex-col border-r', TopHeaderThemeClass, className),
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    className: "w-full px-2 pt-2 h-12 mb-3",
+                    children: /*#__PURE__*/ jsx(LogoInfo, {
+                        className: "px-2 pt-[9px] pb-[15px]"
+                    })
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "flex-1 overflow-auto min-h-0",
+                    children: /*#__PURE__*/ jsx(NavMenu, {
+                        navList: navList,
+                        className: clsxWithTw('border-0', className),
+                        activeClassName: activeClassName,
+                        mode: "vertical"
+                    })
+                }),
+                /*#__PURE__*/ jsx(UserAvatarLayout, {
+                    className: "mt-2"
+                })
+            ]
+        })
+    });
+}
+export { SidebarNav as default };

package/lib/components/SidebarNav/index.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { NavProps } from '../../types';
+export declare function SideNavigation(props: NavProps): React.JSX.Element;
+export { SideNavigation as SidebarNav };
+export default SideNavigation;

package/lib/components/SidebarNav/index.js

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import { useIsMobile } from "../../hooks/useIsMobile.js";
+import { useLocation } from "react-router-dom";
+import DrawerNav from "./DrawerNav.js";
+import Sidebar from "./Sidebar.js";
+import DropdownNav from "./DropdownNav.js";
+import { ConfigProvider } from "antd";
+import { generateDarkTheme, generateLightTheme } from "../theme/util.js";
+import { useTheme } from "../../hooks/useTheme.js";
+function SideNavigationBar({ navList = [], className, activeClassName, mobileVariant = 'normal' }) {
+    const isMobile = useIsMobile();
+    const location = useLocation();
+    useEffect(()=>{
+        window.scrollTo(0, 0);
+    }, [
+        location.pathname
+    ]);
+    if (isMobile) {
+        if ('dropdown' === mobileVariant) return /*#__PURE__*/ jsx(DropdownNav, {
+            navList: navList,
+            className: className,
+            activeClassName: activeClassName
+        });
+        return /*#__PURE__*/ jsx(DrawerNav, {
+            navList: navList,
+            className: className,
+            activeClassName: activeClassName
+        });
+    }
+    return /*#__PURE__*/ jsx(Sidebar, {
+        navList: navList,
+        className: className,
+        activeClassName: activeClassName
+    });
+}
+function SideNavigation(props) {
+    const { theme } = useTheme();
+    const { darkColorPrimary, lightColorPrimary } = props;
+    const themeToken = useMemo(()=>{
+        if ('dark' === theme && darkColorPrimary) return generateDarkTheme({
+            colorPrimary: darkColorPrimary
+        });
+        if ('light' === theme && lightColorPrimary) return generateLightTheme({
+            colorPrimary: lightColorPrimary
+        });
+        return {};
+    }, [
+        theme,
+        darkColorPrimary,
+        lightColorPrimary
+    ]);
+    return /*#__PURE__*/ jsx(ConfigProvider, {
+        theme: themeToken,
+        children: /*#__PURE__*/ jsx(SideNavigationBar, {
+            ...props
+        })
+    });
+}
+const SidebarNav = SideNavigation;
+export { SideNavigation, SideNavigation as SidebarNav, SidebarNav as default };

package/lib/components/TopNav/BottomNav.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 底部导航栏：应用模式，移动端转用
+ */
+import * as React from 'react';
+import { NavItemProps } from '../common';
+import { BaseNavProps } from '../../types';
+interface BottomNavProps extends BaseNavProps {
+    navList: NavItemProps[];
+    maxBottomItems?: number;
+}
+export declare function BottomNav({ navList, className, maxBottomItems }: BottomNavProps): React.JSX.Element;
+export {};

package/lib/components/TopNav/BottomNav.js

@@ -0,0 +1,81 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { clsxWithTw } from "../../utils/utils.js";
+import { BottomBarThemeClass, MaskThemeClass, MoreNavItem, NavItem } from "../common/index.js";
+function BottomNav({ navList = [], className, maxBottomItems = 6 }) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const bottomBarRef = useRef(null);
+    const hasMoreItems = navList.length > maxBottomItems;
+    const bottomNavItems = hasMoreItems ? navList.slice(0, maxBottomItems - 1) : navList.slice(0, maxBottomItems);
+    const expandedNavItems = hasMoreItems ? navList.slice(maxBottomItems - 1) : [];
+    const expandedNavItemsPath = useMemo(()=>expandedNavItems.map((item)=>item.to), [
+        expandedNavItems
+    ]);
+    const toggleExpanded = ()=>{
+        setIsExpanded(!isExpanded);
+    };
+    const collapsePanel = ()=>{
+        setIsExpanded(false);
+    };
+    const displayGridCols = bottomNavItems.length + (hasMoreItems ? 1 : 0);
+    useEffect(()=>{
+        if (bottomBarRef.current) {
+            const bottomNavMask = document.createElement('div');
+            bottomNavMask.className = 'w-full h-16';
+            bottomNavMask.style.height = `${bottomBarRef.current.offsetHeight}px`;
+            document.body.appendChild(bottomNavMask);
+            return ()=>{
+                document.body.removeChild(bottomNavMask);
+            };
+        }
+    }, []);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            isExpanded ? /*#__PURE__*/ jsx("div", {
+                className: clsxWithTw('fixed inset-0 z-20', MaskThemeClass),
+                onClick: collapsePanel
+            }) : null,
+            /*#__PURE__*/ jsx("div", {
+                className: clsxWithTw(BottomBarThemeClass, 'fixed inset-x-0 z-20 rounded-t-2xl shadow-lg transform transition-transform duration-300 ease-in-out', 'bottom-16', 'max-h-[calc(100vh-4rem)] overflow-y-auto', className, isExpanded ? 'translate-y-0' : 'translate-y-full'),
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "grid grid-cols-4 gap-2 py-3",
+                    children: expandedNavItems.map((item, index)=>/*#__PURE__*/ jsx(NavItem, {
+                            direction: "vertical",
+                            className: "text-xs h-20 gap-2",
+                            ...item,
+                            onClick: collapsePanel
+                        }, index))
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                ref: bottomBarRef,
+                className: clsxWithTw(BottomBarThemeClass, 'pt-2.5 pb-2.5 fixed h-16 inset-x-0 bottom-0 z-20 border-gray-200 border-t grid items-center', {
+                    'grid-cols-1': 1 === displayGridCols,
+                    'grid-cols-2': 2 === displayGridCols,
+                    'grid-cols-3': 3 === displayGridCols,
+                    'grid-cols-4': 4 === displayGridCols,
+                    'grid-cols-5': 5 === displayGridCols,
+                    'grid-cols-6': 6 === displayGridCols
+                }, className),
+                children: [
+                    bottomNavItems.map((item, index)=>/*#__PURE__*/ jsx(NavItem, {
+                            className: "text-xs",
+                            hideActive: isExpanded,
+                            direction: "vertical",
+                            onClick: collapsePanel,
+                            ...item
+                        }, index)),
+                    hasMoreItems ? /*#__PURE__*/ jsx(MoreNavItem, {
+                        direction: "vertical",
+                        className: "text-xs",
+                        name: "更多",
+                        onClick: toggleExpanded,
+                        isExpanded: isExpanded,
+                        expandedNavItemsPath: expandedNavItemsPath
+                    }) : null
+                ]
+            })
+        ]
+    });
+}
+export { BottomNav };

package/lib/components/TopNav/TitleBar.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 顶部导航栏：应用模式，移动端转用
+ * 仅展示标题
+ */
+import React from 'react';
+import type { NavItemProps } from '../common';
+export declare const TitleBar: React.FC<{
+    navList: NavItemProps[];
+    className?: string;
+}>;

package/lib/components/TopNav/TitleBar.js

@@ -0,0 +1,127 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Link, matchPath, useLocation } from "react-router-dom";
+import { LogOut, MoreHorizontal, X } from "lucide-react";
+import { clsxWithTw } from "../../utils/utils.js";
+import { useCurrentAppInfo, useCurrentUserProfile, useLogout } from "../../hooks/index.js";
+import { DropdownThemeClass, MaskThemeClass, TopHeaderThemeClass } from "../common/index.js";
+const TitleBar = ({ navList, className })=>{
+    const { pathname } = useLocation();
+    const title = useMemo(()=>{
+        const matched = navList.find((navItem)=>{
+            const match = matchPath(navItem.to, pathname);
+            return match && match.pathname === pathname;
+        });
+        return matched?.name;
+    }, [
+        navList,
+        pathname
+    ]);
+    const { appName, appLogo } = useCurrentAppInfo();
+    const { name: userName, avatar: userAvatar } = useCurrentUserProfile();
+    const { handlerLogout } = useLogout();
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const closeMenu = ()=>{
+        setIsMenuOpen(false);
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("header", {
+                className: clsxWithTw('px-2 md:px-4 sticky top-0 z-20 w-full h-14', TopHeaderThemeClass, className),
+                children: /*#__PURE__*/ jsxs("div", {
+                    className: "flex justify-center items-center w-full h-full px-6",
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: "font-semibold w-ful text-ellipsis overflow-hidden whitespace-nowrap",
+                            children: title
+                        }),
+                        isMenuOpen ? /*#__PURE__*/ jsx(X, {
+                            className: "w-5 h-5 absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer",
+                            onClick: ()=>setIsMenuOpen(!isMenuOpen)
+                        }) : /*#__PURE__*/ jsx(MoreHorizontal, {
+                            onClick: ()=>setIsMenuOpen(!isMenuOpen),
+                            className: "w-5 h-5 absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer"
+                        })
+                    ]
+                })
+            }),
+            isMenuOpen ? /*#__PURE__*/ jsx("div", {
+                className: clsxWithTw('fixed inset-x-0 top-14 bottom-0 z-10', MaskThemeClass),
+                onClick: closeMenu
+            }) : null,
+            /*#__PURE__*/ jsx("div", {
+                className: clsxWithTw('fixed inset-x-0 z-10 transform transition-transform duration-300 ease-in-out', 'top-14', DropdownThemeClass, 'max-h-[calc(100vh-3.5rem)] overflow-y-auto', className, isMenuOpen ? 'translate-y-0 shadow-lg' : '-translate-y-full'),
+                children: /*#__PURE__*/ jsxs("div", {
+                    className: "container space-y-4 py-6",
+                    hidden: !isMenuOpen,
+                    children: [
+                        /*#__PURE__*/ jsxs(Link, {
+                            to: "/",
+                            className: "flex flex-col justify-center items-center space-x-2",
+                            onClick: closeMenu,
+                            children: [
+                                appLogo ? /*#__PURE__*/ jsx("img", {
+                                    src: appLogo,
+                                    alt: "avatar",
+                                    className: "w-14 h-14 mb-4"
+                                }) : null,
+                                /*#__PURE__*/ jsx("span", {
+                                    className: "text-xl text-center font-medium w-full text-ellipsis overflow-hidden whitespace-nowrap ",
+                                    children: appName || '新应用'
+                                }),
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "text-center justify-center text-token-text-title font-medium leading-relaxed"
+                                })
+                            ]
+                        }),
+                        userAvatar ? /*#__PURE__*/ jsxs("div", {
+                            children: [
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "flex items-center justify-between border-gray-200 border-t py-4 ",
+                                    children: [
+                                        /*#__PURE__*/ jsx("div", {
+                                            children: "当前用户"
+                                        }),
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: "flex items-center",
+                                            children: [
+                                                /*#__PURE__*/ jsx("span", {
+                                                    className: "flex-1 text-ellipsis overflow-hidden whitespace-nowrap",
+                                                    children: userName
+                                                }),
+                                                /*#__PURE__*/ jsx("img", {
+                                                    src: userAvatar,
+                                                    alt: "avatar",
+                                                    className: "w-8 h-8 rounded-full ml-2"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "flex items-center justify-between border-t border-gray-200 py-4 cursor-pointer",
+                                    onClick: async ()=>{
+                                        await handlerLogout();
+                                        closeMenu();
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ jsx("div", {
+                                            children: "退出登录"
+                                        }),
+                                        /*#__PURE__*/ jsx("div", {
+                                            className: "flex items-center",
+                                            children: /*#__PURE__*/ jsx(LogOut, {
+                                                className: "w-5 h-5"
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        }) : null
+                    ]
+                })
+            })
+        ]
+    });
+};
+export { TitleBar };

package/lib/components/TopNav/TopNav.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 顶部标题导航栏：支持 PC 和移动端
+ * 移动端收起导航，点击下拉使用
+ */
+import * as React from 'react';
+import { BaseNavProps } from '../../types';
+export interface TopNavProps extends BaseNavProps {
+    align?: 'left' | 'center' | 'right';
+}
+export declare function TopNav({ navList, align, className, activeClassName }: TopNavProps): React.JSX.Element;

package/lib/components/TopNav/TopNav.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Menu, X } from "lucide-react";
+import { Link } from "react-router-dom";
+import { clsxWithTw } from "../../utils/utils.js";
+import { useCurrentAppInfo } from "../../hooks/useCurrentAppInfo.js";
+import { useCurrentUserProfile } from "../../hooks/useCurrentUserProfile.js";
+import { DropdownThemeClass, NavMenu, TopHeaderThemeClass, UserAvatarMenu } from "../common/index.js";
+function TopNav({ navList = [], align = 'left', className, activeClassName }) {
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const navRef = useRef(null);
+    const { appName, appLogo } = useCurrentAppInfo();
+    const { avatar: userAvatar } = useCurrentUserProfile();
+    return /*#__PURE__*/ jsxs("header", {
+        ref: navRef,
+        className: clsxWithTw('miao-top-nav h-14 items-end w-[100vw] px-3 md:px-4 sticky top-0 z-50 shadow-xs flex', TopHeaderThemeClass, className),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex w-full h-full items-center justify-between",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "flex items-center gap-6 md:gap-10 text-ellipsis overflow-hidden whitespace-nowrap",
+                        children: /*#__PURE__*/ jsx(Link, {
+                            to: "/",
+                            className: "flex items-center space-x-2 w-[100%]",
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: "flex items-center gap-2 w-[100%]",
+                                children: [
+                                    appLogo ? /*#__PURE__*/ jsx("img", {
+                                        src: appLogo,
+                                        alt: "avatar",
+                                        className: "w-7 h-7"
+                                    }) : null,
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "max-w-[240px] font-medium w-full truncate",
+                                        title: appName,
+                                        children: appName || '新应用'
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: clsxWithTw('flex-1 overflow-hidden ml-5 hidden md:block h-full', {
+                            'items-start': 'left' === align,
+                            'items-center': 'center' === align,
+                            'items-end': 'right' === align
+                        }),
+                        children: /*#__PURE__*/ jsx(NavMenu, {
+                            navList: navList,
+                            className: className,
+                            activeClassName: activeClassName
+                        })
+                    }),
+                    userAvatar ? /*#__PURE__*/ jsx(UserAvatarMenu, {
+                        className: className
+                    }) : null,
+                    navList.length > 0 ? /*#__PURE__*/ jsx("div", {
+                        className: "md:hidden flex items-center",
+                        children: isMenuOpen ? /*#__PURE__*/ jsx(X, {
+                            className: "h-5 w-5 mx-3 cursor-pointer",
+                            onClick: ()=>setIsMenuOpen(!isMenuOpen)
+                        }) : /*#__PURE__*/ jsx(Menu, {
+                            className: "h-5 w-5 mx-3 cursor-pointer",
+                            onClick: ()=>setIsMenuOpen(!isMenuOpen)
+                        })
+                    }) : null
+                ]
+            }),
+            isMenuOpen && navList.length > 0 ? /*#__PURE__*/ jsx("div", {
+                className: "md:hidden",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: clsxWithTw('overflow-y-auto max-h-[482px] border-t border-gray-200 py-2 absolute top-14 left-0 right-0 shadow-lg', DropdownThemeClass, className),
+                    children: /*#__PURE__*/ jsx(NavMenu, {
+                        navList: navList,
+                        className: className,
+                        activeClassName: activeClassName,
+                        onClick: ()=>setIsMenuOpen(false),
+                        mode: "vertical"
+                    })
+                })
+            }) : null
+        ]
+    });
+}
+export { TopNav };

package/lib/components/TopNav/index.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { NavProps } from '../../types';
+interface NavBarProps extends Omit<NavProps, 'mobileVariant'> {
+    align?: 'left' | 'center' | 'right';
+    /**
+     * 移动端导航栏 变体
+     */
+    mobileVariant?: 'bottomBar' | 'dropdown';
+}
+export declare function Navigation(props: NavBarProps): React.JSX.Element;
+export { Navigation as TopNav };
+export default Navigation;

package/lib/components/TopNav/index.js

@@ -0,0 +1,65 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import { useIsMobile } from "../../hooks/useIsMobile.js";
+import { BottomNav } from "./BottomNav.js";
+import { TitleBar } from "./TitleBar.js";
+import { TopNav } from "./TopNav.js";
+import { ConfigProvider } from "antd";
+import { useTheme } from "../../hooks/useTheme.js";
+import { useLocation } from "react-router-dom";
+import { generateDarkTheme, generateLightTheme } from "../theme/util.js";
+function NavigationBar({ navList = [], align, className, activeClassName, mobileVariant = 'dropdown' }) {
+    const isMobile = useIsMobile();
+    const location = useLocation();
+    useEffect(()=>{
+        window.scrollTo(0, 0);
+    }, [
+        location.pathname
+    ]);
+    if (isMobile && 'bottomBar' === mobileVariant) {
+        if (0 === navList.length) return null;
+        return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(TitleBar, {
+                    className: className,
+                    navList: navList
+                }),
+                /*#__PURE__*/ jsx(BottomNav, {
+                    navList: navList,
+                    className: className
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ jsx(TopNav, {
+        navList: navList,
+        activeClassName: activeClassName,
+        align: align,
+        className: className
+    });
+}
+function Navigation(props) {
+    const { theme } = useTheme();
+    const { darkColorPrimary, lightColorPrimary } = props;
+    const themeToken = useMemo(()=>{
+        if ('dark' === theme && darkColorPrimary) return generateDarkTheme({
+            colorPrimary: darkColorPrimary
+        });
+        if ('light' === theme && lightColorPrimary) return generateLightTheme({
+            colorPrimary: lightColorPrimary
+        });
+        return {};
+    }, [
+        theme,
+        darkColorPrimary,
+        lightColorPrimary
+    ]);
+    return /*#__PURE__*/ jsx(ConfigProvider, {
+        theme: themeToken,
+        children: /*#__PURE__*/ jsx(NavigationBar, {
+            ...props
+        })
+    });
+}
+const components_TopNav = Navigation;
+export { Navigation, Navigation as TopNav, components_TopNav as default };

package/lib/components/User/UserDisplay.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IUserProfile } from '../../apis/udt-types';
+export interface UserDisplayProps {
+    users: IUserProfile[];
+    size: 'small' | 'medium' | 'large';
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const UserDisplay: React.FC<UserDisplayProps>;

package/lib/components/User/UserDisplay.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import react from "react";
+import { Popover } from "antd";
+import { UserWithAvatar } from "./UserWithAvatar.js";
+import { clsxWithTw } from "../../utils/utils.js";
+import { UserProfile } from "./UserProfile/index.js";
+const UserDisplay = ({ users, size, className, style })=>{
+    const displayUsers = react.useMemo(()=>Array.isArray(users) ? users : [
+            users
+        ].filter(Boolean), [
+        users
+    ]);
+    if (!displayUsers.length) return null;
+    return /*#__PURE__*/ jsx("div", {
+        className: clsxWithTw('flex gap-1 flex-wrap', className),
+        style: style,
+        children: displayUsers.map((user)=>/*#__PURE__*/ jsx(Popover, {
+                placement: "bottomLeft",
+                trigger: "click",
+                content: /*#__PURE__*/ jsx(UserProfile, {
+                    user_id: user.user_id
+                }),
+                arrow: false,
+                styles: {
+                    body: {
+                        padding: 0
+                    }
+                },
+                children: /*#__PURE__*/ jsx("div", {
+                    children: /*#__PURE__*/ jsx(UserWithAvatar, {
+                        data: user,
+                        size: size,
+                        className: "cursor-pointer hover:bg-[rgba(31,35,41,0.15)] active:bg-[rgba(31,35,41,0.2)]"
+                    })
+                })
+            }, user.user_id))
+    });
+};
+export { UserDisplay };

package/lib/components/User/UserProfile/UserProfile.css

@@ -0,0 +1,34 @@
+.user-profile-skeleton-lines .ant-skeleton-paragraph > li {
+  border-radius: 100px;
+  height: 16px;
+}
+
+.user-profile-button .ant-btn-icon {
+  height: 18px;
+}
+
+.no-scrollbar {
+  scrollbar-width: none;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.user-profile-avatar {
+  box-shadow: 0 6px 18px 6px #1f232908, 0 3px 6px -6px #1f23290d, 0 4px 8px #1f232908;
+}
+
+.user-profile-name-container {
+  margin-top: 10px;
+  padding-bottom: 4px;
+}
+
+.user-profile-name {
+  color: #1f2937;
+  margin-bottom: 0;
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 28px;
+}
+

package/lib/components/User/UserProfile/UserProfile.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface UserProfileProps {
+    user_id: string;
+}
+export declare function UserProfile(props: UserProfileProps): React.JSX.Element;
+export {};

package/lib/components/User/UserProfile/UserProfile.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { UserProfileUI } from "./UserProfileUI.js";
+import { UserProfileSkeleton } from "./UserProfileSkeleton.js";
+import { getUserProfile } from "../../../utils/getUserProfile.js";
+import { INVALID_USER, formatI18nProfile } from "./utils.js";
+import { UserProfileContainer } from "./UserProfileContainer.js";
+import { logger } from "../../../logger/index.js";
+function UserProfile(props) {
+    const { user_id } = props;
+    const [user, setUser] = useState(null);
+    const [loading, setLoading] = useState(true);
+    useEffect(()=>{
+        const fetchUser = async ()=>{
+            setLoading(true);
+            try {
+                const { data } = await getUserProfile({
+                    userID: user_id
+                });
+                if (data.userProfile) {
+                    const profile = data.userProfile;
+                    setUser(formatI18nProfile(profile));
+                } else setUser(INVALID_USER);
+            } catch (error) {
+                setUser(INVALID_USER);
+                logger.error('Failed to fetch user profile:', error);
+            } finally{
+                setLoading(false);
+            }
+        };
+        fetchUser();
+    }, [
+        user_id
+    ]);
+    return /*#__PURE__*/ jsx(UserProfileContainer, {
+        children: loading || !user ? /*#__PURE__*/ jsx(UserProfileSkeleton, {}) : /*#__PURE__*/ jsx(UserProfileUI, {
+            user: user
+        })
+    });
+}
+export { UserProfile };

package/lib/components/User/UserProfile/UserProfileContainer.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import './UserProfile.css';
+export declare const UserProfileContainer: ({ children }: PropsWithChildren<any>) => React.JSX.Element;

package/lib/components/User/UserProfile/UserProfileContainer.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import "./UserProfile.css";
+const UserProfileContainer = ({ children })=>/*#__PURE__*/ jsx("div", {
+        className: "w-[320px] h-[468px] rounded-[8px] overflow-y-auto no-scrollbar",
+        children: children
+    });
+export { UserProfileContainer };