Cleanup NPM data to display

src/lib/components/ComponentIndex/ArrowButton.svelte

@@ -1,6 +1,7 @@
 <script>
   export const primary = false;
   export let active = false;
+  export let small = false
 </script>
 
 <style>
@@ -14,6 +15,10 @@
     padding: 5px 15px;
     position: relative;
   }
+  div.small {
+    font-size: 0.8em;
+    padding: 3px 10px;
+  }
   div:hover {
     cursor: pointer;
     border-color: var(--color) !important;
@@ -37,8 +42,8 @@
   .popin {
     display: none;
     position: absolute;
-    left: calc(100% - 1rem);
-    top: 1rem;
+    left: calc(100% - 1em);
+    top: 1em;
     z-index: 100;
     margin: 0;
     padding: 0;
@@ -59,7 +64,7 @@
   }
 </style>
 
-<div on:click>
+<div on:click class:small>
   <span>
     <slot />
   </span>

src/lib/components/ComponentIndex/Card.svelte

@@ -9,6 +9,7 @@
   export let url = "";
   export let npm = "";
   export let repo = "";
+  export let manager = "npm"
 
   let clipboardCopy = false
 	const copyToClipboard = (text) => {
@@ -20,6 +21,16 @@
 			})
 			.catch(() => alert('Clipboard copy Permission denied'));
 	};
+
+  const packageManagers = {
+    'npm':  "npm install",
+    "pnpm":  "pnpm add",
+    "yarn":  "yarn add"
+  }
+
+  const cleanupNpm = (npm) => {
+    return npm.replace('https://www.npmjs.com/package/', '')
+  }
 </script>
 
 <style>
@@ -76,7 +87,7 @@
 <div class="card" class:active id="component-{escape(title)}">
   <h3>
     <a href="#component-{escape(title)}">#</a> <a href={url}>{title}</a>
-    {#if npm}<Tag click={() => copyToClipboard(`npm install ${npm}`)} variant="copy" title={clipboardCopy ? 'copied!' : `npm install ${npm}`}/>{/if}
+    {#if npm}<Tag click={() => copyToClipboard(`${packageManagers[manager]}l ${cleanupNpm(npm)}`)} variant="copy" title={clipboardCopy ? 'copied!' : `${packageManagers[manager]} ${cleanupNpm(npm)}`}/>{/if}
   </h3>
   <p class="flex-grow">{description}</p>
   <div class="card__tags">

src/routes/components/index.svelte

@@ -11,6 +11,7 @@
   let filterTag = []
   let filterCategory = null
   let sorting = 'added_desc';
+  let packageManager = 'npm'
 
   const intersection = (array1, array2) => {
     return array1.filter(item => array2.includes(item))
@@ -203,6 +204,14 @@
             <li><label><input type="radio" bind:group={sorting} value="name_desc"> Name Desc</label></li>
         </ul>
       </Button>
+      <Button small active={packageManager !== ''}>
+        Package Manager
+        <ul slot="menu" role="menu" class="popin no-wrap">
+          <li><label><input type="radio" bind:group={packageManager} value="npm"> NPM</label></li>
+          <li><label><input type="radio" bind:group={packageManager} value="pnpm"> PNPM</label></li>
+          <li><label><input type="radio" bind:group={packageManager} value="yarn"> Yarn</label></li>
+        </ul>
+      </Button>
     </div>
 
     <input
@@ -216,7 +225,7 @@
   {#each categories as category}
     <List title={category||"Unclassified"}>
       {#each dataToDisplay.filter(d => d.category === category) as data}
-        <ComponentCard {...data} />
+        <ComponentCard {...data} manager={packageManager} />
       {/each}
     </List>
   {/each}