improvement(docs): added images and videos to quick references #3004
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| 'use client' | ||
|
|
||
| import { getAssetUrl } from '@/lib/utils' | ||
|
|
||
| interface ActionImageProps { | ||
| src: string | ||
| alt: string | ||
| } | ||
|
|
||
| interface ActionVideoProps { | ||
| src: string | ||
| alt: string | ||
| } | ||
|
|
||
| export function ActionImage({ src, alt }: ActionImageProps) { | ||
| const resolvedSrc = getAssetUrl(src.startsWith('/') ? src.slice(1) : src) | ||
|
|
||
| return ( | ||
| <img | ||
| src={resolvedSrc} | ||
| alt={alt} | ||
| className='inline-block w-full max-w-[200px] rounded border border-neutral-200 dark:border-neutral-700' | ||
| /> | ||
| ) | ||
|
Comment on lines
+19
to
+24
Contributor
There was a problem hiding this comment. Missing Prompt To Fix With AIThis is a comment left during a code review.
Path: apps/docs/components/ui/action-media.tsx
Line: 19:24
Comment:
Missing `width` and `height` attributes which are important for layout stability and avoiding CLS (Cumulative Layout Shift). The existing `Image` component (apps/docs/components/ui/image.tsx:13-53) uses Next.js Image component which handles dimensions properly.
How can I resolve this? If you propose a fix, please make it concise. |
||
| } | ||
|
Comment on lines
+15
to
+25
Contributor
There was a problem hiding this comment. Consider reusing the existing Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time! Prompt To Fix With AIThis is a comment left during a code review.
Path: apps/docs/components/ui/action-media.tsx
Line: 15:25
Comment:
Consider reusing the existing `Image` component (apps/docs/components/ui/image.tsx:13-53) instead of creating a separate implementation. The existing component uses Next.js Image for better performance and includes lightbox functionality.
<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>
How can I resolve this? If you propose a fix, please make it concise. |
||
|
|
||
| export function ActionVideo({ src, alt }: ActionVideoProps) { | ||
| const resolvedSrc = getAssetUrl(src.startsWith('/') ? src.slice(1) : src) | ||
|
|
||
| return ( | ||
| <video | ||
| src={resolvedSrc} | ||
| autoPlay | ||
| loop | ||
| muted | ||
| playsInline | ||
| className='inline-block w-full max-w-[200px] rounded border border-neutral-200 dark:border-neutral-700' | ||
| /> | ||
|
Comment on lines
+31
to
+38
Contributor
There was a problem hiding this comment. Missing Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time! Prompt To Fix With AIThis is a comment left during a code review.
Path: apps/docs/components/ui/action-media.tsx
Line: 31:38
Comment:
Missing `aria-label` attribute for accessibility. The existing `Video` component pattern (apps/docs/components/ui/video.tsx:36-44) doesn't include this either, but it's a best practice for videos to have descriptive ARIA labels.
<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>
How can I resolve this? If you propose a fix, please make it concise. |
||
| ) | ||
|
There was a problem hiding this comment. Unused
|
||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The
getAssetUrlfunction already handles paths without leading slashes (apps/docs/lib/utils.ts:16-22), so thesrc.startsWith('/')check andslice(1)logic may be unnecessary duplication.Prompt To Fix With AI