アセットインスペクターAssetInspectorPanelExperimental

import { AssetInspectorPanel } from "@gunjo/ui";
import * as React from "react";

const asset = {
  id: "hero",
  title: "campaign_hero_2026.jpg",
  src: "https://images.unsplash.com/photo-1557683316-973673baf926?auto=format&fit=crop&w=640&q=80",
  width: 1920,
  height: 1080,
  type: "JPG",
  size: "1.4MB",
  createdAt: "2026-05-12",
  isFavorite: true,
  rating: 4.5,
};

export function Example() {
  const [tags, setTags] = React.useState(["ヒーロー", "Web"]);
  const [note, setNote] = React.useState("キャンペーンのメインビジュアルです。");

  return (
    <AssetInspectorPanel
      asset={asset}
      note={note}
      metadata={[
        { label: "ファイル名", value: asset.title },
        { label: "画像サイズ", value: "1920 x 1080" },
        { label: "形式", value: "JPG" },
        { label: "容量", value: "1.4MB" },
      ]}
      onTitleChange={() => {}}
      onNoteChange={setNote}
      tags={tags}
      onTagsChange={setTags}
      onRatingChange={() => {}}
      onFavorite={() => {}}
      onShare={() => {}}
      onDownload={() => {}}
      onDelete={() => {}}
      onClose={() => {}}
      onAnalyze={() => {}}
      onCompress={() => {}}
    />
  );
}