Notification component

[jeremy-js-devweb]

Which scope/s are relevant/related to the feature request?

Don't know / other

Information

I have created a component with tailwind to display notification number:

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

@Component({
  selector: 'code-up-notification',
  standalone: true,
  template: `
    <div
      class="absolute rounded-full -top-2 -end-2 inline-flex items-center justify-center w-6 h-6 text-[0.6rem] font-bold text-white bg-destructive">
      {{ _nbNotifications }}
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NotificationComponent {
  _nbNotifications = '';

  @Input({ required: true })
  set nbNotifications(nb: number) {
    this._nbNotifications = nb >= 99 ? '99+' : `${nb}`;
  }
}

Render:

It's just an idea for spartan.

and the parent:

<button
                hlmBtn
                class="relative"
                size="icon"
                variant="secondary">
                <hlm-icon size="sm" name="radixChatBubble" />
                <code-up-notification [nbNotifications]="98"/>
</button>

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• [ ] Yes
• [ ] No

[jeremy-js-devweb]

and in the parent component, you have just to add class='relative'

[benjaminforras]

It's awesome! However I think this component is out of scope for spartan-ui as it's main purpose is to provide components without styles and have the functionality ready. Maybe @goetzrobin can confirm.

[jeremy-js-devweb]

It's awesome! However I think this component is out of scope for spartan-ui as it's main purpose is to provide components without styles and have the functionality ready. Maybe @goetzrobin can confirm.

Yes, I think you have right.

[goetzrobin]

I agree. However, I do like the idea of having some "community-driven" components. Maybe we can include it in an example that we build similar to one of those here: https://ui.shadcn.com/examples/mail