@cosxai/ui 0.25.0 → 1.0.0-alpha.1

package/src/layout/SidePanel.tsx

@@ -1,316 +0,0 @@
-import { useEffect, useRef, type CSSProperties, type ReactNode } from 'react';
-import { createPortal } from 'react-dom';
-
-// SidePanel — right-docked overlay-less panel for admin surfaces
-// (doc editors, activity feeds, share managers, …). Slides in from
-// the right and pushes the main content left via
-// `--ck-sidepanel-width`, which Shell / topbar / scroll containers
-// can read to inset themselves. No backdrop — the reader keeps
-// interacting with the doc while the panel is open, mirroring
-// Notion / Linear / Slack right-panel UX.
-//
-// Distinct from `<RightSidebarPanel>` (this bucket's other right-
-// side surface):
-//   - RightSidebarPanel = scoped floating card (bordered, offset
-//     from viewport edges); good for lightweight ephemeral lists.
-//   - SidePanel        = full-height slide-in that reshapes layout;
-//     good for editors + long panels the user will linger in.
-//
-// Companion CSS variable:
-//   `--ck-sidepanel-width` — stamped on `:root` while `open` is true.
-//     Layout consumers (Shell, main scroll containers, watermarks)
-//     should sum this into their right inset:
-//         right: calc(var(--ck-rightrail-width, 0px)
-//                     + var(--ck-sidepanel-width, 0px));
-//     The variable is DELIBERATELY separate from `--ck-rightrail-width`
-//     so the SidePanel can push content-region chrome without
-//     narrowing the topbar (workspace switcher, avatar, notification
-//     pills belong to the topbar and shouldn't slide around when a
-//     doc-scoped panel opens).
-//
-// Anatomy:
-//
-//   ┌─ header (sticky) ─────────────┐
-//   │ Title                       × │
-//   ├───────────────────────────────┤
-//   │                               │
-//   │ body (scrollable + flex col)  │
-//   │                               │
-//   ├─ footer (sticky, optional) ───┤
-//   │ Cancel   Save                 │
-//   └───────────────────────────────┘
-//
-// Non-goals:
-// - Multiple concurrent panels. Only one at a time — a second would
-//   double the marginRight the shell reads and the second panel would
-//   render off-viewport. Callers coordinate open state.
-// - Focus trap. The main content stays interactive; trapping focus
-//   here would break the "keep working while the panel is open"
-//   promise. ESC still closes.
-// - Resize handle. Fixed width per open; iterate if callers need it.
-//
-// Phone: renders the same panel but at `width: min(100vw, width)`
-// so it simply covers the viewport. The push-left effect degrades
-// to a full-screen overlay — acceptable since these surfaces are
-// desktop-first anyway.
-//
-// Body is a flex column so children can opt into `flex: 1` +
-// `minHeight: 0` and grow to fill the panel (e.g. a textarea that
-// should reach the footer). `overflowY: auto` stays as a safety
-// net for content that genuinely exceeds the panel height.
-
-export interface SidePanelProps {
-  open: boolean;
-  onClose: () => void;
-  /** Text shown in the header. Icons / node also accepted. */
-  title: ReactNode;
-  /**
-   * Panel width in CSS px. Default 480 — the sweet spot for an
-   * editor with a couple of fields. Callers override for wider
-   * content (e.g. Activity timeline).
-   */
-  width?: number | undefined;
-  /**
-   * Optional sticky footer — usually action buttons (Cancel / Save).
-   * Omit for read-only surfaces (Activity feed, share reader).
-   */
-  footer?: ReactNode | undefined;
-  /**
-   * Top inset. Defaults to
-   * `calc(var(--ck-topbar-height, 64px) + env(safe-area-inset-top, 0px))`
-   * so the panel docks under the app's topbar. Consumers with a
-   * different topbar height stamp `--ck-topbar-height` on `:root`
-   * OR override this prop directly.
-   */
-  topOffset?: string | undefined;
-  /**
-   * Bottom inset. Defaults to `var(--ck-tabbar-height, 0px)` so
-   * the panel doesn't cover the mobile tab bar. Override for
-   * consumers with different bottom chrome.
-   */
-  bottomOffset?: string | undefined;
-  /**
-   * z-index. Default 25 — sits above main content, below the
-   * standard Modal (100) and typical fixed topbar (30).
-   */
-  zIndex?: number | undefined;
-  children: ReactNode;
-}
-
-const DEFAULT_WIDTH = 480;
-const CSS_VAR_SIDEPANEL_WIDTH = '--ck-sidepanel-width';
-const DEFAULT_TOP_OFFSET =
-  'calc(var(--ck-topbar-height, 64px) + env(safe-area-inset-top, 0px))';
-const DEFAULT_BOTTOM_OFFSET = 'var(--ck-tabbar-height, 0px)';
-const DEFAULT_Z_INDEX = 25;
-
-export function SidePanel({
-  open,
-  onClose,
-  title,
-  width,
-  footer,
-  topOffset,
-  bottomOffset,
-  zIndex,
-  children,
-}: SidePanelProps) {
-  const panelWidth = width ?? DEFAULT_WIDTH;
-  const resolvedTop = topOffset ?? DEFAULT_TOP_OFFSET;
-  const resolvedBottom = bottomOffset ?? DEFAULT_BOTTOM_OFFSET;
-  const resolvedZ = zIndex ?? DEFAULT_Z_INDEX;
-
-  // Stamp / clear `--ck-sidepanel-width` on document root while open.
-  // Consumers that want their layout to shift left when a panel opens
-  // read this var and inset their right edge accordingly. The kit
-  // itself doesn't force any layout to read it — it's an opt-in
-  // contract between the panel and layout consumers.
-  useEffect(() => {
-    if (!open) return;
-    const root = document.documentElement;
-    const prev = root.style.getPropertyValue(CSS_VAR_SIDEPANEL_WIDTH);
-    root.style.setProperty(CSS_VAR_SIDEPANEL_WIDTH, `${panelWidth}px`);
-    return () => {
-      // Restore whatever value was there before us — could be empty
-      // (fall through to token default) or a previous panel's width
-      // if two panels overlap mid-transition.
-      if (prev) {
-        root.style.setProperty(CSS_VAR_SIDEPANEL_WIDTH, prev);
-      } else {
-        root.style.removeProperty(CSS_VAR_SIDEPANEL_WIDTH);
-      }
-    };
-  }, [open, panelWidth]);
-
-  // ESC to close. Global listener so users don't have to focus into
-  // the panel first. Only mounted while open so it doesn't eat ESC
-  // on the main surface.
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        e.stopPropagation();
-        onClose();
-      }
-    };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, [open, onClose]);
-
-  // Focus the close button on open so keyboard users have a
-  // predictable landing target + can Tab into the body. Not a focus
-  // trap — Tab from the last body input walks back out into the
-  // main surface, which is the whole point of the pattern.
-  const closeButtonRef = useRef<HTMLButtonElement | null>(null);
-  useEffect(() => {
-    if (!open) return;
-    // Run after transition frame so the button is actually
-    // interactive by the time focus lands.
-    const raf = requestAnimationFrame(() => {
-      closeButtonRef.current?.focus();
-    });
-    return () => cancelAnimationFrame(raf);
-  }, [open]);
-
-  const containerStyle: CSSProperties = {
-    position: 'fixed',
-    top: resolvedTop,
-    right: 0,
-    bottom: resolvedBottom,
-    width: `min(100vw, ${panelWidth}px)`,
-    background: 'var(--ck-bg-surface, #fff)',
-    borderLeft: '1px solid var(--ck-border-subtle, #eee)',
-    boxShadow: open ? '-4px 0 20px rgba(0, 0, 0, 0.06)' : 'none',
-    transform: open ? 'translateX(0)' : 'translateX(100%)',
-    transition:
-      'transform var(--ck-dur-fast, 180ms) var(--ck-ease, cubic-bezier(0.22, 1, 0.36, 1))',
-    display: 'flex',
-    flexDirection: 'column',
-    zIndex: resolvedZ,
-    // Prevent the closed panel from stealing pointer events on the
-    // main surface (translated off-screen but still in the DOM).
-    pointerEvents: open ? 'auto' : 'none',
-  };
-
-  // Portal to <body> so the panel escapes any `transform` /
-  // `will-change: transform` / `filter` / `contain: paint` ancestor
-  // — those establish a new containing block for `position: fixed`,
-  // meaning the panel would anchor to that ancestor instead of the
-  // viewport (e.g. inside a ZoomLayer it would land mid-page rather
-  // than on the right edge). The body has no such ancestor, so
-  // `right: 0` + `top: <offset>` genuinely means "the viewport
-  // corner".
-  //
-  // `inert` (React 19+) instead of `aria-hidden` for the closed
-  // state: aria-hidden triggers a runtime warning when a focused
-  // descendant exists (the close button focuses on open + keeps
-  // focus briefly after close), and `inert` is the modern correct
-  // API — removes the subtree from the tab sequence + AT tree +
-  // pointer targeting in one attribute.
-  return createPortal(
-    <aside
-      role="complementary"
-      inert={!open}
-      aria-label={typeof title === 'string' ? title : undefined}
-      style={containerStyle}
-    >
-      <header
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          padding: '12px 16px',
-          borderBottom: '1px solid var(--ck-border-subtle, #eee)',
-          gap: 12,
-          flex: '0 0 auto',
-        }}
-      >
-        <div
-          style={{
-            font: '600 14px/1.4 var(--ck-font-sans)',
-            color: 'var(--ck-text-primary, #111)',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-          }}
-        >
-          {title}
-        </div>
-        <button
-          ref={closeButtonRef}
-          type="button"
-          onClick={onClose}
-          aria-label="Close panel"
-          style={{
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: 28,
-            height: 28,
-            borderRadius: 6,
-            border: 'none',
-            background: 'transparent',
-            color: 'var(--ck-text-secondary, #666)',
-            cursor: 'pointer',
-            transition: 'background 120ms ease',
-          }}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.background = 'var(--ck-bg-hover, #f4f4f5)';
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.background = 'transparent';
-          }}
-        >
-          <CloseIcon />
-        </button>
-      </header>
-      <div
-        style={{
-          flex: 1,
-          minHeight: 0,
-          overflowY: 'auto',
-          padding: 16,
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-      >
-        {children}
-      </div>
-      {footer ? (
-        <footer
-          style={{
-            display: 'flex',
-            justifyContent: 'flex-end',
-            alignItems: 'center',
-            gap: 8,
-            padding: '12px 16px',
-            borderTop: '1px solid var(--ck-border-subtle, #eee)',
-            flex: '0 0 auto',
-          }}
-        >
-          {footer}
-        </footer>
-      ) : null}
-    </aside>,
-    document.body,
-  );
-}
-
-function CloseIcon(): ReactNode {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <line x1="18" y1="6" x2="6" y2="18" />
-      <line x1="6" y1="6" x2="18" y2="18" />
-    </svg>
-  );
-}

