enhance(ui): add shui avatar component

deps/shui/src/logseq/shui/demo.cljs

@@ -310,19 +310,28 @@
          :size     :md}
         "Custom icon")])
 
-   ;; Tips
-   (section-item "Tips"
-     [:div.flex.flex-row.flex-wrap.gap-2
-      (ui/tooltip-provider
-        (ui/tooltip
-          (ui/tooltip-trigger
-            (ui/button
-              {:variant  :outline
-               :on-click #(dialog-core/open! [:h1.text-9xl.text-center.scale-110 "🍄"])}
-              "Tip for hint?"))
-          (ui/tooltip-content
-            {:class "w-42 px-8 py-4 text-xl border-green-rx-08 bg-green-rx-07-alpha"}
-            "🍄")))])
+   [:div.flex.flex-row.space-x-16.items-center
+    ;; Tips
+    (section-item "Tips"
+      [:div.flex.flex-row.flex-wrap.gap-2
+       (ui/tooltip-provider
+         (ui/tooltip
+           (ui/tooltip-trigger
+             (ui/button
+               {:variant :outline
+                :on-click #(dialog-core/open! [:h1.text-9xl.text-center.scale-110 "🍄"])}
+               "Tip for hint?"))
+           (ui/tooltip-content
+             {:class "w-42 px-8 py-4 text-xl border-green-rx-08 bg-green-rx-07-alpha"}
+             "🍄")))])
+    ;; Avatar
+    (section-item "Avatar"
+      [:div.flex.flex-row.space-x-6.items-center
+       (ui/avatar
+         (ui/avatar-image {:src "https://avatars.githubusercontent.com/u/63385289?s=200&v=4"})
+         (ui/avatar-fallback "L"))
+       (ui/avatar
+         (ui/avatar-fallback "CH"))])]
 
    ;; Badge
    (section-item "Badge"

deps/shui/src/logseq/shui/ui.cljs

@@ -21,6 +21,9 @@
 (def badge (util/lsui-wrap "Badge"))
 (def skeleton (util/lsui-wrap "Skeleton"))
 (def calendar (util/lsui-wrap "Calendar"))
+(def avatar (util/lsui-wrap "Avatar"))
+(def avatar-image (util/lsui-wrap "AvatarImage"))
+(def avatar-fallback (util/lsui-wrap "AvatarFallback"))
 (def input form-core/input)
 (def textarea form-core/textarea)
 (def switch form-core/switch)

packages/ui/@/components/ui/avatar.tsx

@@ -0,0 +1,49 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+// @ts-ignore
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "ui__avatar relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

packages/ui/package.json

@@ -14,6 +14,7 @@
     "@hookform/resolvers": "^3.3.2",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dialog": "^1.0.5",

packages/ui/src/ui.ts

@@ -89,6 +89,7 @@ import { Link } from '@/components/ui/link'
 import { Separator } from '@/components/ui/separator'
 import { Toggle } from '@/components/ui/toggle'
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 
 declare global {
   var LSUI: any
@@ -181,7 +182,8 @@ const shadui = {
   AlertDialogCancel,
   Tooltip, TooltipTrigger, TooltipArrow,
   TooltipContent, TooltipProvider,
-  Toggle, ToggleGroup, ToggleGroupItem
+  Toggle, ToggleGroup, ToggleGroupItem,
+  Avatar, AvatarImage, AvatarFallback
 }
 
 function setupGlobals() {

packages/ui/yarn.lock

@@ -2218,6 +2218,17 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-avatar@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-avatar/-/react-avatar-1.0.4.tgz#de9a5349d9e3de7bbe990334c4d2011acbbb9623"
+  integrity sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
 "@radix-ui/react-checkbox@^1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz#98f22c38d5010dd6df4c5744cac74087e3275f4b"