From 2b5612e8f842e2bac53b663a901052770e569b0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A1n=20UB?=
 <22903142+adrian-ub@users.noreply.github.com>
Date: Tue, 27 Aug 2024 21:36:23 -0500
Subject: [PATCH] feat: add avatar

---
 .../content/docs/docs/components/avatar.mdx   | 48 +++++++++++++++++
 .../registry/default/example/avatar-demo.ts   | 18 +++++++
 .../registry/default/ui/avatar.directive.ts   | 52 +++++++++++++++++++
 .../registry/new-york/example/avatar-demo.ts  | 18 +++++++
 .../registry/new-york/ui/avatar.directive.ts  | 52 +++++++++++++++++++
 apps/www/src/registry/ui.ts                   |  6 +++
 6 files changed, 194 insertions(+)
 create mode 100644 apps/www/src/content/docs/docs/components/avatar.mdx
 create mode 100644 apps/www/src/registry/default/example/avatar-demo.ts
 create mode 100644 apps/www/src/registry/default/ui/avatar.directive.ts
 create mode 100644 apps/www/src/registry/new-york/example/avatar-demo.ts
 create mode 100644 apps/www/src/registry/new-york/ui/avatar.directive.ts

diff --git a/apps/www/src/content/docs/docs/components/avatar.mdx b/apps/www/src/content/docs/docs/components/avatar.mdx
new file mode 100644
index 0000000..6989ea1
--- /dev/null
+++ b/apps/www/src/content/docs/docs/components/avatar.mdx
@@ -0,0 +1,48 @@
+---
+title: Avatar
+description: An image element with a fallback for representing the user.
+links:
+  doc: https://www.radix-ng.com/?path=/docs/primitives-avatar--docs
+---
+
+import { Tabs, TabItem } from "@astrojs/starlight/components";
+import { Steps } from "@astrojs/starlight/components";
+
+<ComponentPreview name="avatar-demo" />
+
+## Installation
+
+<Tabs>
+  <TabItem label="CLI">
+    ```bash frame="code"
+    npx shadcn-ng@latest add avatar
+    ```
+  </TabItem>
+
+  <TabItem label="Manual">
+    <Steps>
+        1. Copy and paste the following code into your project.
+            <ComponentSource name="avatar" />
+
+        2. Update the import paths to match your project setup.
+    </Steps>
+
+  </TabItem>
+</Tabs>
+
+## Usage
+
+```ts
+import {
+    UbAvatarDirective,
+    UbAvatarImageDirective,
+    UbAvatarFallbackDirective
+} from '@/components/ui/avatar.directive'
+```
+
+```angular-html
+<span ubAvatar>
+    <img src="https://github.com/adrian-ub.png" alt="@adrianub" ubAvatarImage />
+    <span ubAvatarFallback>UB</span>
+</span>
+```
diff --git a/apps/www/src/registry/default/example/avatar-demo.ts b/apps/www/src/registry/default/example/avatar-demo.ts
new file mode 100644
index 0000000..e623ed7
--- /dev/null
+++ b/apps/www/src/registry/default/example/avatar-demo.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+import { UbAvatarDirective, UbAvatarImageDirective, UbAvatarFallbackDirective } from '@/registry/default/ui/avatar.directive'
+
+@Component({
+    standalone: true,
+    selector: 'avatar-demo-default',
+    imports: [UbAvatarDirective, UbAvatarImageDirective, UbAvatarFallbackDirective],
+    template: `
+    <span ubAvatar>
+        <img src="https://github.com/adrian-ub.png" alt="@adrianub" ubAvatarImage />
+        <span ubAvatarFallback>UB</span>
+    </span>
+    `
+})
+export class AvatarDemoDefault { }
+
+export default AvatarDemoDefault;
diff --git a/apps/www/src/registry/default/ui/avatar.directive.ts b/apps/www/src/registry/default/ui/avatar.directive.ts
new file mode 100644
index 0000000..0595427
--- /dev/null
+++ b/apps/www/src/registry/default/ui/avatar.directive.ts
@@ -0,0 +1,52 @@
+import { cn } from '@/lib/utils';
+import { computed, Directive, input } from '@angular/core';
+
+import { RdxAvatarRootDirective, RdxAvatarImageDirective, RdxAvatarFallbackDirective } from '@radix-ng/primitives/avatar'
+
+@Directive({
+    standalone: true,
+    selector: 'span[ubAvatar]',
+    hostDirectives: [RdxAvatarRootDirective],
+    host: {
+        '[class]': 'computedClass()'
+    }
+})
+export class UbAvatarDirective {
+    readonly class = input<string>();
+
+    readonly computedClass = computed(() => {
+        return cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', this.class());
+    })
+}
+
+@Directive({
+    standalone: true,
+    selector: 'img[ubAvatarImage]',
+    hostDirectives: [RdxAvatarImageDirective],
+    host: {
+        '[class]': 'computedClass()'
+    }
+})
+export class UbAvatarImageDirective {
+    readonly class = input<string>();
+
+    readonly computedClass = computed(() => {
+        return cn('aspect-square h-full w-full', this.class());
+    })
+}
+
+@Directive({
+    standalone: true,
+    selector: 'span[ubAvatarFallback]',
+    hostDirectives: [RdxAvatarFallbackDirective],
+    host: {
+        '[class]': 'computedClass()'
+    }
+})
+export class UbAvatarFallbackDirective {
+    readonly class = input<string>();
+
+    readonly computedClass = computed(() => {
+        return cn('flex h-full w-full items-center justify-center rounded-full bg-muted', this.class());
+    })
+}
diff --git a/apps/www/src/registry/new-york/example/avatar-demo.ts b/apps/www/src/registry/new-york/example/avatar-demo.ts
new file mode 100644
index 0000000..44d1288
--- /dev/null
+++ b/apps/www/src/registry/new-york/example/avatar-demo.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+import { UbAvatarDirective, UbAvatarImageDirective, UbAvatarFallbackDirective } from '@/registry/new-york/ui/avatar.directive'
+
+@Component({
+    standalone: true,
+    selector: 'avatar-demo-new-york',
+    imports: [UbAvatarDirective, UbAvatarImageDirective, UbAvatarFallbackDirective],
+    template: `
+    <span ubAvatar>
+        <img src="https://github.com/adrian-ub.png" alt="@adrianub" ubAvatarImage />
+        <span ubAvatarFallback>UB</span>
+    </span>
+    `
+})
+export class AvatarDemoNewYork { }
+
+export default AvatarDemoNewYork;
diff --git a/apps/www/src/registry/new-york/ui/avatar.directive.ts b/apps/www/src/registry/new-york/ui/avatar.directive.ts
new file mode 100644
index 0000000..0595427
--- /dev/null
+++ b/apps/www/src/registry/new-york/ui/avatar.directive.ts
@@ -0,0 +1,52 @@
+import { cn } from '@/lib/utils';
+import { computed, Directive, input } from '@angular/core';
+
+import { RdxAvatarRootDirective, RdxAvatarImageDirective, RdxAvatarFallbackDirective } from '@radix-ng/primitives/avatar'
+
+@Directive({
+    standalone: true,
+    selector: 'span[ubAvatar]',
+    hostDirectives: [RdxAvatarRootDirective],
+    host: {
+        '[class]': 'computedClass()'
+    }
+})
+export class UbAvatarDirective {
+    readonly class = input<string>();
+
+    readonly computedClass = computed(() => {
+        return cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', this.class());
+    })
+}
+
+@Directive({
+    standalone: true,
+    selector: 'img[ubAvatarImage]',
+    hostDirectives: [RdxAvatarImageDirective],
+    host: {
+        '[class]': 'computedClass()'
+    }
+})
+export class UbAvatarImageDirective {
+    readonly class = input<string>();
+
+    readonly computedClass = computed(() => {
+        return cn('aspect-square h-full w-full', this.class());
+    })
+}
+
+@Directive({
+    standalone: true,
+    selector: 'span[ubAvatarFallback]',
+    hostDirectives: [RdxAvatarFallbackDirective],
+    host: {
+        '[class]': 'computedClass()'
+    }
+})
+export class UbAvatarFallbackDirective {
+    readonly class = input<string>();
+
+    readonly computedClass = computed(() => {
+        return cn('flex h-full w-full items-center justify-center rounded-full bg-muted', this.class());
+    })
+}
diff --git a/apps/www/src/registry/ui.ts b/apps/www/src/registry/ui.ts
index 52f42c1..37563f5 100644
--- a/apps/www/src/registry/ui.ts
+++ b/apps/www/src/registry/ui.ts
@@ -12,6 +12,12 @@ export const ui: Registry = [
         type: "components:ui",
         files: ["ui/alert.directive.ts"],
     },
+    {
+        name: "avatar",
+        type: "components:ui",
+        dependencies: ["@radix-ng/primitives"],
+        files: ["ui/avatar.directive.ts"],
+    },
     {
         name: "badge",
         type: "components:ui",