feat(styled kit): add Avatar component

maiieul · maiieul · commit 31b166ceb87c · 2024-02-26T16:48:27.000+01:00
diff --git a/.changeset/smooth-crews-retire.md b/.changeset/smooth-crews-retire.md
@@ -0,0 +1,5 @@
+---
+'@qwik-ui/styled': patch
+---
+
+feat(styled kit): add Avatar component
diff --git a/apps/website/src/_state/component-statuses.ts b/apps/website/src/_state/component-statuses.ts
@@ -12,6 +12,7 @@ export type ComponentKitsStatuses = {
 export const statusByComponent: ComponentKitsStatuses = {
   styled: {
     Accordion: ComponentStatus.Beta,
+    Avatar: ComponentStatus.Draft,
     Alert: ComponentStatus.Beta,
     Badge: ComponentStatus.Beta,
     Button: ComponentStatus.Beta,
diff --git a/apps/website/src/routes/docs/styled/avatar/examples/hero.tsx b/apps/website/src/routes/docs/styled/avatar/examples/hero.tsx
@@ -0,0 +1,11 @@
+import { component$ } from '@builder.io/qwik';
+import { Avatar, AvatarFallback, AvatarImage } from '@qwik-ui/styled';
+
+export default component$(() => {
+  return (
+    <Avatar>
+      <AvatarImage src="https://github.com/mhevery.png" alt="@mhevery" />
+      <AvatarFallback>MA</AvatarFallback>
+    </Avatar>
+  );
+});
diff --git a/apps/website/src/routes/docs/styled/avatar/index.mdx b/apps/website/src/routes/docs/styled/avatar/index.mdx
@@ -0,0 +1,29 @@
+---
+title: Qwik UI | Styled Avatar Component
+---
+
+import { statusByComponent } from '~/_state/component-statuses';
+
+<StatusBanner status={statusByComponent.styled.Avatar} />
+
+# Avatar
+
+An image element with a fallback for representing the user.
+
+<Showcase name="hero" />
+
+## Installation
+
+```sh
+qwik-ui add avatar
+```
+
+## Usage
+
+```tsx
+import { Avatar } from '@qwik-ui/styled';
+```
+
+```tsx
+<Avatar />
+```
diff --git a/apps/website/src/routes/docs/styled/menu.md b/apps/website/src/routes/docs/styled/menu.md
@@ -9,6 +9,7 @@
 ## Components
 
 - [Accordion](/docs/styled/accordion)
+- [Avatar](/docs/styled/avatar)
 - [Alert](/docs/styled/alert)
 - [Badge](/docs/styled/badge)
 - [Button](/docs/styled/button)
diff --git a/apps/website/src/routes/docs/styled/modal/index.mdx b/apps/website/src/routes/docs/styled/modal/index.mdx
@@ -1,10 +1,10 @@
 ---
-title: Qwik UI | Styled Input Component
+title: Qwik UI | Styled Modal Component
 ---
 
 import { statusByComponent } from '~/_state/component-statuses';
 
-<StatusBanner status={statusByComponent.styled.Input} />
+<StatusBanner status={statusByComponent.styled.Modal} />
 
 # Modal
 
diff --git a/apps/website/src/routes/docs/styled/radio-group/index.mdx b/apps/website/src/routes/docs/styled/radio-group/index.mdx
@@ -6,7 +6,7 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 <StatusBanner status={statusByComponent.styled.RadioGroup} />
 
-# Popover
+# Radio Group
 
 Visually or semantically separates content.
 
diff --git a/apps/website/src/routes/docs/styled/separator/index.mdx b/apps/website/src/routes/docs/styled/separator/index.mdx
@@ -6,7 +6,7 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 <StatusBanner status={statusByComponent.styled.Separator} />
 
-# Popover
+# Separator
 
 Visually or semantically separates content.
 
diff --git a/apps/website/src/routes/docs/styled/skeleton/index.mdx b/apps/website/src/routes/docs/styled/skeleton/index.mdx
@@ -6,7 +6,7 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 <StatusBanner status={statusByComponent.styled.Skeleton} />
 
-# Popover
+# Skeleton
 
 Visually or semantically separates content.
 
diff --git a/packages/kit-styled/components-registry.json b/packages/kit-styled/components-registry.json
@@ -7,6 +7,12 @@
       "componentFolder": "accordion",
       "files": ["accordion.tsx"]
     },
+    {
+      "displayName": "Avatar",
+      "type": "avatar",
+      "componentFolder": "avatar",
+      "files": ["avatar.tsx"]
+    },
     {
       "displayName": "Alert",
       "type": "alert",
diff --git a/packages/kit-styled/src/components/avatar/avatar.tsx b/packages/kit-styled/src/components/avatar/avatar.tsx
@@ -0,0 +1,36 @@
+import { PropsOf, Slot, component$ } from '@builder.io/qwik';
+import { cn } from '@qwik-ui/utils';
+
+const Avatar = component$<PropsOf<'div'>>(({ ...props }) => {
+  return (
+    <div
+      {...props}
+      class={cn(
+        'relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full',
+        props.class,
+      )}
+    >
+      <Slot />
+    </div>
+  );
+});
+
+const AvatarImage = component$<PropsOf<'img'>>(({ ...props }) => (
+  <img {...props} class={cn('aspect-square h-full w-full', props.class)} />
+));
+
+const AvatarFallback = component$<PropsOf<'div'>>(({ ...props }) => {
+  return (
+    <div
+      {...props}
+      class={cn(
+        'bg-muted absolute -z-10 flex h-full w-full items-center justify-center rounded-full',
+        props.class,
+      )}
+    >
+      <Slot />
+    </div>
+  );
+});
+
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/packages/kit-styled/src/index.ts b/packages/kit-styled/src/index.ts
@@ -1,4 +1,5 @@
 export * from './components/accordion/accordion';
+export * from './components/avatar/avatar';
 export * from './components/alert/alert';
 export * from './components/badge/badge';
 export * from './components/button/button';

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@qwik-ui/styled': patch
 +---
++
 +feat(styled kit): add Avatar component