nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-18 11:13:30 +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 */ /* eslint-disable @typescript-eslint/no-explicit-any */
import ImageCard from '@components/note/content/preview/imageCard'; import { ImageCard } from '@components/note/content/preview/imageCard';
import Video from '@components/note/content/preview/video'; import { Video } from '@components/note/content/preview/video';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; 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 Image from 'next/image';
import { memo } from 'react';
// eslint-disable-next-line @typescript-eslint/no-explicit-any // 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 ( return (
<div className={`relative mt-2 flex flex-col overflow-hidden`}> <div className={`relative mt-2 flex flex-col overflow-hidden`}>
<div className="relative h-full w-full rounded-lg border border-zinc-800"> <div className="relative h-full w-full rounded-lg border border-zinc-800">
<Image <Image
placeholder="blur"
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
src={data['image']} src={data['image']}
alt={data['image']} alt={data['image']}
width="0" width="0"
@ -16,4 +19,4 @@ export default function ImageCard({ data }: { data: object }) {
</div> </div>
</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'; import ReactPlayer from 'react-player/lazy';
// eslint-disable-next-line @typescript-eslint/no-explicit-any // 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 ( return (
<div className="relative mt-2 flex flex-col overflow-hidden rounded-xl border border-zinc-800"> <div className="relative mt-2 flex flex-col overflow-hidden rounded-xl border border-zinc-800">
<ReactPlayer <ReactPlayer
@ -14,4 +15,4 @@ export default function Video({ data }: { data: object }) {
/> />
</div> </div>
); );
} });