package/src/layout/StickyBanner.tsx

@@ -1,83 +0,0 @@
-import type { ReactNode, CSSProperties } from "react";
-
-// Eyebrow + title + optional right-slot, sticky at top of a page
-// region (NOT the topbar — this is for an in-page sticky like
-// "Reviewing as <name>" or "Document signed · view audit log").
-// Caller controls when it shows. Visual mass matches a topbar
-// (64 px) so it can sit directly underneath one cleanly.
-
-export interface StickyBannerProps {
-  eyebrow?: string;
-  title: ReactNode;
-  // Right-aligned action cluster.
-  actions?: ReactNode;
-  // Sticky top offset in px. Default 64 (below topbar).
-  topOffset?: number;
-  height?: number;
-  className?: string;
-  // Visual tone — adjusts background. Default 'info'.
-  tone?: "info" | "warning" | "success" | "critical";
-}
-
-const TONE_BG: Record<NonNullable<StickyBannerProps["tone"]>, string> = {
-  info: "var(--ck-info-muted)",
-  warning: "var(--ck-warning-muted)",
-  success: "var(--ck-success-muted)",
-  critical: "var(--ck-critical-muted)",
-};
-const TONE_BORDER: Record<NonNullable<StickyBannerProps["tone"]>, string> = {
-  info: "var(--ck-accent-border)",
-  warning: "var(--ck-warning)",
-  success: "var(--ck-success)",
-  critical: "var(--ck-critical)",
-};
-
-export function StickyBanner({
-  eyebrow,
-  title,
-  actions,
-  topOffset = 64,
-  height = 64,
-  className,
-  tone = "info",
-}: StickyBannerProps) {
-  return (
-    <div
-      className={className}
-      style={
-        {
-          position: "sticky",
-          top: topOffset,
-          height,
-          padding: "0 24px",
-          display: "flex",
-          alignItems: "center",
-          gap: 16,
-          background: TONE_BG[tone],
-          borderBottom: `1px solid ${TONE_BORDER[tone]}`,
-          zIndex: 10,
-          fontFamily: "var(--ck-font-sans)",
-        } as CSSProperties
-      }
-    >
-      <div style={{ flex: 1, minWidth: 0 }}>
-        {eyebrow && (
-          <div className="ck-eyebrow" style={{ marginBottom: 2 }}>
-            {eyebrow}
-          </div>
-        )}
-        <div
-          style={{
-            font: "500 14px/1.3 var(--ck-font-sans)",
-            color: "var(--ck-text-primary)",
-          }}
-        >
-          {title}
-        </div>
-      </div>
-      {actions && (
-        <div style={{ display: "flex", gap: 8, flex: "none" }}>{actions}</div>
-      )}
-    </div>
-  );
-}

