51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T927,import { cva, type VariantProps } from 'class-variance-authority' import * as React from 'react' import { cn } from '@/lib/utils' import { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/components/ui/avatar' import { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/components/ui/tooltip' const avatarStackVariants = cva('flex -space-x-4 -space-y-4', { variants: { orientation: { vertical: 'flex-row', horizontal: 'flex-col', }, }, defaultVariants: { orientation: 'vertical', }, }) export interface AvatarStackProps extends React.HTMLAttributes, VariantProps { avatars: { name: string; image: string }[] maxAvatarsAmount?: number } const AvatarStack = ({ className, orientation, avatars, maxAvatarsAmount = 3, ...props }: AvatarStackProps) => { const shownAvatars = avatars.slice(0, maxAvatarsAmount) const hiddenAvatars = avatars.slice(maxAvatarsAmount) return (

{shownAvatars.map(({ name, image }, index) => ( {name ?.split(' ') ?.map((word) => word[0]) ?.join('') ?.toUpperCase()}

{name}

))} {hiddenAvatars.length ? ( +{avatars.length - shownAvatars.length} {hiddenAvatars.map(({ name }, index) => (

{name}

))} ) : null}

) } export { AvatarStack, avatarStackVariants } 55:T676,'use client' import { REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js' import { useEffect, useState } from 'react' import { useCurrentUserImage } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-image' import { useCurrentUserName } from '@/registry/default/blocks/current-user-avatar/hooks/use-current-user-name' import { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client' const supabase = createClient() export type RealtimeUser = { id: string name: string image: string } export const useRealtimePresenceRoom = (roomName: string) => { const currentUserImage = useCurrentUserImage() const currentUserName = useCurrentUserName() const [users, setUsers] = useState>({}) useEffect(() => { const room = supabase.channel(roomName) room .on('presence', { event: 'sync' }, () => { const newState = room.presenceState<{ image: string; name: string }>() const newUsers = Object.fromEntries( Object.entries(newState).map(([key, values]) => [ key, { name: values[0].name, image: values[0].image }, ]) ) as Record setUsers(newUsers) }) .subscribe(async (status) => { if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED) { await room.track({ name: currentUserName, image: currentUserImage, }) } else { setUsers({}) } }) return () => { room.unsubscribe() } }, [roomName, currentUserName, currentUserImage]) return { users } } 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","@supabase/ssr@latest",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40supabase%2Fssr","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@supabase/ssr@latest"}]]}]}],["$","li","@supabase/supabase-js@latest",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40supabase%2Fsupabase-js","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@supabase/supabase-js@latest"}]]}]}]]}],["$","$L51",null,{"registryDependencies":["avatar","tooltip"]}]]}],["$","$L52",null,{"sourceUrl":"https://supabase.com/ui/r/realtime-avatar-stack-tanstack.json","proxyUrl":"https://shadcnregistry.com/r/supabase/realtime-avatar-stack-tanstack","itemId":"@supabase/realtime-avatar-stack-tanstack"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"registry/default/blocks/realtime-avatar-stack/components/avatar-stack.tsx","content":"$54","type":"registry:component"},{"path":"registry/default/blocks/realtime-avatar-stack/components/realtime-avatar-stack.tsx","content":"'use client'\n\nimport { useMemo } from 'react'\n\nimport { AvatarStack } from '@/registry/default/blocks/realtime-avatar-stack/components/avatar-stack'\nimport { useRealtimePresenceRoom } from '@/registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room'\n\nexport const RealtimeAvatarStack = ({ roomName }: { roomName: string }) => {\n const { users: usersMap } = useRealtimePresenceRoom(roomName)\n const avatars = useMemo(() => {\n return Object.values(usersMap).map((user) => ({\n name: user.name,\n image: user.image,\n }))\n }, [usersMap])\n\n return \n}\n","type":"registry:component"},{"path":"registry/default/blocks/realtime-avatar-stack/hooks/use-realtime-presence-room.ts","content":"$55","type":"registry:hook"},{"path":"registry/default/blocks/current-user-avatar/hooks/use-current-user-name.ts","content":"import { useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'\n\nexport const useCurrentUserName = () => {\n const [name, setName] = useState(null)\n\n useEffect(() => {\n const fetchProfileName = async () => {\n const { data, error } = await createClient().auth.getSession()\n if (error) {\n console.error(error)\n }\n\n setName(data.session?.user.user_metadata.full_name ?? '?')\n }\n\n fetchProfileName()\n }, [])\n\n return name || '?'\n}\n","type":"registry:hook"},{"path":"registry/default/blocks/current-user-avatar/hooks/use-current-user-image.ts","content":"import { useEffect, useState } from 'react'\n\nimport { createClient } from '@/registry/default/clients/tanstack/lib/supabase/client'\n\nexport const useCurrentUserImage = () => {\n const [image, setImage] = useState(null)\n\n useEffect(() => {\n const fetchUserImage = async () => {\n const { data, error } = await createClient().auth.getSession()\n if (error) {\n console.error(error)\n }\n\n setImage(data.session?.user.user_metadata.avatar_url ?? null)\n }\n fetchUserImage()\n }, [])\n\n return image\n}\n","type":"registry:hook"},{"path":"registry/default/clients/tanstack/lib/supabase/client.ts","content":"/// \nimport { createBrowserClient } from '@supabase/ssr'\n\nexport function createClient() {\n return createBrowserClient(\n import.meta.env.VITE_SUPABASE_URL!,\n import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY!\n )\n}\n","type":"registry:lib"},{"path":"registry/default/clients/tanstack/lib/supabase/server.ts","content":"import { createServerClient } from '@supabase/ssr'\nimport { getCookies, setCookie } from '@tanstack/react-start/server'\n\nexport function createClient() {\n return createServerClient(\n process.env.VITE_SUPABASE_URL!,\n process.env.VITE_SUPABASE_PUBLISHABLE_KEY!,\n {\n cookies: {\n getAll() {\n return Object.entries(getCookies()).map(\n ([name, value]) =>\n ({\n name,\n value,\n }) as { name: string; value: string }\n )\n },\n setAll(cookies) {\n cookies.forEach((cookie) => {\n setCookie(cookie.name, cookie.value)\n })\n },\n },\n }\n )\n}\n","type":"registry:lib"}]}]]}],"$L56"]}]

Avatar Stack With Realtime Presence

Installation

Files

components

hooks

lib

Styles