@brilo/base-blocks 0.1.57 → 0.1.60

package/src/blocks/food-menu/food-menu-group/FoodMenuPreview.tsx

@@ -0,0 +1,380 @@
+import apiFetch from '@wordpress/api-fetch'
+import {Button, Spinner} from '@wordpress/components'
+import {__, sprintf} from '@wordpress/i18n'
+import clsx from 'clsx'
+import React, {type KeyboardEvent, useEffect, useRef, useState} from 'react'
+import {plural} from '~/utils/plural'
+import {icon as menuIcon} from './icon'
+import type {FoodMenuGroupAttributes, FoodMenuGroupEmptyBehaviour, FoodMenuGroupMode} from './types'
+
+type PreviewItem = {
+  id: string
+  food_id: number
+  title: string
+  unit: string
+  price: string
+  note: string
+  allergens: number[]
+  missing?: boolean
+}
+
+type PreviewCourse = {
+  title: string
+  items: PreviewItem[]
+}
+
+type PreviewMenu = {
+  id: number
+  title: string
+  kind: string
+  courses: PreviewCourse[]
+  dishCount: number
+  reservation: {state: 'open' | 'closed'; deadline: string} | null
+}
+
+type PreviewDay = {
+  date: string | null
+  label: string
+  menu: PreviewMenu | null
+}
+
+type PreviewResponse = {
+  today: string
+  week: number | null
+  days: PreviewDay[]
+  emptyMessage: Record<FoodMenuGroupMode, string>
+  hasPermanent: boolean
+}
+
+const BASE = 'brilo-food-menu-preview'
+
+/**
+ * The menu is assembled on the server — the week in the site's time zone,
+ * which days have a menu, whether ordering is open — so the preview asks the
+ * block's own endpoint instead of rebuilding that from post records. It shows
+ * structure and state, not the front-end markup: the theme renders blocks
+ * through its own renderer, which `ServerSideRender` cannot reach.
+ */
+function useMenuPreview(mode: FoodMenuGroupMode, menuIds: number[], showPrices: boolean, showAllergens: boolean) {
+  const [data, setData] = useState<PreviewResponse | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [hasError, setHasError] = useState(false)
+  const [attempt, setAttempt] = useState(0)
+
+  const params = new URLSearchParams({
+    mode,
+    show_prices: showPrices ? '1' : '0',
+    show_allergens: showAllergens ? '1' : '0',
+  })
+
+  if ('manual' === mode && 0 < menuIds.length) {
+    params.set('ids', menuIds.join(','))
+  }
+
+  const key = params.toString()
+
+  // `attempt` is what "Zkusit znovu" bumps: same request, run again.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: attempt re-runs the effect on retry
+  useEffect(() => {
+    let cancelled = false
+    setIsLoading(true)
+    setHasError(false)
+
+    apiFetch<PreviewResponse>({path: `/brilo/v1/food-menu/preview?${key}`})
+      .then((result) => {
+        if (!cancelled) {
+          setData(result)
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setData(null)
+          setHasError(true)
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setIsLoading(false)
+        }
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [key, attempt])
+
+  return {data, isLoading, hasError, retry: () => setAttempt((value) => value + 1)}
+}
+
+const WarnIcon = () => (
+  <svg className={`${BASE}__empty-icon`} viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
+    <path d="M10 3 2 17h16L10 3Z" />
+    <path d="M10 8v4M10 14.5v.5" />
+  </svg>
+)
+
+function PreviewEmpty({title, text, children}: {title: string; text?: string; children?: React.ReactNode}) {
+  return (
+    <div className={`${BASE}__empty`}>
+      <WarnIcon />
+      <div>
+        <b>{title}</b>
+        {text}
+        {children}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Says what the page does instead, in the editor's own setting, so a missing
+ * day is not a surprise on the live site. Derived from attributes only, so
+ * changing the setting updates it without a new request.
+ */
+function emptySentence(behaviour: FoodMenuGroupEmptyBehaviour, emptyText: string, mode: FoodMenuGroupMode, data: PreviewResponse): string {
+  const hint = __('Změnit lze v panelu „Když není co zobrazit“.', 'brilo-blocks')
+
+  if ('hide' === behaviour) {
+    return `${__('Blok se na webu nevykreslí.', 'brilo-blocks')} ${hint}`
+  }
+
+  if ('permanent' === behaviour) {
+    const sentence = __('Na webu se místo něj nabídne stálá nabídka s poznámkou nad ní.', 'brilo-blocks')
+    const fallback = data.hasPermanent ? '' : ` ${__('Žádná stálá nabídka ale není, ukáže se věta.', 'brilo-blocks')}`
+
+    return `${sentence}${fallback} ${hint}`
+  }
+
+  const text = emptyText.trim() || data.emptyMessage[mode]
+
+  return `${sprintf(__('Na webu se místo něj ukáže věta „%s“', 'brilo-blocks'), text)} ${hint}`
+}
+
+function NoMenuNotice({attributes, data}: {attributes: FoodMenuGroupAttributes; data: PreviewResponse}) {
+  return (
+    <PreviewEmpty
+      title={__('Na tento den není lístek', 'brilo-blocks')}
+      text={emptySentence(attributes.emptyBehaviour, attributes.emptyText, attributes.mode, data)}
+    />
+  )
+}
+
+function sourceLabel(mode: FoodMenuGroupMode, day: PreviewDay, data: PreviewResponse): string {
+  if ('today' === mode) {
+    return __('Dnešní lístek', 'brilo-blocks')
+  }
+
+  if ('week' === mode) {
+    return sprintf(__('Týden %d', 'brilo-blocks'), data.week ?? 0)
+  }
+
+  if (!day.menu) {
+    return ''
+  }
+
+  return 'daily' === day.menu.kind && day.date ? sprintf(__('Denní · %s', 'brilo-blocks'), day.date) : __('Trvalý', 'brilo-blocks')
+}
+
+function PreviewRows({menu, showPrices, showAllergens}: {menu: PreviewMenu; showPrices: boolean; showAllergens: boolean}) {
+  return (
+    <>
+      {menu.courses.map((course, courseIndex) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: courses carry no id; their order is what the menu editor set
+        <div className={`${BASE}__section`} key={`${menu.id}-${courseIndex}`}>
+          {course.title && <div className={`${BASE}__section-title`}>{course.title}</div>}
+
+          {course.items.map((item) => (
+            <div className={clsx(`${BASE}__row`, !showPrices && `${BASE}__row--no-price`)} key={item.id || `food-${item.food_id}`}>
+              <span className={`${BASE}__unit`}>{item.unit}</span>
+
+              {item.missing ? (
+                <span className={clsx(`${BASE}__name`, `${BASE}__name--missing`)}>
+                  {sprintf(__('Jídlo #%d (smazáno)', 'brilo-blocks'), item.food_id)}
+                </span>
+              ) : (
+                <span className={`${BASE}__name`}>
+                  {item.title}
+                  {showAllergens && 0 < item.allergens.length && <span className={`${BASE}__chip`}>{item.allergens.join(', ')}</span>}
+                  {item.note && <small className={`${BASE}__note`}>{item.note}</small>}
+                </span>
+              )}
+
+              {showPrices && <span className={`${BASE}__price`}>{item.price}</span>}
+            </div>
+          ))}
+        </div>
+      ))}
+    </>
+  )
+}
+
+function PreviewDayTabs({days, selected, onSelect}: {days: PreviewDay[]; selected: number; onSelect: (index: number) => void}) {
+  const tabs = useRef<Array<HTMLButtonElement | null>>([])
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const step = {ArrowRight: 1, ArrowLeft: -1}[event.key]
+
+    if (!step) {
+      return
+    }
+
+    event.preventDefault()
+    const next = (selected + step + days.length) % days.length
+    onSelect(next)
+    tabs.current[next]?.focus()
+  }
+
+  return (
+    <div className={`${BASE}__days`} role="tablist" aria-label={__('Dny týdne', 'brilo-blocks')} onKeyDown={onKeyDown}>
+      {days.map((day, index) => {
+        const [weekday, ...date] = day.label.split(' ')
+
+        return (
+          <button
+            key={day.date ?? index}
+            ref={(element) => {
+              tabs.current[index] = element
+            }}
+            type="button"
+            role="tab"
+            aria-selected={index === selected}
+            tabIndex={index === selected ? 0 : -1}
+            className={`${BASE}__day`}
+            onClick={() => onSelect(index)}
+          >
+            <i className={clsx(`${BASE}__dot`, !day.menu && `${BASE}__dot--off`)} aria-hidden="true" />
+            {`${weekday.slice(0, 2)} ${date.join(' ')}`}
+            {!day.menu && <span className="screen-reader-text">{__('(bez lístku)', 'brilo-blocks')}</span>}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+type CardProps = {
+  attributes: FoodMenuGroupAttributes
+  data: PreviewResponse
+  day: PreviewDay
+  tabs?: React.ReactNode
+}
+
+function PreviewCard({attributes, data, day, tabs}: CardProps) {
+  const {mode, showPrices, showAllergens, showReservation} = attributes
+  const {menu} = day
+  const source = sourceLabel(mode, day, data)
+  const reservation = showReservation ? menu?.reservation : null
+
+  return (
+    <div className={`${BASE}__card`}>
+      <div className={`${BASE}__head`}>
+        <div className={`${BASE}__title`}>
+          {menuIcon}
+          <span>{day.label}</span>
+          {day.date === data.today && <span className={`${BASE}__pill`}>{__('dnes', 'brilo-blocks')}</span>}
+        </div>
+
+        <div className={`${BASE}__meta`}>
+          {source && <span className={clsx(`${BASE}__pill`, `${BASE}__pill--muted`)}>{source}</span>}
+          {'open' === reservation?.state && (
+            <span className={clsx(`${BASE}__pill`, `${BASE}__pill--ok`)}>{__('Rezervace otevřené', 'brilo-blocks')}</span>
+          )}
+          {'closed' === reservation?.state && (
+            <span className={clsx(`${BASE}__pill`, `${BASE}__pill--muted`)}>{__('Rezervace uzavřené', 'brilo-blocks')}</span>
+          )}
+        </div>
+      </div>
+
+      <div className={`${BASE}__body`}>
+        {tabs}
+
+        <div role={tabs ? 'tabpanel' : undefined}>
+          {menu ? (
+            <PreviewRows menu={menu} showPrices={showPrices} showAllergens={showAllergens} />
+          ) : (
+            <NoMenuNotice attributes={attributes} data={data} />
+          )}
+        </div>
+
+        {menu && (
+          <div className={`${BASE}__foot`}>
+            <span>
+              {[
+                `${menu.dishCount} ${plural(menu.dishCount, __('jídlo', 'brilo-blocks'), __('jídla', 'brilo-blocks'), __('jídel', 'brilo-blocks'))}`,
+                showAllergens ? __('alergeny v závorce', 'brilo-blocks') : __('alergeny skryté', 'brilo-blocks'),
+                showPrices ? __('ceny zobrazeny', 'brilo-blocks') : __('ceny skryté', 'brilo-blocks'),
+              ].join(' · ')}
+            </span>
+
+            {showReservation && <span>{sprintf(__('Uzávěrka rezervací: %s', 'brilo-blocks'), menu.reservation?.deadline || '—')}</span>}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function WeekPreview({attributes, data}: {attributes: FoodMenuGroupAttributes; data: PreviewResponse}) {
+  const [selectedDate, setSelectedDate] = useState<string | null>(null)
+
+  if (0 === data.days.length) {
+    return null
+  }
+
+  // Today when it falls in the week, Monday otherwise; the choice is UI state
+  // only and is not saved with the block.
+  const pick = [selectedDate, data.today].map((date) => data.days.findIndex((day) => day.date === date)).find((index) => 0 <= index)
+  const selected = pick ?? 0
+
+  return (
+    <PreviewCard
+      attributes={attributes}
+      data={data}
+      day={data.days[selected]}
+      tabs={<PreviewDayTabs days={data.days} selected={selected} onSelect={(index) => setSelectedDate(data.days[index].date)} />}
+    />
+  )
+}
+
+export function FoodMenuPreview({attributes}: {attributes: FoodMenuGroupAttributes}) {
+  const {mode, menuIds, showPrices, showAllergens} = attributes
+  const {data, isLoading, hasError, retry} = useMenuPreview(mode, menuIds, showPrices, showAllergens)
+
+  if (hasError) {
+    return (
+      <div className={BASE}>
+        <PreviewEmpty title={__('Náhled se nepodařilo načíst.', 'brilo-blocks')}>
+          <Button variant="secondary" size="small" className={`${BASE}__retry`} onClick={retry}>
+            {__('Zkusit znovu', 'brilo-blocks')}
+          </Button>
+        </PreviewEmpty>
+      </div>
+    )
+  }
+
+  // The first load only: a reload keeps the previous card, so toggling a
+  // setting does not collapse the block and make it jump.
+  if (!data) {
+    return (
+      <div className={BASE}>
+        <div className={clsx(`${BASE}__card`, `${BASE}__card--loading`)}>
+          <div className={`${BASE}__head`}>
+            <Spinner />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  let content: React.ReactNode
+
+  if ('week' === mode) {
+    content = <WeekPreview attributes={attributes} data={data} />
+  } else if (0 === data.days.length) {
+    content = <NoMenuNotice attributes={attributes} data={data} />
+  } else {
+    content = data.days.map((day) => <PreviewCard key={day.menu?.id ?? day.label} attributes={attributes} data={data} day={day} />)
+  }
+
+  return <div className={clsx(BASE, isLoading && `${BASE}--loading`)}>{content}</div>
+}

package/src/blocks/food-menu/food-menu-group/FoodMenuSelectModal.tsx

@@ -0,0 +1,69 @@
+import type {View} from '@wordpress/dataviews/wp'
+import {__, sprintf} from '@wordpress/i18n'
+import {createEntitySelectModal} from '~/components/EntitySelectModal/EntitySelectModal'
+
+type MenuRecord = {
+  id: number
+  title: {rendered: string}
+  meta?: {
+    brilo_food_menu_kind?: string
+    brilo_food_menu_date?: string
+  }
+}
+
+const DEFAULT_VIEW: View = {
+  type: 'table',
+  search: '',
+  filters: [],
+  page: 1,
+  perPage: 20,
+  sort: {field: 'title', direction: 'asc'},
+  fields: ['kind'],
+  titleField: 'title',
+}
+
+/**
+ * A permanent menu has no date, so the kind column carries the day: the
+ * titles of a week of daily menus look alike and the date is what the editor
+ * actually picks by.
+ */
+function describe(menu: MenuRecord): string {
+  const date = menu.meta?.brilo_food_menu_date
+
+  return 'daily' === menu.meta?.brilo_food_menu_kind && date
+    ? sprintf(__('Denní · %s', 'brilo-blocks'), date)
+    : __('Trvalý', 'brilo-blocks')
+}
+
+/**
+ * Manual brilo_food_menu picker (table view, search, sort, checkbox selection,
+ * reorderable selection list) with title/kind columns. See `EntitySelectModal`
+ * for the shared DataViews wiring.
+ */
+export const FoodMenuSelectModal = createEntitySelectModal<MenuRecord>({
+  endpoint: '/wp/v2/brilo_food_menu?per_page=100&orderby=title&order=asc&_fields=id,title,meta',
+  defaultView: DEFAULT_VIEW,
+  buttonLabel: __('Vybrat lístky', 'brilo-blocks'),
+  modalTitle: __('Výběr lístků', 'brilo-blocks'),
+  emptyLabel: __('Zatím nevybrán žádný lístek.', 'brilo-blocks'),
+  // The block previews the picked menus in order right under the button.
+  listInModal: true,
+  getItemLabel: (item) => item.title.rendered,
+  matchesSearch: (item, needle) => item.title.rendered.toLowerCase().includes(needle),
+  sortValue: (item, field) => ('kind' === field ? describe(item) : item.title.rendered),
+  fields: [
+    {
+      id: 'title',
+      label: __('Název', 'brilo-blocks'),
+      enableHiding: false,
+      enableSorting: true,
+      render: ({item}: {item: MenuRecord}) => item.title.rendered || __('(bez názvu)', 'brilo-blocks'),
+    },
+    {
+      id: 'kind',
+      label: __('Typ', 'brilo-blocks'),
+      enableSorting: true,
+      render: ({item}: {item: MenuRecord}) => describe(item),
+    },
+  ],
+})

package/src/blocks/food-menu/food-menu-group/constants.ts

@@ -0,0 +1,9 @@
+export const FOOD_MENU_GROUP_MODES = ['manual', 'today', 'week'] as const
+export const FOOD_MENU_GROUP_LAYOUTS = ['slider', 'list'] as const
+
+/** What the block does on a day with no menu to show. */
+export const FOOD_MENU_GROUP_EMPTY_BEHAVIOURS = ['message', 'permanent', 'hide'] as const
+
+export const FOOD_MENU_GROUP_MODE = FOOD_MENU_GROUP_MODES[0]
+export const FOOD_MENU_GROUP_LAYOUT = FOOD_MENU_GROUP_LAYOUTS[0]
+export const FOOD_MENU_GROUP_EMPTY_BEHAVIOUR = FOOD_MENU_GROUP_EMPTY_BEHAVIOURS[0]

package/src/blocks/food-menu/food-menu-group/edit.tsx

@@ -0,0 +1,153 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  __experimentalText as Text,
+  TextareaControl,
+  ToggleControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__, sprintf} from '@wordpress/i18n'
+import clsx from 'clsx'
+// biome-ignore lint/correctness/noUnusedImports: required in scope for classic JSX transform
+import React from 'react'
+import {plural} from '~/utils/plural'
+import {FoodMenuPreview} from './FoodMenuPreview'
+import type {FoodMenuGroupAttributes, FoodMenuGroupOptions} from './types'
+
+const MODE_HINTS: Record<FoodMenuGroupAttributes['mode'], string> = {
+  manual: __('Zobrazí se ručně vybrané lístky.', 'brilo-blocks'),
+  today: __('Zobrazí se denní lístek s dnešním datem.', 'brilo-blocks'),
+  week: __('Zobrazí se denní lístky aktuálního pracovního týdne (pondělí až pátek).', 'brilo-blocks'),
+}
+
+const EMPTY_HINTS: Record<FoodMenuGroupAttributes['emptyBehaviour'], string> = {
+  message: __('Návštěvník uvidí krátkou větu, že lístek zatím není vypsaný.', 'brilo-blocks'),
+  permanent: __('Místo chybějícího denního lístku se nabídne stálá nabídka. Když žádná není, ukáže se věta.', 'brilo-blocks'),
+  hide: __('Blok ze stránky zmizí. Stránka pak může zůstat prázdná.', 'brilo-blocks'),
+}
+
+function pickedNote(count: number): string {
+  if (0 === count) {
+    return __('Zatím nevybrán žádný lístek.', 'brilo-blocks')
+  }
+
+  const picked = plural(
+    count,
+    __('Vybrán %d lístek', 'brilo-blocks'),
+    __('Vybrány %d lístky', 'brilo-blocks'),
+    __('Vybráno %d lístků', 'brilo-blocks'),
+  )
+
+  return `${sprintf(picked, count)} · ${__('pořadí změníte ve výběru lístků', 'brilo-blocks')}`
+}
+
+export function createFoodMenuGroupEdit(options: FoodMenuGroupOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: FoodMenuGroupAttributes
+    setAttributes: (a: Partial<FoodMenuGroupAttributes>) => void
+  }) {
+    const {mode, layout, menuIds, showPrices, showAllergens, showReservation, emptyBehaviour, emptyText} = attributes
+
+    const blockProps = useBlockProps({className: clsx(options.blockClassName ?? 'g-food-menu', `--${layout}`)})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení lístku', 'brilo-blocks')} initialOpen>
+            <ToggleGroupControl
+              label={__('Zdroj lístků', 'brilo-blocks')}
+              help={MODE_HINTS[mode]}
+              value={mode}
+              onChange={(value) => setAttributes({mode: value as FoodMenuGroupAttributes['mode']})}
+              isBlock
+            >
+              <ToggleGroupControlOption value="manual" label={__('Ruční výběr', 'brilo-blocks')} />
+              <ToggleGroupControlOption value="today" label={__('Dnešní', 'brilo-blocks')} />
+              <ToggleGroupControlOption value="week" label={__('Týden', 'brilo-blocks')} />
+            </ToggleGroupControl>
+
+            <ToggleGroupControl
+              label={__('Rozvržení', 'brilo-blocks')}
+              help={__('Slider se použije jen tehdy, když je lístků víc než jeden.', 'brilo-blocks')}
+              value={layout}
+              onChange={(value) => setAttributes({layout: value as FoodMenuGroupAttributes['layout']})}
+              isBlock
+            >
+              <ToggleGroupControlOption value="slider" label={__('Slider', 'brilo-blocks')} />
+              <ToggleGroupControlOption value="list" label={__('Seznam', 'brilo-blocks')} />
+            </ToggleGroupControl>
+
+            <ToggleControl
+              __nextHasNoMarginBottom
+              label={__('Zobrazit ceny', 'brilo-blocks')}
+              checked={showPrices}
+              onChange={(value) => setAttributes({showPrices: value})}
+            />
+
+            <ToggleControl
+              __nextHasNoMarginBottom
+              label={__('Zobrazit alergeny a legendu', 'brilo-blocks')}
+              checked={showAllergens}
+              onChange={(value) => setAttributes({showAllergens: value})}
+            />
+
+            <ToggleControl
+              __nextHasNoMarginBottom
+              label={__('Umožnit rezervaci obědu', 'brilo-blocks')}
+              help={__(
+                'Tlačítko rezervace se ukáže jen u denních lístků a jen když jsou rezervace zapnuté v nastavení modulu.',
+                'brilo-blocks',
+              )}
+              checked={showReservation}
+              onChange={(value) => setAttributes({showReservation: value})}
+            />
+          </PanelBody>
+
+          <PanelBody title={__('Když není co zobrazit', 'brilo-blocks')} initialOpen={false}>
+            <ToggleGroupControl
+              label={__('Chování', 'brilo-blocks')}
+              help={EMPTY_HINTS[emptyBehaviour]}
+              value={emptyBehaviour}
+              onChange={(value) => setAttributes({emptyBehaviour: value as FoodMenuGroupAttributes['emptyBehaviour']})}
+              isBlock
+            >
+              <ToggleGroupControlOption value="message" label={__('Zpráva', 'brilo-blocks')} />
+              <ToggleGroupControlOption value="permanent" label={__('Stálá nabídka', 'brilo-blocks')} />
+              <ToggleGroupControlOption value="hide" label={__('Skrýt', 'brilo-blocks')} />
+            </ToggleGroupControl>
+
+            {'hide' !== emptyBehaviour && (
+              <TextareaControl
+                __nextHasNoMarginBottom
+                label={__('Vlastní text zprávy', 'brilo-blocks')}
+                help={__('Když zůstane prázdné, použije se věta podle zvoleného zdroje lístků.', 'brilo-blocks')}
+                rows={2}
+                value={emptyText}
+                onChange={(value) => setAttributes({emptyText: value})}
+              />
+            )}
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          {'manual' === mode && (
+            <div className="brilo-food-menu-preview__pick">
+              {options.renderMenusControl?.({
+                selectedItems: menuIds,
+                onChange: (ids: number[]) => setAttributes({menuIds: ids}),
+              })}
+
+              <Text variant="muted">{pickedNote(menuIds.length)}</Text>
+            </div>
+          )}
+
+          <FoodMenuPreview attributes={attributes} />
+        </div>
+      </>
+    )
+  }
+}