From 961ad22779f5812b85ff018652dbe858f1997c9f Mon Sep 17 00:00:00 2001
From: Jeevan Mahesha <jeevan.mahesha@trustrace.com>
Date: Tue, 28 Jan 2025 19:11:02 +0530
Subject: [PATCH] docs: add package installer tabs component

add component to display installation commands for package managers.
---
 .../(documentation)/documentation/cli.page.ts |  6 +-
 .../package-installer-tabs.component.ts       | 68 +++++++++++++++++++
 2 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 apps/app/src/app/shared/layout/package-installer-tabs.component.ts

diff --git a/apps/app/src/app/pages/(documentation)/documentation/cli.page.ts b/apps/app/src/app/pages/(documentation)/documentation/cli.page.ts
index 450e1dc4b..48ce39a9c 100644
--- a/apps/app/src/app/pages/(documentation)/documentation/cli.page.ts
+++ b/apps/app/src/app/pages/(documentation)/documentation/cli.page.ts
@@ -3,8 +3,8 @@ import { Component } from '@angular/core';
 import { provideIcons } from '@ng-icons/core';
 import { lucideTriangleAlert } from '@ng-icons/lucide';
 import { hlmCode, hlmH4, hlmP } from '@spartan-ng/ui-typography-helm';
-import { CodeComponent } from '../../../shared/code/code.component';
 import { MainSectionDirective } from '../../../shared/layout/main-section.directive';
+import { PackageInstallerTabsComponent } from '../../../shared/layout/package-installer-tabs.component';
 import { PageBottomNavLinkComponent } from '../../../shared/layout/page-bottom-nav/page-bottom-nav-link.component';
 import { PageBottomNavComponent } from '../../../shared/layout/page-bottom-nav/page-bottom-nav.component';
 import { PageNavComponent } from '../../../shared/layout/page-nav/page-nav.component';
@@ -29,8 +29,8 @@ export const routeMeta: RouteMeta = {
 		PageBottomNavLinkComponent,
 		PageNavComponent,
 		SectionSubHeadingComponent,
-		CodeComponent,
 		TabsCliComponent,
+		PackageInstallerTabsComponent,
 	],
 	providers: [provideIcons({ lucideTriangleAlert })],
 	template: `
@@ -52,7 +52,7 @@ export const routeMeta: RouteMeta = {
 				<code class="${hlmCode}">spartan</code>
 				to your Angular CLI project or Nx workspace simply install the plugin with the command below:
 			</p>
-			<spartan-code class="mt-4" code="npm i -D @spartan-ng/cli" />
+			<spartan-package-installer-tab class="mt-4" />
 
 			<h3 id="nx__ui" class="${hlmH4} mt-12">ui</h3>
 			<p class="${hlmP}">
diff --git a/apps/app/src/app/shared/layout/package-installer-tabs.component.ts b/apps/app/src/app/shared/layout/package-installer-tabs.component.ts
new file mode 100644
index 000000000..88f4f8181
--- /dev/null
+++ b/apps/app/src/app/shared/layout/package-installer-tabs.component.ts
@@ -0,0 +1,68 @@
+import { KeyValuePipe } from '@angular/common';
+import { Component, computed, input, signal } from '@angular/core';
+import {
+	BrnTabsContentDirective,
+	BrnTabsDirective,
+	BrnTabsListDirective,
+	BrnTabsTriggerDirective,
+} from '@spartan-ng/brain/tabs';
+import { CodeComponent } from '../code/code.component';
+
+const packageInstallationCommands = {
+	npm: 'npm i -D @spartan-ng/cli',
+	pnpm: 'pnpm add -D @spartan-ng/cli',
+	yarn: 'yarn add -D @spartan-ng/cli',
+	bun: 'bun install -D @spartan-ng/cli',
+} as const;
+
+type PackageKey = keyof typeof packageInstallationCommands;
+
+const tabBtn =
+	'inline-flex items-center justify-center whitespace-nowrap py-1 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none';
+const tabContent =
+	'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border border-border';
+@Component({
+	selector: 'spartan-package-installer-tab',
+	standalone: true,
+	imports: [
+		BrnTabsDirective,
+		BrnTabsListDirective,
+		BrnTabsTriggerDirective,
+		BrnTabsContentDirective,
+		CodeComponent,
+		KeyValuePipe,
+	],
+	host: {
+		class: 'block',
+	},
+	template: `
+		<div [brnTabs]="value()" class="block" (tabActivated)="onTabActivated($event)">
+			<div
+				brnTabsList
+				class="border-border text-muted-foreground mb-4 inline-flex h-9 w-full items-center justify-start rounded-none border-b bg-transparent p-0"
+			>
+				@for (item of cliInstallationCommands | keyvalue: collationComparator; track item.key) {
+					<button class="${tabBtn}" [brnTabsTrigger]="item.key">{{ item.key }}</button>
+				}
+			</div>
+			<div class="${tabContent}" [brnTabsContent]="value()">
+				<spartan-code [language]="language()" [code]="installCommand()" />
+			</div>
+		</div>
+	`,
+})
+export class PackageInstallerTabsComponent {
+	public readonly value = signal<PackageKey>('npm');
+	public readonly installCommand = computed(() => {
+		const activeTab = this.value();
+		return this.cliInstallationCommands[activeTab] ?? '';
+	});
+	public language = input<'ts' | 'sh' | 'js'>('sh');
+	public cliInstallationCommands = packageInstallationCommands;
+
+	public collationComparator = () => 0;
+
+	protected onTabActivated(value: string) {
+		this.value.set(value as PackageKey);
+	}
+}