nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-14 09:13:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

added memo to image and video card

Browse Source
This commit is contained in:
Ren Amamiya 2023-02-23 12:57:52 +07:00
parent fd66fde0e0
commit ca5e299791
3 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/note/content/index.tsx
View File

@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import ImageCard from '@components/note/content/preview/imageCard';
import Video from '@components/note/content/preview/video';
import { ImageCard } from '@components/note/content/preview/imageCard';
import { Video } from '@components/note/content/preview/video';
import dynamic from 'next/dynamic';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

7
src/components/note/content/preview/imageCard.tsx
View File

@ -1,11 +1,14 @@
import Image from 'next/image';
import { memo } from 'react';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export default function ImageCard({ data }: { data: object }) {
export const ImageCard = memo(function ImageCard({ data }: { data: object }) {
return (
<div className={`relative mt-2 flex flex-col overflow-hidden`}>
<div className="relative h-full w-full rounded-lg border border-zinc-800">
<Image
placeholder="blur"
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
src={data['image']}
alt={data['image']}
width="0"
@ -16,4 +19,4 @@ export default function ImageCard({ data }: { data: object }) {
</div>
</div>
);
}
});

5
src/components/note/content/preview/video.tsx
View File

@ -1,7 +1,8 @@
import { memo } from 'react';
import ReactPlayer from 'react-player/lazy';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export default function Video({ data }: { data: object }) {
export const Video = memo(function Video({ data }: { data: object }) {
return (
<div className="relative mt-2 flex flex-col overflow-hidden rounded-xl border border-zinc-800">
<ReactPlayer
@ -14,4 +15,4 @@ export default function Video({ data }: { data: object }) {
/>
</div>
);
}
});