Benjamin Modayil

// Name: Get Hero Icons
// Description: Copies a Hero Icon from TailwindLabs open-sourced repository.
// Author: Benjamin Modayil
// Twitter: @modayilme

/** @type {import("@johnlindquist/kit")} */

const baseRoute = 'https://api.github.com/repos/tailwindlabs/heroicons/contents/optimized';
let outlineFolderPath = `${baseRoute}/outline`;
let solidFolderPath = `${baseRoute}/solid`;

let outlineFiles;
let solidFiles;

const headers = {
  'User-Agent': 'scriptkit/hero-icons'
};

try {
  let outlineResponse = await get(outlineFolderPath, headers);
  let solidResponse = await get(solidFolderPath, headers);
  outlineFiles = outlineResponse.data;
  solidFiles = solidResponse.data;
} catch (error) {
  notify(error);
}

const outlineRemotePath =
  'https://raw.githubusercontent.com/tailwindlabs/heroicons/master/optimized/outline';
const solidRemotePath =
  'https://raw.githubusercontent.com/tailwindlabs/heroicons/master/optimized/solid';

// We only loop over the outline folder files as the only difference in folders is the icon style type, solid versus outline, (230 files in each folder).
const options = outlineFiles.map((file) => {
  return {
    name: file.name,
    description: file.path,
    value: file.name,
    preview: `
      <div class="bg-white flex">
        <figure class="flex flex-col items-center flex-auto w-40 m-0">
          <img class="w-40" src="${outlineRemotePath}/${file.name}" alt="outline ">
          <figcaption class="center text-black">outline</figcaption>
        </figure>
        <figure class="flex flex-col items-center flex-auto w-40 m-0">
          <img class="w-40" src="${solidRemotePath}/${file.name}" alt="solid ">
          <figcaption class="center text-black">solid</figcaption>
        </figure>
      </div>
    `
  };
});

const fileName = await arg('Search for an icon:', options);
const typeOptions = [
  {
    name: 'outline',
    value: `${outlineRemotePath}/${fileName}`,
    preview: `
      <div>
        <figure class="bg-white flex flex-col items-center flex-auto w-40 m-0">
          <img class="w-40" src="${outlineRemotePath}/${fileName}" alt="outline ${fileName}">
          <figcaption class="center text-black">outline</figcaption>
        </figure>
      </div>
    `
  },
  {
    name: 'solid',
    value: `${solidRemotePath}/${fileName}`,
    preview: () => `
      <div>
        <figure class="bg-white flex flex-col items-center flex-auto w-40 m-0">
          <img class="w-40" src="${solidRemotePath}/${fileName}" alt="solid ${fileName}">
          <figcaption class="center text-black">solid</figcaption>
        </figure>
      </div>
    `
  }
];

const downloadLink = await arg('Which type?', typeOptions);
const type = downloadLink.includes('outline') ? 'outline' : 'solid';
try {
  let buffer = await download(downloadLink, headers);
  await copy(buffer.toString());
  notify(`Copied ${type} ${fileName} icon to clipboard`);
} catch (error) {
  notify(error);
}