package/src/layout/Topbar.tsx

@@ -1,68 +0,0 @@
-import type { ReactNode } from "react";
-
-// Top chrome strip. Three slots — left (crumbs / brand / back arrow),
-// center (page-specific affordance like a tab switcher), right
-// (actions). Height is exposed as --ck-breadcrumb-height (default
-// 64 px) so the right-side panel, command palette, and other fixed-
-// position UI can offset themselves correctly.
-
-export interface TopbarProps {
-  // Usually <Breadcrumb /> on desktop, page title on mobile.
-  left?: ReactNode;
-  // Optional centred slot. Hidden if not supplied.
-  center?: ReactNode;
-  // Right cluster — theme toggle, profile chip, etc.
-  right?: ReactNode;
-  // Height in px. Default 64. Stamps --ck-breadcrumb-height so
-  // sticky elements below can align.
-  height?: number;
-  className?: string;
-}
-
-export function Topbar({
-  left,
-  center,
-  right,
-  height = 64,
-  className,
-}: TopbarProps) {
-  return (
-    <header
-      data-ck-topbar
-      className={className}
-      style={
-        {
-          height,
-          padding: "0 24px",
-          display: "flex",
-          alignItems: "center",
-          gap: 16,
-          background: "var(--ck-bg-surface)",
-          borderBottom: "1px solid var(--ck-border-subtle)",
-          ["--ck-breadcrumb-height" as string]: `${height}px`,
-        } as React.CSSProperties
-      }
-    >
-      <div style={{ flex: "1 1 auto", minWidth: 0 }}>{left}</div>
-      {center && (
-        <div
-          style={{
-            position: "absolute",
-            left: "50%",
-            transform: "translateX(-50%)",
-            display: "flex",
-            alignItems: "center",
-            gap: 8,
-          }}
-        >
-          {center}
-        </div>
-      )}
-      {right && (
-        <div style={{ display: "flex", alignItems: "center", gap: 8, flex: "none" }}>
-          {right}
-        </div>
-      )}
-    </header>
-  );
-}

