From e5efba21db101d52f8d46faa27cce03e577f026e Mon Sep 17 00:00:00 2001
From: DuroCodes <davidwright13503@gmail.com>
Date: Fri, 24 May 2024 15:02:42 -0400
Subject: [PATCH] feat: add icon to `PackageManagers`

---
 src/components/PackageManagers.astro | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/PackageManagers.astro b/src/components/PackageManagers.astro
index aeeb2c3dd..26104b2a6 100644
--- a/src/components/PackageManagers.astro
+++ b/src/components/PackageManagers.astro
@@ -1,7 +1,7 @@
 ---
 import { Tabs, TabItem, Code } from "@astrojs/starlight/components";
 
-type Command = "add" | "update" | "remove";
+type Command = "add" | "update" | "remove" | "create";
 type PackageManager = (typeof packageManagers)[number];
 
 const packageManagers = ["NPM", "PNPM", "Yarn", "Bun"] as const;
@@ -16,7 +16,7 @@ const packageManagerCode = (
   text: string,
   manager: PackageManager,
 ) => {
-  const commands = {
+  const commands: Record<Command, Record<PackageManager, string>> = {
     add: {
       NPM: `npm install ${text}`,
       Yarn: `yarn add ${text}`,
@@ -46,13 +46,24 @@ const packageManagerCode = (
   return commands[command][manager];
 };
 
+const packageManagerIcon = (manager: PackageManager) => {
+  const icons = {
+    NPM: "seti:npm",
+    Yarn: "seti:yarn",
+    PNPM: "pnpm",
+    Bun: "bun",
+  } as const;
+
+  return icons[manager];
+};
+
 const { command, text } = Astro.props;
 ---
 
 <Tabs syncKey="package-manager">
   {
     packageManagers.map((manager) => (
-      <TabItem label={manager}>
+      <TabItem label={manager} icon={packageManagerIcon(manager)}>
         <Code lang="sh" code={packageManagerCode(command, text, manager)} />
       </TabItem>
     ))