hq/Bpistle
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add hostname to website preview card

Browse source
This commit is contained in:
codytseng 2024-11-28 12:49:41 +08:00
parent 3f016c63c1
commit e42eb9f252
1 changed files with 5 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/renderer/src/components/WebPreview/index.tsx
View file

@ -1,9 +1,11 @@
import { Image } from '@nextui-org/image' import { Image } from '@nextui-org/image'
import { useFetchWebMetadata } from '@renderer/hooks/useFetchWebMetadata' import { useFetchWebMetadata } from '@renderer/hooks/useFetchWebMetadata'
import { cn } from '@renderer/lib/utils' import { cn } from '@renderer/lib/utils'
import { useMemo } from 'react'
export default function WebPreview({ url, className }: { url: string; className?: string }) { export default function WebPreview({ url, className }: { url: string; className?: string }) {
const { title, description, image } = useFetchWebMetadata(url) const { title, description, image } = useFetchWebMetadata(url)
const hostname = useMemo(() => new URL(url).hostname, [url])
if (!title && !description && !image) { if (!title && !description && !image) {
return null return null
@ -19,8 +21,9 @@ export default function WebPreview({ url, className }: { url: string; className?
> >
{image && <Image src={image} className="rounded-l-lg object-cover w-2/5" removeWrapper />} {image && <Image src={image} className="rounded-l-lg object-cover w-2/5" removeWrapper />}
<div className={`flex-1 w-0 p-2 border ${image ? 'rounded-r-lg' : 'rounded-lg'}`}> <div className={`flex-1 w-0 p-2 border ${image ? 'rounded-r-lg' : 'rounded-lg'}`}>
<div className="font-semibold truncate">{title}</div> <div className="text-xs text-muted-foreground">{hostname}</div>
<div className="text-sm text-muted-foreground line-clamp-2">{description}</div> <div className="font-semibold line-clamp-2">{title}</div>
<div className="text-xs text-muted-foreground line-clamp-5">{description}</div>
</div> </div>
</div> </div>
) )