package/src/layout/index.ts

@@ -1,24 +0,0 @@
-export { Shell } from "./Shell";
-export type { ShellProps } from "./Shell";
-export { Topbar } from "./Topbar";
-export type { TopbarProps } from "./Topbar";
-export { Breadcrumb } from "./Breadcrumb";
-export type { BreadcrumbProps, CrumbItem } from "./Breadcrumb";
-export { LeftNavRail } from "./LeftNavRail";
-export type { LeftNavRailProps } from "./LeftNavRail";
-export { useNavRailState } from "./useNavRailState";
-export type { NavRailState, UseNavRailStateOpts } from "./useNavRailState";
-export { MobileTabBar } from "./MobileTabBar";
-export type { MobileTabBarProps, MobileTab } from "./MobileTabBar";
-export { RightSidebarPanel } from "./RightSidebarPanel";
-export type { RightSidebarPanelProps } from "./RightSidebarPanel";
-export { SidePanel } from "./SidePanel";
-export type { SidePanelProps } from "./SidePanel";
-export { StickyBanner } from "./StickyBanner";
-export type { StickyBannerProps } from "./StickyBanner";
-export { NavSection } from "./NavSection";
-export type { NavSectionProps } from "./NavSection";
-export { NavItem } from "./NavItem";
-export type { NavItemProps } from "./NavItem";
-export { NavSearchTrigger } from "./NavSearchTrigger";
-export type { NavSearchTriggerProps } from "./NavSearchTrigger";

