@redocly/theme 0.55.0-next.7 → 0.55.0-next.8

package/src/components/Catalog/CatalogEntity/CatalogEntity.tsx

@@ -0,0 +1,207 @@
+import React from 'react';
+import styled from 'styled-components';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+
+import type { BffCatalogEntity, BffCatalogRelatedEntityList } from '@redocly/theme/core/types';
+
+import { breakpoints } from '@redocly/theme/core/utils';
+import { ArrowLeftIcon } from '@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon';
+import { CatalogPageDescription } from '@redocly/theme/components/Catalog/CatalogPageDescription';
+import { CatalogEntityProperties } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties';
+import { CatalogEntityMetadata } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityMetadata';
+import { CatalogEntityLinks } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityLinks';
+import { Breadcrumbs } from '@redocly/theme/components/Breadcrumbs/Breadcrumbs';
+import { Sidebar } from '@redocly/theme/components/Sidebar/Sidebar';
+import { Menu } from '@redocly/theme/components/Menu/Menu';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { CatalogEntityRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+import { SidebarActions } from '../../SidebarActions/SidebarActions';
+
+export type CatalogEntityProps = {
+  entity: BffCatalogEntity;
+  entitiesCatalogConfig: EntitiesCatalogConfig;
+  catalogConfig: CatalogEntityConfig;
+  initialRelations: BffCatalogRelatedEntityList;
+  mainCatalogLabelTranslationKey?: string;
+  mainCatalogSlug?: string;
+};
+
+export function CatalogEntity({
+  entity,
+  entitiesCatalogConfig,
+  catalogConfig,
+  initialRelations,
+  mainCatalogLabelTranslationKey,
+  mainCatalogSlug,
+}: CatalogEntityProps) {
+  const { useTranslate, useCatalog } = useThemeHooks();
+  const { translate } = useTranslate();
+  const linkToMainCatalog = `catalogs/${catalogConfig.slug}`;
+  const linkToMainCatalogLabel = translate(catalogConfig.titleTranslationKey);
+
+  const { layout, collapsedSidebar, onChangeViewClick, onChangeCollapseSidebarClick } =
+    useCatalog();
+
+  return (
+    <CatalogPageWrapper data-component-name="Catalog/CatalogEntity/CatalogEntity">
+      <CatalogSidebar
+        collapsed={collapsedSidebar}
+        header={
+          <BackLink
+            icon={<ArrowLeftIcon />}
+            iconPosition="left"
+            variant="ghost"
+            size="medium"
+            data-component-name="Sidebar/BackButton"
+            to={linkToMainCatalog}
+          >
+            {collapsedSidebar ? (
+              ''
+            ) : (
+              <div data-translation-key="sidebar.menu.backLabel">
+                {translate('sidebar.menu.backLabel')}
+              </div>
+            )}
+          </BackLink>
+        }
+        menu={
+          <Menu
+            items={[
+              {
+                label: 'Overview',
+                link: `${linkToMainCatalog}/entities/${entity.key}`,
+                active: true,
+                items: [],
+                hasActiveSubItem: false,
+              },
+            ]}
+          />
+        }
+        footer={
+          <SidebarActions
+            layout={layout}
+            collapsedSidebar={collapsedSidebar}
+            isApiDocs={false}
+            onChangeViewClick={onChangeViewClick}
+            onChangeCollapseSidebarClick={onChangeCollapseSidebarClick}
+          />
+        }
+      />
+      <CatalogPageContent>
+        <Breadcrumbs
+          additionalBreadcrumbs={[
+            ...(mainCatalogLabelTranslationKey
+              ? [
+                  {
+                    label: translate(mainCatalogLabelTranslationKey),
+                    link: `catalogs/${mainCatalogSlug}`,
+                  },
+                ]
+              : []),
+            { label: linkToMainCatalogLabel, link: linkToMainCatalog },
+            { label: entity.title },
+          ]}
+        />
+        <CatalogEntityPageWrapper>
+          <CatalogPageDescription
+            title={entity.title}
+            description={entity.summary ?? ''}
+            tag={entity.key}
+          />
+          <CatalogEntityProperties entity={entity} />
+          <CatalogTwoColumnsSection>
+            <CatalogEntityMetadata entity={entity} />
+            <CatalogEntityLinks entity={entity} />
+          </CatalogTwoColumnsSection>
+          <CatalogEntityRelations
+            entity={entity}
+            entitiesCatalogConfig={entitiesCatalogConfig}
+            catalogConfig={catalogConfig}
+            initialRelations={initialRelations}
+          />
+        </CatalogEntityPageWrapper>
+      </CatalogPageContent>
+    </CatalogPageWrapper>
+  );
+}
+
+const CatalogPageWrapper = styled.div`
+  --sidebar-width: var(--catalog-sidebar-width);
+  --link-color-primary: var(--breadcrumbs-text-color);
+
+  display: flex;
+  flex-direction: column;
+
+  font-weight: var(--font-weight-regular);
+
+  color: var(--text-color-secondary);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
+
+  hr {
+    border: 0;
+    width: calc(100% + 48px);
+    margin: auto -24px 0 -24px;
+    border-top: 1px solid var(--border-color-primary);
+  }
+  a:not([role='button']) {
+    text-decoration: none;
+    color: var(--link-color-primary);
+    font-weight: var(--link-font-weight);
+  }
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    flex-direction: row;
+    padding: 0;
+  }
+`;
+
+const CatalogPageContent = styled.main`
+  flex: 1;
+  width: 90%;
+  margin: 0 auto;
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    width: 100%;
+    padding: var(--catalog-page-padding);
+  }
+`;
+
+const CatalogSidebar = styled(Sidebar)`
+  display: none;
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    display: flex;
+  }
+  --menu-container-padding-top: 0;
+`;
+
+const CatalogEntityPageWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  font-weight: var(--font-weight-regular);
+
+  color: var(--text-color-secondary);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
+`;
+
+const CatalogTwoColumnsSection = styled.section`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  align-items: start;
+`;
+
+const BackLink = styled(Button)`
+  padding: var(--spacing-unit) 0;
+  height: calc(var(--line-height-base) + var(--spacing-unit) * 2);
+  justify-content: flex-start;
+  width: 100%;
+  margin-bottom: 0px;
+`;

package/src/components/Catalog/CatalogEntity/CatalogEntityInfoBar.tsx

@@ -0,0 +1,60 @@
+import React, { ReactNode, JSX } from 'react';
+import styled from 'styled-components';
+
+export type CatalogEntityInfoBarProps = {
+  leftContent: ReactNode;
+  rightContent: ReactNode;
+  withSeparator?: boolean;
+};
+
+export function CatalogEntityInfoBar({
+  leftContent,
+  rightContent,
+  withSeparator = true,
+}: CatalogEntityInfoBarProps): JSX.Element {
+  return (
+    <InfoBarWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityInfoBar">
+      <LeftColumn withSeparator={withSeparator}>{leftContent}</LeftColumn>
+      <RightColumn>{rightContent}</RightColumn>
+    </InfoBarWrapper>
+  );
+}
+
+const InfoBarWrapper = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas: 'left right';
+  align-items: center;
+
+  color: var(--catalog-card-text-color, inherit);
+  background-color: var(--catalog-card-bg-color, white);
+  border: var(--catalog-card-border-width, 1px) var(--catalog-card-border-style)
+    var(--catalog-card-border-color);
+  border-radius: var(--catalog-card-border-radius);
+  transition: all 0.2s ease-in-out;
+  height: 100%;
+  padding: var(--catalog-card-gap);
+
+  &:hover {
+    border-color: var(--catalog-card-border-color-hover);
+  }
+`;
+
+const LeftColumn = styled.div<{ withSeparator?: boolean }>`
+  font-weight: var(--font-weight-medium);
+  color: var(--catalog-metadata-label-color);
+  width: 100%;
+  grid-area: left;
+  justify-self: start;
+  text-align: left;
+  border-right: ${({ withSeparator }) =>
+    withSeparator ? '1px solid var(--border-color-primary)' : 'none'};
+`;
+
+const RightColumn = styled.div`
+  color: var(--catalog-metadata-value-color);
+  font-weight: var(--font-weight-medium);
+  grid-area: right;
+  justify-self: end;
+  text-align: right;
+`;

package/src/components/Catalog/CatalogEntity/CatalogEntityLinks.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
+import { DocumentIcon } from '@redocly/theme/icons/DocumentIcon/DocumentIcon';
+import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
+import { Link } from '@redocly/theme/components/Link/Link';
+
+export type CatalogEntityLinksProps = {
+  entity: BffCatalogEntity;
+};
+
+export function CatalogEntityLinks({ entity }: CatalogEntityLinksProps) {
+  const links = Object.entries(entity.links || []);
+
+  if (!links.length) {
+    return null;
+  }
+
+  return (
+    <LinksWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityLinks">
+      <Heading>Links</Heading>
+      {links.map(([key, value]) => (
+        <CatalogEntityInfoBar
+          key={key}
+          leftContent={
+            <Label>
+              <DocumentIcon /> {value.label}
+            </Label>
+          }
+          rightContent={
+            <Link color="var(--catalog-metadata-link-color)" to={value.url} target="_blank">
+              <LaunchIcon />
+            </Link>
+          }
+          withSeparator={false}
+        />
+      ))}
+    </LinksWrapper>
+  );
+}
+
+const LinksWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  border-radius: var(--border-radius);
+  background-color: var(--catalog-metadata-bg-color);
+  transition: all 0.2s ease-in-out;
+  margin: var(--spacing-lg) 0;
+`;
+
+const Label = styled.span`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-unit);
+  font-weight: var(--font-weight-medium);
+  color: var(--catalog-metadata-label-color);
+`;
+
+const Heading = styled.h2`
+  margin-bottom: var(--spacing-sm);
+  margin-top: 0;
+  font-size: var(--font-size-md);
+  color: var(--catalog-metadata-heading-color);
+`;

package/src/components/Catalog/CatalogEntity/CatalogEntityMetadata.tsx

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+import { capitalize } from '@redocly/theme/core/utils';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
+
+const MAX_INITIAL_ITEMS = 4;
+
+export type CatalogEntityMetadataProps = {
+  entity: BffCatalogEntity;
+};
+
+export function CatalogEntityMetadata({ entity }: CatalogEntityMetadataProps) {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const { schema, ...metadataToShow } = entity.metadata || {};
+  const metadata = Object.entries(metadataToShow);
+  const [isOn, setIsOn] = useState(false);
+  const hasMoreItems = metadata.length > MAX_INITIAL_ITEMS;
+  const visibleMetadata = isOn ? metadata : metadata.slice(0, MAX_INITIAL_ITEMS);
+
+  if (!metadata.length) {
+    return null;
+  }
+  return (
+    <MetadataWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityMetadata">
+      <Heading>{translate('catalog.entity.metadata.title')}</Heading>
+      {visibleMetadata.map(([key, value]) => (
+        <CatalogEntityInfoBar
+          key={key}
+          leftContent={<Label>{capitalize(key)}:</Label>}
+          rightContent={<Value>{value}</Value>}
+        />
+      ))}
+      {hasMoreItems && (
+        <ShowMoreButton onClick={() => setIsOn(!isOn)}>
+          {isOn ? 'Show less' : 'Show more'} <ChevronIcon $isExpanded={isOn} />
+        </ShowMoreButton>
+      )}
+    </MetadataWrapper>
+  );
+}
+
+const MetadataWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  border-radius: var(--border-radius);
+  background-color: var(--catalog-metadata-bg-color);
+  transition: all 0.2s ease-in-out;
+  margin: var(--spacing-lg) 0;
+`;
+
+const Label = styled.span`
+  font-weight: var(--font-weight-medium);
+  color: var(--catalog-metadata-label-color);
+`;
+
+const Value = styled.span`
+  color: var(--catalog-metadata-value-color);
+  font-weight: var(--font-weight-medium);
+`;
+
+const Heading = styled.h2`
+  margin-bottom: var(--spacing-base);
+  margin-top: 0;
+  font-size: var(--catalog-metadata-heading-size);
+`;
+
+const ChevronIcon = styled(ChevronDownIcon)<{ $isExpanded: boolean }>`
+  transform: ${({ $isExpanded }) => ($isExpanded ? 'rotate(180deg)' : 'rotate(0)')};
+  transition: transform 0.2s ease;
+`;
+
+const ShowMoreButton = styled.button`
+  background: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-metadata-button-gap, 0.5rem);
+  cursor: pointer;
+  color: var(--catalog-metadata-button-color);
+  padding: 0;
+  font-weight: var(--font-weight-medium);
+  margin-top: var(--spacing-unit);
+
+  &:hover {
+    color: var(--catalog-metadata-button-color-hover);
+  }
+`;

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/ApiDescriptionProperty.tsx

