mirror of
https://github.com/CompassConnections/Compass.git
synced 2026-07-30 17:59:13 -04:00
a5c4969d48
- Added `ProfileAvatar` for consistent avatar rendering across profiles, with fallback initials and gradient backgrounds. - Created `ShareCTAButton` for sharing links with native sharing support and clipboard fallback. - Integrated custom `tiptap` video extension (`tiptap-video`) for video support in rich text editing. - Introduced `useColumnCount` for responsive column count management in dynamic masonry layouts. - Enhanced onboarding flow with refined "Share My Profile" feature using the new share button. - Updated styles and layout in filtered profiles and onboarding screens for better consistency and responsiveness.
39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import {Image} from '@tiptap/extension-image'
|
|
import clsx from 'clsx'
|
|
import {useState} from 'react'
|
|
import {MediaModal} from 'web/components/media-modal'
|
|
|
|
export const BasicImage = Image.extend({
|
|
renderReact: (attrs: any) => <img loading="lazy" {...attrs} alt={attrs.alt ?? ''} />,
|
|
})
|
|
|
|
export const DisplayImage = Image.extend({
|
|
renderReact: (attrs: any) => <ExpandingImage {...attrs} />,
|
|
})
|
|
|
|
export const MediumDisplayImage = Image.extend({
|
|
renderReact: (attrs: any) => <ExpandingImage size={'md'} {...attrs} />,
|
|
})
|
|
|
|
function ExpandingImage(props: {src: string; alt?: string; title?: string; size?: 'md'}) {
|
|
const [expanded, setExpanded] = useState(false)
|
|
const {size, alt, ...rest} = props
|
|
|
|
return (
|
|
<>
|
|
<img
|
|
loading="lazy"
|
|
alt={alt ?? ''}
|
|
{...rest}
|
|
onClick={() => setExpanded(true)}
|
|
className={clsx(
|
|
'cursor-pointer object-contain',
|
|
size === 'md' ? 'max-h-[400px]' : 'h-[128px]',
|
|
)}
|
|
height={size === 'md' ? 400 : 128}
|
|
/>
|
|
<MediaModal url={rest.src} open={expanded} setOpen={setExpanded} />
|
|
</>
|
|
)
|
|
}
|