stereo.cat/frontend
2
0
Fork 0
Code Issues 5 Pull requests Projects 1 Releases Packages Wiki Activity Actions

wrap file component in anchor tag for file serving

Browse source
This commit is contained in:
grngxd 2025-06-08 15:10:49 +01:00
parent 9fd4ab4e46
commit 7d98b15780
1 changed files with 21 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/components/File.tsx
View file

@ -19,26 +19,28 @@ const formatSize = (bytes: number) => {
export default component$(({ file }: FileProps) => { export default component$(({ file }: FileProps) => {
return ( return (
<div class="rounded-xl bg-neutral-900 flex flex-col overflow-hidden"> <a href={`/api/${file.ID}`} target="_blank">
{ file.Base64 && (file.ID.endsWith(".png") || file.ID.endsWith(".jpg") || file.ID.endsWith(".jpeg")) && ( <div class="rounded-xl bg-neutral-900 flex flex-col overflow-hidden">
<img { file.Base64 && (file.ID.endsWith(".png") || file.ID.endsWith(".jpg") || file.ID.endsWith(".jpeg")) && (
width={400} <img
height={300} width={400}
src={`data:image/png;base64,${file.Base64}`} height={300}
alt={file.ID} src={`data:image/png;base64,${file.Base64}`}
class="w-full h-80 object-cover bg-gray-800 flex-grow" alt={file.ID}
/> class="w-full h-80 object-cover bg-gray-800 flex-grow"
)} />
<div class="p-4 flex-grow-0 text-center"> )}
<p class="text-lg font-semibold text-white w-full truncate"> <div class="p-4 flex-grow-0 text-center">
{file.ID.split("_").slice(1).join("_") || "Untitled"} <p class="text-lg font-semibold text-white w-full truncate">
</p> {file.ID.split("_").slice(1).join("_") || "Untitled"}
<div class="flex gap-1 text-sm text-gray-400 items-center justify-center"> </p>
<span>{formatSize(getBase64Size(file.Base64))}</span> <div class="flex gap-1 text-sm text-gray-400 items-center justify-center">
<span class="text-gray-600">•</span> <span>{formatSize(getBase64Size(file.Base64))}</span>
<p>Uploaded on {new Date(file.CreatedAt).toLocaleDateString()}</p> <span class="text-gray-600">•</span>
<p>Uploaded on {new Date(file.CreatedAt).toLocaleDateString()}</p>
</div>
</div> </div>
</div> </div>
</div> </a>
) )
}) })