harshapitla/stackoverflow

1import React from "react";2import Icon from "../common/Icon";3import { APP_COPY } from "../../config/appConfig";4 5export default function AppHeader({6  metadata,7  showColumns,8  onToggleColumns,9  isLoadingMetadata,10  onRefresh,11  isRefreshing,12}) {13  const rowsCount = metadata?.rowsCount || 0;14  const columnCount = metadata?.columns?.length || 0;15 16  return (17    <header className="app-header">18      <div>19        <h1 className="app-title">{APP_COPY.title}</h1>20        <p className="app-sub">{APP_COPY.subtitle}</p>21        <div className="app-meta-line">22          <Icon name="dataset" size={16} />23          {isLoadingMetadata24            ? "Loading dataset…"25            : `${rowsCount.toLocaleString()} extensions • ${26                APP_COPY.datasetLabel27              }`}28        </div>29      </div>30      <div className="header-actions">31        <button32          className="meta-toggle"33          type="button"34          onClick={onRefresh}35          disabled={isRefreshing}36          title="Refresh dataset"37        >38          <Icon39            name="refresh"40            size={16}41            className={isRefreshing ? "spinning" : ""}42          />43          {isRefreshing ? "Refreshing…" : "Refresh data"}44        </button>45        <button46          className="meta-toggle"47          type="button"48          onClick={onToggleColumns}49          aria-pressed={showColumns}50          title={APP_COPY.datasetTooltip}51        >52          <Icon name="clipboard" size={16} />53          {showColumns54            ? "Hide columns"55            : `Explore dataset columns (${columnCount})`}56        </button>57      </div>58    </header>59  );60}61