Data Display Components

import { Spinner } from '@wordpress/components';

function LoadingExample() {
  return (
    <div>
      <Spinner />
      <p>Loading content...</p>
    </div>
  );
}

import { __experimentalProgressBar as ProgressBar } from '@wordpress/components';
import { useState, useEffect } from '@wordpress/element';

function UploadProgress() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prev) => Math.min(prev + 10, 100));
    }, 500);
    return () => clearInterval(interval);
  }, []);

  return <ProgressBar value={progress} />;
}

import { Icon } from '@wordpress/components';
import { check, closeSmall, wordpress } from '@wordpress/icons';

function IconExamples() {
  return (
    <>
      <Icon icon={check} />
      <Icon icon={wordpress} size={48} />
      <Icon icon={closeSmall} size={24} />
    </>
  );
}

import { Dashicon } from '@wordpress/components';

function DashiconExample() {
  return <Dashicon icon="admin-users" size={20} />;
}

import { Avatar } from '@wordpress/components';

function UserAvatar() {
  return (
    <>
      <Avatar
        name="John Doe"
        src="https://example.com/avatar.jpg"
        size={48}
      />
      <Avatar
        name="Jane Smith"
        size={32}
      />
    </>
  );
}

import { AvatarGroup } from '@wordpress/components';

function TeamAvatars() {
  return (
    <AvatarGroup
      avatars={[
        { name: 'Alice', src: 'https://example.com/alice.jpg' },
        { name: 'Bob', src: 'https://example.com/bob.jpg' },
        { name: 'Charlie', src: 'https://example.com/charlie.jpg' },
        { name: 'Diana' },
        { name: 'Eve' },
      ]}
      maxAvatars={3}
    />
  );
}

import { __experimentalBadge as Badge } from '@wordpress/components';

function StatusBadges() {
  return (
    <>
      <Badge>New</Badge>
      <Badge intent="info">Beta</Badge>
      <Badge intent="success">Published</Badge>
      <Badge intent="warning">Draft</Badge>
      <Badge intent="error">Error</Badge>
    </>
  );
}

import { __experimentalIndicator as Indicator } from '@wordpress/components';

function OnlineStatus() {
  return (
    <div>
      <Indicator isPrimary />
      <span>User is online</span>
    </div>
  );
}

import { __experimentalText as Text } from '@wordpress/components';

function TextExamples() {
  return (
    <>
      <Text size="body">Regular body text</Text>
      <Text size="caption" isBlock>
        Caption text
      </Text>
      <Text weight={600}>Bold text</Text>
      <Text variant="muted">Muted text</Text>
    </>
  );
}

import { __experimentalHeading as Heading } from '@wordpress/components';

function HeadingExamples() {
  return (
    <>
      <Heading level={1}>Main Title</Heading>
      <Heading level={2}>Subtitle</Heading>
      <Heading level={3} weight={400}>Section</Heading>
    </>
  );
}

import { __experimentalTruncate as Truncate } from '@wordpress/components';

function TruncatedText() {
  return (
    <Truncate numberOfLines={2}>
      This is a very long text that will be truncated after two lines.
      Any content beyond the specified number of lines will be hidden
      and replaced with an ellipsis.
    </Truncate>
  );
}

import { ColorIndicator } from '@wordpress/components';

function ColorDisplay() {
  return (
    <div>
      <ColorIndicator colorValue="#ff0000" />
      <span>Primary Red</span>
    </div>
  );
}

import { GradientPicker } from '@wordpress/components';
import { useState } from '@wordpress/element';

function MyGradientPicker() {
  const [gradient, setGradient] = useState(
    'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
  );

  return (
    <GradientPicker
      value={gradient}
      onChange={setGradient}
      gradients={[
        {
          name: 'Purple',
          gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          slug: 'purple',
        },
        {
          name: 'Blue',
          gradient: 'linear-gradient(135deg, #00c6ff 0%, #0072ff 100%)',
          slug: 'blue',
        },
      ]}
    />
  );
}

import { ExternalLink } from '@wordpress/components';

function DocumentationLink() {
  return (
    <ExternalLink href="https://wordpress.org/gutenberg/">
      Visit Gutenberg Docs
    </ExternalLink>
  );
}

import { FocalPointPicker } from '@wordpress/components';
import { useState } from '@wordpress/element';

function ImageFocalPoint() {
  const [focalPoint, setFocalPoint] = useState({ x: 0.5, y: 0.5 });

  return (
    <FocalPointPicker
      url="https://example.com/image.jpg"
      value={focalPoint}
      onChange={setFocalPoint}
    />
  );
}

import { Placeholder } from '@wordpress/components';
import { wordpress } from '@wordpress/icons';

function EmptyState() {
  return (
    <Placeholder
      icon={wordpress}
      label="No content yet"
      instructions="Add your first item to get started"
    >
      <Button variant="primary">Add Item</Button>
    </Placeholder>
  );
}

import { SandBox } from '@wordpress/components';

function HTMLPreview() {
  const html = '<h1>Hello World</h1><p>This is sandboxed HTML</p>';

  return <SandBox html={html} />;
}