Skip to content

Commit

Permalink
fix: build errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@CaliCastle
CaliCastle committed May 20, 2023
1 parent 99b0ea0 commit 7d7558f
Show file tree
Hide file tree
Showing 3 changed files with 383 additions and 380 deletions.
3 changes: 3 additions & 0 deletions components/BleedThroughImage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export function BleedThroughImage({
dimensions,
lqip,
className,
alt,
...props
}: BleedThroughImageProps) {
return (
Expand All @@ -22,6 +23,7 @@ export function BleedThroughImage({
height={dimensions.height}
unoptimized
{...props}
alt=""
/>
</div>
<Image
Expand All @@ -32,6 +34,7 @@ export function BleedThroughImage({
blurDataURL={lqip}
className={clsxm('relative z-20', className)}
{...props}
alt={alt ?? ''}
/>
</div>
)
Expand Down
184 changes: 92 additions & 92 deletions components/LiveAvatars.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,92 +1,92 @@
import { AnimatePresence, motion } from 'framer-motion'
import Image from 'next/image'
import React from 'react'
import Balancer from 'react-wrap-balancer'

import { Tooltip } from '~/components/ui/Tooltip'
import { usePostStore } from '~/lib/store'

const MAX_OTHERS = 7
const MAX_AVATARS = 8

const animationProps = {
initial: { width: 0, transformOrigin: 'left', opacity: 0 },
animate: { width: 'auto', height: 'auto', opacity: 1 },
exit: { width: 0, opacity: 0 },
transition: {
type: 'spring',
damping: 18,
mass: 1,
stiffness: 200,
restSpeed: 0.01,
},
}
export function LiveAvatars() {
const others = usePostStore((state) => state.liveblocks.others)
const hasMore = others.length > MAX_OTHERS
const shownOthers = hasMore ? others.slice(0, MAX_OTHERS) : others

const [tooltipOpen, setTooltipOpen] = React.useState(false)

return (
<Tooltip.Provider disableHoverableContent>
<Tooltip.Root
open={tooltipOpen}
onOpenChange={setTooltipOpen}
delayDuration={0.1}
>
<Tooltip.Trigger asChild>
<div className="pointer-events-auto flex h-10 select-none place-content-center place-items-center -space-x-2">
<AnimatePresence>
{hasMore && (
<motion.div key="more" className="" {...animationProps}>
<span className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-100 text-xs font-bold ring-2 ring-zinc-100 dark:bg-zinc-700 dark:text-zinc-200 dark:ring-zinc-900">
<span className="-translate-x-px">
+{others.length - MAX_OTHERS}
</span>
</span>
</motion.div>
)}
{shownOthers.map((other) => (
<motion.div
key={other.connectionId}
className="flex items-center justify-center"
{...animationProps}
>
<Image
src={`/avatars/avatar_${
(other.connectionId % MAX_AVATARS) + 1
}.png`}
alt=""
width={32}
height={32}
className="block h-8 w-8 rounded-full ring-2 ring-zinc-100 dark:ring-zinc-900"
priority
unoptimized
/>
</motion.div>
))}
</AnimatePresence>
</div>
</Tooltip.Trigger>
<AnimatePresence>
{tooltipOpen && (
<Tooltip.Portal forceMount>
<Tooltip.Content asChild>
<motion.div
initial={{ opacity: 0, scale: 0.96 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
>
<Balancer>
其他 <b>{others.length}</b> 个小伙伴也在阅读
</Balancer>
</motion.div>
</Tooltip.Content>
</Tooltip.Portal>
)}
</AnimatePresence>
</Tooltip.Root>
</Tooltip.Provider>
)
}
// import { AnimatePresence, motion } from 'framer-motion'
// import Image from 'next/image'
// import React from 'react'
// import Balancer from 'react-wrap-balancer'
//
// import { Tooltip } from '~/components/ui/Tooltip'
// import { usePostStore } from '~/lib/store'
//
// const MAX_OTHERS = 7
// const MAX_AVATARS = 8
//
// const animationProps = {
// initial: { width: 0, transformOrigin: 'left', opacity: 0 },
// animate: { width: 'auto', height: 'auto', opacity: 1 },
// exit: { width: 0, opacity: 0 },
// transition: {
// type: 'spring',
// damping: 18,
// mass: 1,
// stiffness: 200,
// restSpeed: 0.01,
// },
// }
// export function LiveAvatars() {
// const others = usePostStore((state) => state.liveblocks.others)
// const hasMore = others.length > MAX_OTHERS
// const shownOthers = hasMore ? others.slice(0, MAX_OTHERS) : others
//
// const [tooltipOpen, setTooltipOpen] = React.useState(false)
//
// return (
// <Tooltip.Provider disableHoverableContent>
// <Tooltip.Root
// open={tooltipOpen}
// onOpenChange={setTooltipOpen}
// delayDuration={0.1}
// >
// <Tooltip.Trigger asChild>
// <div className="pointer-events-auto flex h-10 select-none place-content-center place-items-center -space-x-2">
// <AnimatePresence>
// {hasMore && (
// <motion.div key="more" className="" {...animationProps}>
// <span className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-100 text-xs font-bold ring-2 ring-zinc-100 dark:bg-zinc-700 dark:text-zinc-200 dark:ring-zinc-900">
// <span className="-translate-x-px">
// +{others.length - MAX_OTHERS}
// </span>
// </span>
// </motion.div>
// )}
// {shownOthers.map((other) => (
// <motion.div
// key={other.connectionId}
// className="flex items-center justify-center"
// {...animationProps}
// >
// <Image
// src={`/avatars/avatar_${
// (other.connectionId % MAX_AVATARS) + 1
// }.png`}
// alt=""
// width={32}
// height={32}
// className="block h-8 w-8 rounded-full ring-2 ring-zinc-100 dark:ring-zinc-900"
// priority
// unoptimized
// />
// </motion.div>
// ))}
// </AnimatePresence>
// </div>
// </Tooltip.Trigger>
// <AnimatePresence>
// {tooltipOpen && (
// <Tooltip.Portal forceMount>
// <Tooltip.Content asChild>
// <motion.div
// initial={{ opacity: 0, scale: 0.96 }}
// animate={{ opacity: 1, scale: 1 }}
// exit={{ opacity: 0, scale: 0.95 }}
// >
// <Balancer>
// 其他 <b>{others.length}</b> 个小伙伴也在阅读
// </Balancer>
// </motion.div>
// </Tooltip.Content>
// </Tooltip.Portal>
// )}
// </AnimatePresence>
// </Tooltip.Root>
// </Tooltip.Provider>
// )
// }
Loading

0 comments on commit 7d7558f

Please sign in to comment.