Function SkillInstallView

src/pages/install/components/SkillInstallView.tsx:19–239

({
  metadata,
  prompt,
  scripts,
  references,
  isUpdate,
  installUrl,
  onInstall,
  onClose,
}: SkillInstallViewProps)

}

function SkillInstallView({
  metadata,
  prompt,
  scripts,
  references,
  isUpdate,
  installUrl,
  onInstall,
  onClose,
}: SkillInstallViewProps) {
  const { t } = useTranslation();
  const [promptExpanded, setPromptExpanded] = useState(false);

  return (
    <div id="install-app-container" className="tw-flex tw-flex-col">
      {/* Header */}
      <div className="tw-flex tw-flex-row tw-gap-x-3 tw-pt-3 tw-pb-3">
        <div className="tw-grow-1 tw-shrink-1 tw-flex tw-flex-row tw-justify-start tw-items-center">
          <Tag bordered color="purple" style={{ marginRight: "8px" }}>
            {"Skill"}
          </Tag>
          <Typography.Text bold className="tw-text-size-lg tw-truncate tw-w-0 tw-grow-1">
            {metadata.name}
          </Typography.Text>
          {metadata.version && (
            <Tag bordered color="gray" style={{ marginLeft: "8px" }}>
              {"v"}
              {metadata.version}
            </Tag>
          )}
          {isUpdate && (
            <Tag bordered color="green" style={{ marginLeft: "4px" }}>
              {t("update")}
            </Tag>
          )}
        </div>
      </div>

      {/* Content */}
      <div className="tw-shrink-1 tw-grow-1 tw-overflow-y-auto tw-pl-4 tw-pr-4 tw-gap-y-2 tw-flex tw-flex-col tw-mb-4 tw-h-0">
        <div className="tw-flex tw-flex-wrap tw-gap-x-3 tw-gap-y-2 tw-items-start">
          <div className="tw-flex tw-flex-col tw-shrink-1 tw-grow-1 tw-basis-full">
            {/* Description */}
            {metadata.description && (
              <div className="tw-mb-2">
                <Typography.Text bold>{metadata.description}</Typography.Text>
              </div>
            )}

            {/* Install URL */}
            {installUrl && (
              <div className="tw-mb-2">
                <Typography.Text type="secondary" className="tw-text-xs">
                  {"URL: "}
                  {installUrl}
                </Typography.Text>
              </div>
            )}