From 40ddc5b4965028aeb2e5626bec5b4f152889572b Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Tue, 24 Dec 2024 20:55:17 +0100 Subject: [PATCH 01/13] minor change --- agenta-web/src/components/Sidebar/Sidebar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx index 65c2ce801..c7c0ef5d6 100644 --- a/agenta-web/src/components/Sidebar/Sidebar.tsx +++ b/agenta-web/src/components/Sidebar/Sidebar.tsx @@ -125,7 +125,7 @@ const SidebarMenu: React.FC<{ const classes = useStyles() return ( - + {items.map((item) => { if (item.submenu) { if (item.isCloudFeature) { From 6ef01375fde018cb6d34725088ef0b34d0381722 Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Wed, 25 Dec 2024 19:01:44 +0100 Subject: [PATCH 02/13] revert change --- agenta-web/src/components/Sidebar/Sidebar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx index c7c0ef5d6..65c2ce801 100644 --- a/agenta-web/src/components/Sidebar/Sidebar.tsx +++ b/agenta-web/src/components/Sidebar/Sidebar.tsx @@ -125,7 +125,7 @@ const SidebarMenu: React.FC<{ const classes = useStyles() return ( - + {items.map((item) => { if (item.submenu) { if (item.isCloudFeature) { From 23cd1b189ec616bc3a92e5e45a020ec0a798f4bb Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Wed, 25 Dec 2024 20:55:44 +0100 Subject: [PATCH 03/13] enhancement(frontend): updated menu pattern to use items --- agenta-web/src/components/Sidebar/Sidebar.tsx | 217 ++++++------------ 1 file changed, 65 insertions(+), 152 deletions(-) diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx index 65c2ce801..d7fec46dc 100644 --- a/agenta-web/src/components/Sidebar/Sidebar.tsx +++ b/agenta-web/src/components/Sidebar/Sidebar.tsx @@ -1,6 +1,6 @@ import React, {useEffect, useMemo, useState} from "react" import {useRouter} from "next/router" -import {Button, Divider, Dropdown, Layout, Menu, Space, Tag, Tooltip, Typography} from "antd" +import {Button, Dropdown, Layout, Menu, Space, Tag, Tooltip, Typography} from "antd" import Logo from "../Logo/Logo" import Link from "next/link" import {useAppTheme} from "../Layout/ThemeContextProvider" @@ -80,11 +80,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({ display: "inline-block", width: "100%", }, - menuItem: { - textOverflow: "initial !important", - display: "flex !important", - alignItems: "center", - }, avatarMainContainer: { width: "100%", height: "100%", @@ -108,7 +103,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({ }, }, menuHeader: { - padding: `${theme.paddingXS}px ${theme.padding}px`, color: theme.colorTextDescription, overflow: "hidden", textOverflow: "ellipsis", @@ -124,157 +118,76 @@ const SidebarMenu: React.FC<{ }> = ({items, menuProps, collapsed, mode = "inline"}) => { const classes = useStyles() - return ( - - {items.map((item) => { - if (item.submenu) { - if (item.isCloudFeature) { - return ( - - - {item.title}{" "} - {item.tag && {item.tag}} - - } - onTitleClick={item.onClick} - disabled={item.isCloudFeature} - data-cy={item.key} - > - {item.submenu.map((subitem) => { - const node = ( - - {subitem.title} - - ) - - return ( - - {collapsed ? ( - node - ) : ( - - {node} - - )} - - ) - })} - - - ) + const transformItems = useMemo( + () => + (items: SidebarConfig[]): any => { + // @ts-ignore + return items.flatMap((item) => { + if (item.submenu) { + return { + key: item.key, + icon: item.icon, + label: ( + <> + {item.title} {item.tag && {item.tag}} + + ), + children: transformItems(item.submenu), + disabled: item.isCloudFeature, + onTitleClick: item.onClick, + title: ( + + {item.title} + + ), + } + } else if (item.header) { + return { + type: "group", + label: ( +
+ {item.title} +
+ ), + } } else { - return ( - - {item.title}{" "} - {item.tag && {item.tag}} - - } - onTitleClick={item.onClick} + const node = ( + - {item.submenu.map((subitem) => { - const node = ( - - {subitem.title} - - ) - - return ( - - {collapsed ? ( - node - ) : ( - - {node} - - )} - - ) - })} - + {item.title} {item.tag && {item.tag}} + ) + + return [ + { + icon: item.icon, + key: item.key, + label: ( + <> + {collapsed ? ( + node + ) : ( + + {node} + + )} + + ), + }, + item.divider && {type: "divider", className: "!my-4"}, + ] } - } else if (item.header) { - return ( -
- {item.title} -
- ) - } else { - const node = ( - - {item.title} {item.tag && {item.tag}} - - ) - return ( - <> - - {collapsed ? ( - node - ) : ( - - {node} - - )} - - {item.divider && } - - ) - } - })} - + }) + }, + [items, collapsed], ) + + return } const Sidebar: React.FC = () => { From 1df04af3bb43ea11a2795cb0c7edf45358304f3d Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Sat, 28 Dec 2024 19:52:35 +0100 Subject: [PATCH 04/13] enhancement(frontend): enabled collapsible in Sidebar --- agenta-web/src/components/Sidebar/Sidebar.tsx | 172 +++++++++--------- 1 file changed, 88 insertions(+), 84 deletions(-) diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx index d7fec46dc..12dd19fa4 100644 --- a/agenta-web/src/components/Sidebar/Sidebar.tsx +++ b/agenta-web/src/components/Sidebar/Sidebar.tsx @@ -1,6 +1,6 @@ import React, {useEffect, useMemo, useState} from "react" import {useRouter} from "next/router" -import {Button, Dropdown, Layout, Menu, Space, Tag, Tooltip, Typography} from "antd" +import {Button, Divider, Dropdown, Layout, Menu, Space, Tag, Tooltip, Typography} from "antd" import Logo from "../Logo/Logo" import Link from "next/link" import {useAppTheme} from "../Layout/ThemeContextProvider" @@ -12,7 +12,7 @@ import {JSSTheme} from "@/lib/Types" import {isDemo} from "@/lib/helpers/utils" import {useProfileData} from "@/contexts/profile.context" import {useSession} from "@/hooks/useSession" -import {CaretDown, Gear, SignOut} from "@phosphor-icons/react" +import {CaretDown, Gear, SidebarSimple, SignOut} from "@phosphor-icons/react" import AlertPopup from "../AlertPopup/AlertPopup" import {dynamicContext} from "@/lib/helpers/dynamic" import Avatar from "@/components/Avatar/Avatar" @@ -28,7 +28,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({ position: "sticky !important", bottom: "0px", top: "0px", - "&>div:nth-of-type(2)": { background: `${theme.colorBgContainer} !important`, }, @@ -40,27 +39,18 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({ display: "flex", flexDirection: "column", height: "100%", - padding: "0 10px 10px", + padding: "10px", "& > div:nth-of-type(1)": { - margin: `${theme.padding}px 0`, display: "flex", justifyContent: "center", }, - "& > div:nth-of-type(2)": { + "& > div:nth-of-type(3)": { display: "flex", justifyContent: "space-between", flexDirection: "column", flex: 1, overflowY: "auto", }, - "& .ant-menu-submenu-title": { - display: "flex", - alignItems: "center", - paddingInlineEnd: "20px", - "& .ant-menu-submenu-arrow": { - insetInlineEnd: "8px", - }, - }, "& .ant-menu-item,.ant-menu-submenu-title": { padding: "0 16px !important", }, @@ -258,82 +248,96 @@ const Sidebar: React.FC = () => { return (
- +
-
- {!isDemo() && ( - - - - )} - {selectedOrg?.id && user?.id && isDemo() && ( - ({ - key: org.id, - label: ( - - - {org.name} - - ), - })), - {type: "divider"}, - !project?.is_demo && { - key: "settings", - label: ( - - - Settings - - ), - }, - { - key: "logout", - label: ( -
- - Logout -
- ), - onClick: () => { - AlertPopup({ - title: "Logout", - message: "Are you sure you want to logout?", - onOk: logout, - }) +
+
+ {!isDemo() && ( + + + + )} + {selectedOrg?.id && user?.id && isDemo() && ( + ({ + key: org.id, + label: ( + + + {org.name} + + ), + })), + {type: "divider"}, + !project?.is_demo && { + key: "settings", + label: ( + + + Settings + + ), + }, + { + key: "logout", + label: ( +
+ + Logout +
+ ), + onClick: () => { + AlertPopup({ + title: "Logout", + message: "Are you sure you want to logout?", + onOk: logout, + }) + }, }, + ], + selectedKeys: [selectedOrg.id], + onClick: ({key}) => { + if (["settings", "logout"].includes(key)) return + changeSelectedOrg(key) }, - ], - selectedKeys: [selectedOrg.id], - onClick: ({key}) => { - if (["settings", "logout"].includes(key)) return - changeSelectedOrg(key) - }, - }} - > -
- - - - )} + + + + )} +
+
+ }>
Date: Sat, 28 Dec 2024 23:39:52 +0100 Subject: [PATCH 05/13] fix(frontend): removed marginRight inline style from logo --- agenta-web/src/components/Logo/Logo.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/agenta-web/src/components/Logo/Logo.tsx b/agenta-web/src/components/Logo/Logo.tsx index c0c77cd4d..29d6fee07 100644 --- a/agenta-web/src/components/Logo/Logo.tsx +++ b/agenta-web/src/components/Logo/Logo.tsx @@ -21,14 +21,7 @@ const Logo: React.FC> & {isOnlyIconLo const logoSrc = useMemo(() => LOGOS[appTheme], [appTheme]) return isOnlyIconLogo ? ( - Agenta Logo + Agenta Logo ) : ( Agenta Logo ) From c19b4b743541d0446eb5706470fd1aa838c36d95 Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Sun, 29 Dec 2024 11:46:26 +0100 Subject: [PATCH 06/13] enhancement(frontend): implemented onHover feature to expand sidebar when collapsed --- agenta-web/src/components/Sidebar/Sidebar.tsx | 28 +++++++++++++------ 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx index 12dd19fa4..249d49d37 100644 --- a/agenta-web/src/components/Sidebar/Sidebar.tsx +++ b/agenta-web/src/components/Sidebar/Sidebar.tsx @@ -192,6 +192,7 @@ const Sidebar: React.FC = () => { const {project} = useProjectData() const [useOrgData, setUseOrgData] = useState(() => () => "") const {selectedOrg, orgs, changeSelectedOrg} = useOrgData() + const [isHovered, setIsHovered] = useState(false) useEffect(() => { dynamicContext("org.context", {useOrgData}).then((context) => { @@ -252,16 +253,22 @@ const Sidebar: React.FC = () => { theme={appTheme} className={classes.sidebar} collapsible - collapsed={collapsed} + collapsed={collapsed && !isHovered} width={236} trigger={null} + onMouseOver={() => { + if (collapsed) setIsHovered(true) + }} + onMouseOut={() => { + if (collapsed) setIsHovered(false) + }} >
{!isDemo() && ( - + )} {selectedOrg?.id && user?.id && isDemo() && ( @@ -319,7 +326,7 @@ const Sidebar: React.FC = () => {
- {!collapsed && ( + {!collapsed && !isHovered && (
{selectedOrg.name} {selectedOrg.type} @@ -332,10 +339,13 @@ const Sidebar: React.FC = () => { )}
-
}> @@ -348,7 +358,7 @@ const Sidebar: React.FC = () => { onOpenChange: (openKeys) => setOpenKey(openKeys.at(-1)), }} items={topItems} - collapsed={collapsed} + collapsed={collapsed && !isHovered} /> { onOpenChange: (openKeys) => setOpenKey(openKeys.at(-1)), }} items={bottomItems} - collapsed={collapsed} + collapsed={collapsed && !isHovered} mode="vertical" />
From 5c8a1334d95002ff671371aae8ee7d9b1e71c06d Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Mon, 30 Dec 2024 14:38:02 +0100 Subject: [PATCH 07/13] enhancement(frontend): dynamically imported Sidebar component and added fallback --- agenta-web/src/components/Layout/Layout.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/agenta-web/src/components/Layout/Layout.tsx b/agenta-web/src/components/Layout/Layout.tsx index 84e34c144..cfb1495f7 100644 --- a/agenta-web/src/components/Layout/Layout.tsx +++ b/agenta-web/src/components/Layout/Layout.tsx @@ -1,6 +1,15 @@ import React, {useEffect, useMemo, useState} from "react" -import {Breadcrumb, Button, ConfigProvider, Layout, Modal, Space, Typography, theme} from "antd" -import Sidebar from "../Sidebar/Sidebar" +import { + Breadcrumb, + Button, + ConfigProvider, + Layout, + Modal, + Skeleton, + Space, + Typography, + theme, +} from "antd" import {GithubFilled, LinkedinFilled, TwitterOutlined} from "@ant-design/icons" import Link from "next/link" import {isDemo} from "@/lib/helpers/utils" @@ -18,7 +27,9 @@ import {JSSTheme, StyleProps as MainStyleProps} from "@/lib/Types" import {Lightning} from "@phosphor-icons/react" import packageJsonData from "../../../package.json" import {useProjectData} from "@/contexts/project.context" -import {dynamicContext} from "@/lib/helpers/dynamic" +import {dynamicComponent, dynamicContext} from "@/lib/helpers/dynamic" + +const Sidebar: any = dynamicComponent("Sidebar/Sidebar", () => ) const {Content, Footer} = Layout const {Text} = Typography From 51a946bc75675cd2a5ba472c4c4b4f0cd8c2b6c9 Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Mon, 6 Jan 2025 15:01:48 +0100 Subject: [PATCH 08/13] enhancement(frontend): memoized dropdown items and improve Logo ux --- agenta-web/src/components/Logo/Logo.tsx | 33 ++- agenta-web/src/components/Sidebar/Sidebar.tsx | 208 +++++++++--------- 2 files changed, 127 insertions(+), 114 deletions(-) diff --git a/agenta-web/src/components/Logo/Logo.tsx b/agenta-web/src/components/Logo/Logo.tsx index 29d6fee07..cc21adb06 100644 --- a/agenta-web/src/components/Logo/Logo.tsx +++ b/agenta-web/src/components/Logo/Logo.tsx @@ -3,14 +3,8 @@ import {useMemo} from "react" import {useAppTheme} from "../Layout/ThemeContextProvider" const LOGOS = { - dark: { - complete: "/assets/dark-complete-transparent-CROPPED.png", - onlyIcon: "/assets/dark-logo.svg", - }, - light: { - complete: "/assets/light-complete-transparent-CROPPED.png", - onlyIcon: "/assets/light-logo.svg", - }, + dark: "/assets/dark-complete-transparent-CROPPED.png", + light: "/assets/light-complete-transparent-CROPPED.png", } const Logo: React.FC> & {isOnlyIconLogo?: boolean}> = ( @@ -20,10 +14,25 @@ const Logo: React.FC> & {isOnlyIconLo const {isOnlyIconLogo, ...imageProps} = props const logoSrc = useMemo(() => LOGOS[appTheme], [appTheme]) - return isOnlyIconLogo ? ( - Agenta Logo - ) : ( - Agenta Logo + + return ( +
+ Agenta Logo +
) } diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx index 249d49d37..afda0016c 100644 --- a/agenta-web/src/components/Sidebar/Sidebar.tsx +++ b/agenta-web/src/components/Sidebar/Sidebar.tsx @@ -1,4 +1,4 @@ -import React, {useEffect, useMemo, useState} from "react" +import React, {useEffect, useMemo, useState, useCallback} from "react" import {useRouter} from "next/router" import {Button, Divider, Dropdown, Layout, Menu, Space, Tag, Tooltip, Typography} from "antd" import Logo from "../Logo/Logo" @@ -108,72 +108,71 @@ const SidebarMenu: React.FC<{ }> = ({items, menuProps, collapsed, mode = "inline"}) => { const classes = useStyles() - const transformItems = useMemo( - () => - (items: SidebarConfig[]): any => { - // @ts-ignore - return items.flatMap((item) => { - if (item.submenu) { - return { - key: item.key, + const transformItems = useCallback( + (items: SidebarConfig[]): any => { + // @ts-ignore + return items.flatMap((item) => { + if (item.submenu) { + return { + key: item.key, + icon: item.icon, + label: ( + <> + {item.title} {item.tag && {item.tag}} + + ), + children: transformItems(item.submenu), + disabled: item.isCloudFeature, + onTitleClick: item.onClick, + title: ( + + {item.title} + + ), + } + } else if (item.header) { + return { + type: "group", + label: ( +
+ {item.title} +
+ ), + } + } else { + const node = ( + + {item.title} {item.tag && {item.tag}} + + ) + + return [ + { icon: item.icon, + key: item.key, label: ( <> - {item.title} {item.tag && {item.tag}} + {collapsed ? ( + node + ) : ( + + {node} + + )} ), - children: transformItems(item.submenu), - disabled: item.isCloudFeature, - onTitleClick: item.onClick, - title: ( - - {item.title} - - ), - } - } else if (item.header) { - return { - type: "group", - label: ( -
- {item.title} -
- ), - } - } else { - const node = ( - - {item.title} {item.tag && {item.tag}} - - ) - - return [ - { - icon: item.icon, - key: item.key, - label: ( - <> - {collapsed ? ( - node - ) : ( - - {node} - - )} - - ), - }, - item.divider && {type: "divider", className: "!my-4"}, - ] - } - }) - }, + }, + item.divider && {type: "divider", className: "!my-4"}, + ] + } + }) + }, [items, collapsed], ) @@ -247,6 +246,50 @@ const Sidebar: React.FC = () => { setOpenKey(openKeys[0]) }, [openKeys[0]]) + const dropdownItems = useMemo(() => { + if (selectedOrg?.id && user?.id && isDemo()) { + return [ + ...orgs.map((org: any) => ({ + key: org.id, + label: ( + + + {org.name} + + ), + })), + {type: "divider"}, + !project?.is_demo && { + key: "settings", + label: ( + + + Settings + + ), + }, + { + key: "logout", + label: ( +
+ + Logout +
+ ), + onClick: () => { + AlertPopup({ + title: "Logout", + message: "Are you sure you want to logout?", + onOk: logout, + }) + }, + }, + ] + } else { + return [] + } + }, [logout, orgs, project?.is_demo, selectedOrg?.id, user?.id]) + return (
{ ({ - key: org.id, - label: ( - - - {org.name} - - ), - })), - {type: "divider"}, - !project?.is_demo && { - key: "settings", - label: ( - - - Settings - - ), - }, - { - key: "logout", - label: ( -
- - Logout -
- ), - onClick: () => { - AlertPopup({ - title: "Logout", - message: "Are you sure you want to logout?", - onOk: logout, - }) - }, - }, - ], + items: dropdownItems, selectedKeys: [selectedOrg.id], onClick: ({key}) => { if (["settings", "logout"].includes(key)) return From 2ff0a79de124cd5f138bb7aa7ebe79dcc3b8f20f Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Mon, 6 Jan 2025 15:22:42 +0100 Subject: [PATCH 09/13] minor fix --- agenta-web/src/components/Sidebar/Sidebar.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx index afda0016c..5c7c27fb3 100644 --- a/agenta-web/src/components/Sidebar/Sidebar.tsx +++ b/agenta-web/src/components/Sidebar/Sidebar.tsx @@ -110,8 +110,7 @@ const SidebarMenu: React.FC<{ const transformItems = useCallback( (items: SidebarConfig[]): any => { - // @ts-ignore - return items.flatMap((item) => { + return items.flatMap((item): any => { if (item.submenu) { return { key: item.key, From 388ad1aefad77c1c2b7419682fdbb988d0750715 Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Tue, 7 Jan 2025 11:50:50 +0100 Subject: [PATCH 10/13] enhancement(frontend): reformat Sidebar component's layout to enhance responsiveness and visual appearance --- agenta-web/src/components/Logo/Logo.tsx | 20 +---- agenta-web/src/components/Sidebar/Sidebar.tsx | 88 +++++++++++-------- 2 files changed, 53 insertions(+), 55 deletions(-) diff --git a/agenta-web/src/components/Logo/Logo.tsx b/agenta-web/src/components/Logo/Logo.tsx index cc21adb06..76538624c 100644 --- a/agenta-web/src/components/Logo/Logo.tsx +++ b/agenta-web/src/components/Logo/Logo.tsx @@ -15,25 +15,7 @@ const Logo: React.FC> & {isOnlyIconLo const logoSrc = useMemo(() => LOGOS[appTheme], [appTheme]) - return ( -
- Agenta Logo -
- ) + return Agenta Logo } export default Logo diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx index 5c7c27fb3..ae1ab9735 100644 --- a/agenta-web/src/components/Sidebar/Sidebar.tsx +++ b/agenta-web/src/components/Sidebar/Sidebar.tsx @@ -306,50 +306,66 @@ const Sidebar: React.FC = () => { }} >
-
-
- {!isDemo() && ( - - - - )} - {selectedOrg?.id && user?.id && isDemo() && ( - { - if (["settings", "logout"].includes(key)) return - changeSelectedOrg(key) - }, - }} - > -
+ + + + + )} +
- - - - )} -
- {!collapsed || (collapsed && isHovered) ? (
+ }>
From 86efc09e998ef056679688ab74a73cae69851f1d Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Tue, 7 Jan 2025 12:41:38 +0100 Subject: [PATCH 11/13] fix(frontend): improved style in cloud --- agenta-web/src/components/Sidebar/Sidebar.tsx | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx index ae1ab9735..4066fda4c 100644 --- a/agenta-web/src/components/Sidebar/Sidebar.tsx +++ b/agenta-web/src/components/Sidebar/Sidebar.tsx @@ -316,7 +316,11 @@ const Sidebar: React.FC = () => { style={{ transition: "transform 0.3s ease", transform: - collapsed && !isHovered ? "translateX(74px)" : "translateX(0)", + collapsed && !isHovered + ? isDemo() + ? "translate(91px)" + : "translateX(74px)" + : "translateX(0)", }} >
@@ -337,19 +341,19 @@ const Sidebar: React.FC = () => { }, }} > -