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) => {
return (
<div class="rounded-xl bg-neutral-900 flex flex-col overflow-hidden">
{ file.Base64 && (file.ID.endsWith(".png") || file.ID.endsWith(".jpg") || file.ID.endsWith(".jpeg")) && (
<img
width={400}
height={300}
src={`data:image/png;base64,${file.Base64}`}
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">
{file.ID.split("_").slice(1).join("_") || "Untitled"}
</p>
<div class="flex gap-1 text-sm text-gray-400 items-center justify-center">
<span>{formatSize(getBase64Size(file.Base64))}</span>
<span class="text-gray-600">•</span>
<p>Uploaded on {new Date(file.CreatedAt).toLocaleDateString()}</p>
<a href={`/api/${file.ID}`} target="_blank">
<div class="rounded-xl bg-neutral-900 flex flex-col overflow-hidden">
{ file.Base64 && (file.ID.endsWith(".png") || file.ID.endsWith(".jpg") || file.ID.endsWith(".jpeg")) && (
<img
width={400}
height={300}
src={`data:image/png;base64,${file.Base64}`}
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">
{file.ID.split("_").slice(1).join("_") || "Untitled"}
</p>
<div class="flex gap-1 text-sm text-gray-400 items-center justify-center">
<span>{formatSize(getBase64Size(file.Base64))}</span>
<span class="text-gray-600">•</span>
<p>Uploaded on {new Date(file.CreatedAt).toLocaleDateString()}</p>
</div>
</div>
</div>
</div>
</a>
)
})