@@ -0,0 +1,35 @@
+import React, { JSX } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { DocumentIcon, getPathPrefix, Tag, useThemeHooks } from '@redocly/theme';
+import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+
+export type ApiDescriptionPropertyProps = {
+  entity: BffCatalogEntity;
+};
+
+export function ApiDescriptionProperty({ entity }: ApiDescriptionPropertyProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const navigate = useNavigate();
+  const pathPrefix = getPathPrefix();
+  const descriptionFile = entity.metadata?.descriptionFile;
+
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/ApiDescriptionProperty">
+      <CatalogEntityPropertyCard
+        header={
+          <>
+            <DocumentIcon />
+            {translate('catalog.entity.properties.apiDescription.title')}
+          </>
+        }
+        content={<Tag>{descriptionFile}</Tag>}
+        onClick={() => {
+          navigate(`${pathPrefix}/${descriptionFile}`);
+        }}
+      />
+    </div>
+  );
+}

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties.tsx

@@ -0,0 +1,83 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { EntityTypeProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/EntityTypeProperty';
+import { GitProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/GitProperty';
+import { TagsProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty';
+import { ApiDescriptionProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/ApiDescriptionProperty';
+import { UserEmailProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/UserEmailProperty';
+import { DomainsProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty';
+import { OwnersProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty';
+import { ContactProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty';
+
+type PropertyRenderer = {
+  key: string;
+  condition: (entity: BffCatalogEntity) => boolean;
+  component: React.ComponentType<{ entity: BffCatalogEntity }>;
+};
+
+const propertyRenderers: PropertyRenderer[] = [
+  {
+    key: 'type',
+    condition: (entity) => !!entity.type,
+    component: EntityTypeProperty,
+  },
+  {
+    key: 'contact',
+    condition: (entity) => !!entity.contact?.slack?.channels,
+    component: ContactProperty,
+  },
+  {
+    key: 'git',
+    condition: (entity) => !!entity.git,
+    component: GitProperty,
+  },
+  {
+    key: 'tags',
+    condition: (entity) => !!entity.tags,
+    component: TagsProperty,
+  },
+  {
+    key: 'api-description',
+    condition: (entity) => entity.type === 'api-description' && !!entity.metadata?.descriptionFile,
+    component: ApiDescriptionProperty,
+  },
+  {
+    key: 'user-email',
+    condition: (entity) => entity.type === 'user' && !!entity.metadata?.email,
+    component: UserEmailProperty,
+  },
+  {
+    key: 'domains',
+    condition: (entity) => (entity.domains?.length ?? 0) > 0,
+    component: DomainsProperty,
+  },
+  {
+    key: 'owners',
+    condition: (entity) => (entity.owners?.length ?? 0) > 0,
+    component: OwnersProperty,
+  },
+];
+
+export type CatalogEntityPropertiesProps = {
+  entity: BffCatalogEntity;
+};
+
+export function CatalogEntityProperties({ entity }: CatalogEntityPropertiesProps): JSX.Element {
+  return (
+    <CatalogEntityPropertiesGridWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties">
+      {propertyRenderers
+        .filter((renderer) => renderer.condition(entity))
+        .map((renderer) => (
+          <renderer.component key={renderer.key + entity.id} entity={entity} />
+        ))}
+    </CatalogEntityPropertiesGridWrapper>
+  );
+}
+
+const CatalogEntityPropertiesGridWrapper = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(325px, 1fr));
+  gap: var(--spacing-base);
+`;

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard.tsx

@@ -0,0 +1,62 @@
+import React, { ReactNode, JSX } from 'react';
+import styled from 'styled-components';
+
+export type CatalogEntityPropertyCardProps = {
+  header: ReactNode;
+  content: ReactNode;
+  onClick?: () => void;
+};
+
+export function CatalogEntityPropertyCard({
+  header,
+  content,
+  onClick,
+}: CatalogEntityPropertyCardProps): JSX.Element {
+  return (
+    <CatalogEntityPropertyWrapper
+      data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard"
+      onClick={onClick}
+    >
+      <CardHeader>{header}</CardHeader>
+      <CardContent>{content}</CardContent>
+    </CatalogEntityPropertyWrapper>
+  );
+}
+
+const CatalogEntityPropertyWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  color: var(--catalog-card-text-color);
+  background-color: var(--catalog-card-bg-color);
+  border: var(--catalog-card-border-width) var(--catalog-card-border-style)
+    var(--catalog-card-border-color);
+  border-radius: var(--catalog-card-border-radius, 8px);
+  transition: all 0.2s ease-in-out;
+  height: 100%;
+  padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
+  gap: var(--catalog-card-content-gap-vertical);
+
+  &:hover {
+    border-color: var(--catalog-card-border-color-hover);
+  }
+
+  ${(props) =>
+    props.onClick &&
+    `
+    cursor: pointer;
+  `}
+`;
+
+const CardHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-card-content-gap);
+`;
+
+const CardContent = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-card-content-gap);
+  flex-wrap: wrap;
+`;

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty.tsx

@@ -0,0 +1,36 @@
+import React, { JSX } from 'react';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { SlackIcon } from '@redocly/theme/icons/SlackIcon/SlackIcon';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+
+export type ContactPropertyProps = {
+  entity: BffCatalogEntity;
+};
+
+export function ContactProperty({ entity }: ContactPropertyProps): JSX.Element {
+  const channels = entity.contact?.slack?.channels;
+
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty">
+      <CatalogEntityPropertyCard
+        header={
+          <>
+            <SlackIcon />
+            Slack channels
+          </>
+        }
+        content={
+          <>
+            {channels?.map((channel) => (
+              <Tag key={channel.name} style={{ backgroundColor: 'var(--bg-color)' }}>
+                {channel.name}
+              </Tag>
+            ))}
+          </>
+        }
+      />
+    </div>
+  );
+}

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty.tsx

@@ -0,0 +1,38 @@
+import React, { JSX } from 'react';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
+import { Tag } from '@redocly/theme';
+
+import { CatalogEntityPropertyCard } from './CatalogEntityPropertyCard';
+
+export type DomainsPropertyProps = {
+  entity: BffCatalogEntity;
+};
+
+export function DomainsProperty({ entity }: DomainsPropertyProps): JSX.Element {
+  const { domains = [] } = entity;
+
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty">
+      <CatalogEntityPropertyCard
+        header={
+          <>
+            <GraphIcon />
+            Domains
+          </>
+        }
+        content={
+          <>
+            {domains?.map((domain) => (
+              <Tag key={domain?.id} style={{ backgroundColor: 'var(--bg-color)' }}>
+                <GraphIcon />
+                {domain?.title}
+              </Tag>
+            ))}
+          </>
+        }
+      />
+    </div>
+  );
+}