reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rome -> eslint + prettier

Browse Source
This commit is contained in:
Ren Amamiya
2023-07-04 13:24:42 +07:00
parent 744fbd5683
commit a30cf66c2e
187 changed files with 10179 additions and 10066 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/shared/notes/preview/image.tsx
View File

@@ -1,25 +1,22 @@
import { Image } from "@shared/image";
import { Image } from '@shared/image';
export function ImagePreview({
urls,
truncate,
}: { urls: string[]; truncate?: boolean }) {
return (
<div className="mt-3 max-w-[420px] overflow-hidden">
<div className="flex flex-col gap-2">
{urls.map((url) => (
<div key={url} className="min-w-0 grow-0 shrink-0 basis-full">
<Image
src={url}
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
alt="image"
className={`${
truncate ? "h-auto max-h-[300px]" : "h-auto"
} w-full border border-zinc-800/50 rounded-lg object-cover`}
/>
</div>
))}
</div>
</div>
);
export function ImagePreview({ urls, truncate }: { urls: string[]; truncate?: boolean }) {
return (
<div className="mt-3 max-w-[420px] overflow-hidden">
<div className="flex flex-col gap-2">
{urls.map((url) => (
<div key={url} className="min-w-0 shrink-0 grow-0 basis-full">
<Image
src={url}
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
alt="image"
className={`${
truncate ? 'h-auto max-h-[300px]' : 'h-auto'
} w-full rounded-lg border border-zinc-800/50 object-cover`}
/>
</div>
))}
</div>
</div>
);
}

118
src/shared/notes/preview/link.tsx
View File

@@ -1,64 +1,62 @@
import { Image } from "@shared/image";
import { useOpenGraph } from "@utils/hooks/useOpenGraph";
import { Image } from '@shared/image';
import { useOpenGraph } from '@utils/hooks/useOpenGraph';
export function LinkPreview({ urls }: { urls: string[] }) {
const domain = new URL(urls[0]);
const { status, data, error } = useOpenGraph(urls[0]);
const domain = new URL(urls[0]);
const { status, data, error } = useOpenGraph(urls[0]);
return (
<div className="mt-3 max-w-[420px] overflow-hidden rounded-lg bg-zinc-800">
{status === "loading" ? (
<div className="flex flex-col">
<div className="w-full h-44 bg-zinc-700 animate-pulse" />
<div className="flex flex-col gap-2 px-3 py-3">
<div className="w-2/3 h-3 rounded bg-zinc-700 animate-pulse" />
<div className="w-3/4 h-3 rounded bg-zinc-700 animate-pulse" />
<span className="mt-2.5 leading-none text-sm text-zinc-500">
{domain.hostname}
</span>
</div>
</div>
) : (
<a
className="flex flex-col rounded-lg border border-zinc-800/50"
href={urls[0]}
target="_blank"
rel="noreferrer"
>
{error ? (
<div className="px-3 py-3">
<p className="text-sm text-zinc-400 break-all line-clamp-3">
Can't fetch open graph, click to open webpage
</p>
</div>
) : (
<>
<Image
src={
data.images?.[0] ||
"https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
}
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
alt={urls[0]}
className="w-full h-44 object-cover rounded-t-lg"
/>
<div className="flex flex-col gap-2 px-3 py-3">
<h5 className="leading-none font-medium text-zinc-200 line-clamp-1">
{data.title}
</h5>
{data.description && (
<p className="text-sm text-zinc-400 break-all line-clamp-3">
{data.description}
</p>
)}
<span className="mt-2.5 leading-none text-sm text-zinc-500">
{domain.hostname}
</span>
</div>
</>
)}
</a>
)}
</div>
);
return (
<div className="mt-3 max-w-[420px] overflow-hidden rounded-lg bg-zinc-800">
{status === 'loading' ? (
<div className="flex flex-col">
<div className="h-44 w-full animate-pulse bg-zinc-700" />
<div className="flex flex-col gap-2 px-3 py-3">
<div className="h-3 w-2/3 animate-pulse rounded bg-zinc-700" />
<div className="h-3 w-3/4 animate-pulse rounded bg-zinc-700" />
<span className="mt-2.5 text-sm leading-none text-zinc-500">
{domain.hostname}
</span>
</div>
</div>
) : (
<a
className="flex flex-col rounded-lg border border-zinc-800/50"
href={urls[0]}
target="_blank"
rel="noreferrer"
>
{error ? (
<div className="px-3 py-3">
<p className="line-clamp-3 break-all text-sm text-zinc-400">
Can&apos;t fetch open graph, click to open webpage
</p>
</div>
) : (
<>
<Image
src={data.images?.[0] || 'https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW'}
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
alt={urls[0]}
className="h-44 w-full rounded-t-lg object-cover"
/>
<div className="flex flex-col gap-2 px-3 py-3">
<h5 className="line-clamp-1 font-medium leading-none text-zinc-200">
{data.title}
</h5>
{data.description && (
<p className="line-clamp-3 break-all text-sm text-zinc-400">
{data.description}
</p>
)}
<span className="mt-2.5 text-sm leading-none text-zinc-500">
{domain.hostname}
</span>
</div>
</>
)}
</a>
)}
</div>
);
}

32
src/shared/notes/preview/video.tsx
View File

@@ -1,19 +1,19 @@
import ReactPlayer from "react-player/es6";
import ReactPlayer from 'react-player/es6';
export function VideoPreview({ urls }: { urls: string[] }) {
return (
<div className="relative mt-3 max-w-[420px] flex w-full flex-col gap-2">
{urls.map((url) => (
<ReactPlayer
key={url}
url={url}
width="100%"
height="auto"
className="!h-auto object-fill rounded-lg overflow-hidden"
controls={true}
pip={true}
/>
))}
</div>
);
return (
<div className="relative mt-3 flex w-full max-w-[420px] flex-col gap-2">
{urls.map((url) => (
<ReactPlayer
key={url}
url={url}
width="100%"
height="auto"
className="!h-auto overflow-hidden rounded-lg object-fill"
controls={true}
pip={true}
/>
))}
</div>
);
}