chunk-toolbar.tsx

Overview

chunk-toolbar.tsx defines a React functional component named ChunkToolbar. This component provides a user interface toolbar designed to display a title (text) and a set of action buttons aligned horizontally. It is primarily intended for use in contexts where a "chunk" or segment of data/text is displayed and the user needs quick access to related actions such as copying content to clipboard or exporting it.

The toolbar features:

• A prominently styled text label.

• Two buttons: one icon-only button for copying, and one outlined button labeled "Export".

This component is styled using utility CSS classes (likely from Tailwind CSS or a similar framework) to ensure consistent spacing, typography, and layout.

Component: ChunkToolbar

Description

ChunkToolbar is a presentational component that receives a text string to display as a title and renders a toolbar with copy and export buttons.

Props

Usage Example

import { ChunkToolbar } from './chunk-toolbar';

function Example() {
  return <ChunkToolbar text="Section 1: Introduction" />;
}

This will render a toolbar with the label "Section 1: Introduction" on the left, and two buttons (copy icon and export) on the right.

Return Value

The function returns a JSX element representing the toolbar UI.

Implementation Details

• The component uses Flexbox (flex justify-between) to place the text label on the left and the button group on the right.

• The text label uses the following CSS classes for styling:

  • text-colors-text-neutral-strong: Presumably a color utility for strong neutral text.

  • text-3xl: Large font size (3 times extra large).

  • font-bold: Bold font weight.

• The buttons are wrapped inside a flex container with items-center to vertically align icons and text, and gap-3 for spacing.

• The buttons use variants and sizes from a custom Button component imported from @/components/ui/button.

  • The first button uses variant='icon' and size='icon' to display an icon button.

  • The second button uses variant='outline' and size='sm' to display a small outlined button.

• The copy button contains the Copy icon imported from lucide-react.

• No handlers or interactivity are defined in this file; presumably, these buttons would have event handlers passed in or managed at a higher level.

Interaction with Other System Parts

• UI Library: The Button component is imported from a local UI library (@/components/ui/button). This implies a shared design system or component library is used across the project.

• Icon Set: The Copy icon comes from lucide-react, a popular icon library.

• Styling: Uses utility-first CSS classes, indicating Tailwind CSS or a similar framework is used for styling.

• Usage Context: This toolbar is likely used in views or components that display chunks of text or data blocks, providing users with quick actions to copy or export the chunk content.

Visual Diagram

componentDiagram
    ChunkToolbar <|-- Button
    ChunkToolbar <|-- CopyIcon[Copy (icon)]

    ChunkToolbar : +text: string
    ChunkToolbar : +render()
    Button : variant, size
    CopyIcon : SVG Icon

    ChunkToolbar -- uses --> Button
    Button -- contains --> CopyIcon

Summary

chunk-toolbar.tsx is a simple, reusable React component providing a stylized toolbar with a text label and action buttons for copying and exporting. It relies on shared UI components and icon libraries, and fits into a larger UI system that displays and manipulates text/data chunks. The component focuses on layout and presentation, leaving action logic to be implemented elsewhere.