mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
added memo to image and video card
This commit is contained in:
parent
fd66fde0e0
commit
ca5e299791
@ -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';
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user