package/src/layout/useNavRailState.ts

@@ -1,69 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { useViewport } from "../hooks/useViewport";
-
-// Manages the collapse state of <LeftNavRail>. Two layers:
-//
-//   1. User preference — persisted in localStorage under
-//      `storageKey`. The user toggles via a button in the rail.
-//   2. Viewport rule — below `forceCollapseBelow` the rail is
-//      always collapsed regardless of user preference.
-//
-// The hook returns the EFFECTIVE collapsed state (combining the
-// two) plus a setter that only mutates the user preference (the
-// viewport rule continues to apply on top).
-
-export interface UseNavRailStateOpts {
-  storageKey?: string;
-  // Viewport width below which the rail force-collapses, ignoring
-  // user preference. Default 1100 px.
-  forceCollapseBelow?: number;
-  // Initial preference if nothing is in localStorage. Default false
-  // (expanded).
-  defaultCollapsed?: boolean;
-}
-
-export interface NavRailState {
-  collapsed: boolean;
-  // The viewport is currently overriding the user preference.
-  // Toggle button should be disabled when this is true.
-  forcedByViewport: boolean;
-  toggle: () => void;
-  setCollapsed: (next: boolean) => void;
-}
-
-const DEFAULT_KEY = "ck-leftnav-collapsed";
-
-export function useNavRailState({
-  storageKey = DEFAULT_KEY,
-  forceCollapseBelow = 1100,
-  defaultCollapsed = false,
-}: UseNavRailStateOpts = {}): NavRailState {
-  const [userPref, setUserPref] = useState<boolean>(() => {
-    if (typeof window === "undefined") return defaultCollapsed;
-    const stored = window.localStorage.getItem(storageKey);
-    if (stored === "1") return true;
-    if (stored === "0") return false;
-    return defaultCollapsed;
-  });
-  const vp = useViewport({ narrow: forceCollapseBelow });
-  const forcedByViewport = vp.isNarrow;
-  const collapsed = forcedByViewport || userPref;
-
-  const setCollapsed = useCallback(
-    (next: boolean) => {
-      setUserPref(next);
-    },
-    [],
-  );
-
-  useEffect(() => {
-    window.localStorage.setItem(storageKey, userPref ? "1" : "0");
-  }, [userPref, storageKey]);
-
-  const toggle = useCallback(() => {
-    if (forcedByViewport) return; // no-op — viewport rules
-    setUserPref((v) => !v);
-  }, [forcedByViewport]);
-
-  return { collapsed, forcedByViewport, toggle, setCollapsed };
-}

package/src/lib/time-utils.ts

