---
import { getMyPatterns } from './list.json';

import { Content } from '../../../../my-patterns/README.md';
import HeadCommon from '../../components/HeadCommon.astro';

const myPatterns = await getMyPatterns();
---

<head>
  <HeadCommon />
</head>
<body class="bg-slate-800">
  {
    Object.keys(myPatterns).length === 0 && (
      <div class="prose prose-invert p-2">
        <Content />
      </div>
    )
  }
  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2 p-2 select-none">
    {
      Object.entries(myPatterns).map(([name, tune]) => (
        <a
          class="rounded-md bg-slate-900 hover:bg-slate-700 cursor-pointer relative"
          href={`./#${btoa(tune as string)}`}
        >
          <div class="absolute w-full h-full flex justify-center items-center">
            <span class="bg-slate-800 p-2 rounded-md text-white">{name}</span>
          </div>
          <img src={`./swatch/${name}.png`} />
        </a>
      ))
    }
  </div>
</body>