@@ -1,44 +0,0 @@
-// Time formatting helpers.
-
-// "3m ago" / "2h ago" / "5d ago", falls back to a locale date past
-// 30 days. Use for activity rows, comment timestamps, anywhere a
-// short relative cue beats a full timestamp.
-export function relativeTime(ts: number): string {
-  const diff = Date.now() - ts;
-  const sec = Math.round(diff / 1000);
-  if (sec < 60) return `${sec}s ago`;
-  const min = Math.round(sec / 60);
-  if (min < 60) return `${min}m ago`;
-  const hr = Math.round(min / 60);
-  if (hr < 24) return `${hr}h ago`;
-  const day = Math.round(hr / 24);
-  if (day < 30) return `${day}d ago`;
-  return new Date(ts).toLocaleDateString();
-}
-
-// Null-safe locale date formatter — accepts ms timestamps, ISO
-// strings, null, undefined, or non-finite values. Empty inputs
-// render as an em-dash placeholder ("—"), which most list rows
-// were doing inline with a ternary before.
-export function formatDate(ms: number | string | null | undefined): string {
-  const n = coerceMs(ms);
-  if (n === null) return "—";
-  return new Date(n).toLocaleDateString();
-}
-
-// Full date + time formatter with the same null-safe semantics.
-export function formatTimestamp(
-  ms: number | string | null | undefined,
-  opts?: Intl.DateTimeFormatOptions,
-): string {
-  const n = coerceMs(ms);
-  if (n === null) return "—";
-  return opts ? new Date(n).toLocaleString(undefined, opts) : new Date(n).toLocaleString();
-}
-
-function coerceMs(ms: number | string | null | undefined): number | null {
-  if (ms == null) return null;
-  const n = typeof ms === "string" ? Number(ms) : ms;
-  if (!Number.isFinite(n) || n <= 0) return null;
-  return n;
-}

package/src/neobrutalism/Marquee.tsx

@@ -1,81 +0,0 @@
-import type { CSSProperties } from "react";
-
-// Looping marquee strip — the signature neobrutalism section
-// divider. "NEOBRUTALISM · NEOBRUTALISM · NEOBRUTALISM…" in
-// chunky 800-weight type, scrolling horizontally. Decoration,
-// not nav.
-//
-// Pure CSS animation — no rAF loops, no JS. The repeated text
-// inside is doubled so when the first set scrolls past the edge,
-// the second is already in position to seamlessly continue.
-
-export interface MarqueeProps {
-  text: string;
-  // Pixels per second. Default 60 — comfortable reading speed.
-  speed?: number;
-  // Visual variant. "default" = accent background; "inverted" =
-  // pure black background with white text.
-  variant?: "default" | "inverted";
-  // px height. Default 56.
-  height?: number;
-  // Slight skew angle (deg). Default 0; try -2 for a punk feel.
-  skew?: number;
-  className?: string;
-  style?: CSSProperties;
-}
-
-export function Marquee({
-  text,
-  speed = 60,
-  variant = "default",
-  height = 56,
-  skew = 0,
-  className,
-  style,
-}: MarqueeProps) {
-  // Each phrase is ~80 px wide for a typical 20-char fragment;
-  // 10 copies gives ~800 px content — wide enough that the loop
-  // is always seamless on any viewport. Real measurement happens
-  // visually; for now the count + duration combo just need to be
-  // multiples that produce a continuous loop.
-  const phrases = new Array(10).fill(text).join("  •  ");
-  const duration = `${(phrases.length * 8) / speed}s`;
-
-  return (
-    <div
-      className={className}
-      style={{
-        overflow: "hidden",
-        height,
-        background:
-          variant === "inverted" ? "#000000" : "var(--ck-accent, #88AAEE)",
-        color: variant === "inverted" ? "#FFFFFF" : "#000000",
-        border: "2px solid var(--neobrut-ink, #000)",
-        borderRadius: 4,
-        transform: skew ? `skewY(${skew}deg)` : undefined,
-        position: "relative",
-        ...style,
-      }}
-    >
-      <div
-        style={{
-          position: "absolute",
-          inset: 0,
-          display: "flex",
-          alignItems: "center",
-          gap: 40,
-          whiteSpace: "nowrap",
-          font: "800 22px/1 var(--ck-font-display, var(--ck-font-sans))",
-          letterSpacing: "0.04em",
-          animation: `ck-neobrut-marquee ${duration} linear infinite`,
-          willChange: "transform",
-        }}
-      >
-        {/* Doubled for seamless loop. CSS animation translates by
-            -50% so the second copy moves into the first's position. */}
-        <span>{phrases}</span>
-        <span aria-hidden>{phrases}</span>
-      </div>
-    </div>
-  );
-}