File Download component

src/back/jdd-components/file/file.css

@@ -0,0 +1,22 @@
+.file {
+	.file__icon {
+		svg * {
+			fill: var(--color-brand-link-fg) !important;
+		}
+	}
+
+	a {
+		background-color: color-mix(in srgb, var(--color-brand-text-fg) 10%, transparent);
+		padding: 8px;
+		display: flex;
+		flex-flow: row nowrap;
+		align-items: center;
+		gap: 8px;
+		transition: none !important;
+		text-decoration: none;
+
+		&:hover {
+			transform: scale(1.05);
+		}
+	}
+}

src/back/jdd-components/file/file.jdd.tsx

@@ -0,0 +1,34 @@
+import { TempstreamJSX } from "tempstream";
+import type { ComponentToHTMLArgs } from "@sealcode/jdd";
+import { Component, ComponentArguments } from "@sealcode/jdd";
+import { icon } from "src/back/icons.js";
+import { PathFilePointer } from "@sealcode/file-manager";
+
+const component_arguments = {
+	file: new ComponentArguments.File(),
+	text: new ComponentArguments.ShortText().setDefaultValue(""),
+	force_download: new ComponentArguments.Boolean().setDefaultValue(false),
+} as const;
+
+export class File extends Component<typeof component_arguments> {
+	getArguments() {
+		return component_arguments;
+	}
+
+	async toHTML({
+		args: { file, force_download, text },
+		classes,
+	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
+		if (!(file instanceof PathFilePointer)) {
+			return "";
+		}
+		return (
+			<div class={["file", ...classes]}>
+				<a href={file.getURL()} download={force_download}>
+					<div class="file__icon">{icon("paperclip")}</div>
+					{text || file?.getOriginalFilename() || "file"}
+				</a>
+			</div>
+		);
+	}
+}

src/icons/paperclip.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 0.96 0.96"
+   fill="none"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="paperclip-svgrepo-com.svg"
+   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="9.9699453"
+     inkscape:cx="31.243903"
+     inkscape:cy="27.933955"
+     inkscape:window-width="1920"
+     inkscape:window-height="1048"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <path
+     style="baseline-shift:baseline;display:inline;overflow:visible;vector-effect:none;fill:#000000;stroke-linecap:round;stroke-linejoin:round;enable-background:accumulate;stop-color:#000000;stop-opacity:1;opacity:1;fill-opacity:1"
+     d="m 0.41015625,0.015625 c -0.0704926,0 -0.12242427,0.03231334 -0.15039062,0.07226562 -0.0279664,0.03995229 -0.0351563,0.08229695 -0.0351563,0.11328126 v 0.46484374 c -10e-9,0.10225154 0.0326564,0.17606761 0.0839844,0.22070313 0.051328,0.0446355 0.11568679,0.0585938 0.171875,0.0585938 0.0561877,0 0.12054699,-0.0139582 0.171875,-0.0585938 0.051328,-0.0446356 0.0839844,-0.11845228 0.0839844,-0.22070313 v -0.4765625 a 0.04647825,0.04647825 0 0 0 -0.046875,-0.046875 0.04647825,0.04647825 0 0 0 -0.046875,0.046875 v 0.4765625 c 0,0.0836627 -0.0238919,0.12530886 -0.0527344,0.15039063 -0.0288424,0.0250818 -0.0679394,0.0351563 -0.109375,0.0351563 -0.0414371,0 -0.0824862,-0.0100749 -0.11132812,-0.0351563 -0.0288419,-0.0250813 -0.0527344,-0.0667267 -0.0527344,-0.15039063 V 0.20117188 c 0,-0.0154916 0.006829,-0.0424013 0.0195313,-0.0605469 0.0127018,-0.0181456 0.0285146,-0.0332031 0.0742188,-0.0332031 0.0457043,0 0.0634701,0.0150584 0.0761719,0.0332031 0.0127017,0.0181447 0.0175781,0.045052 0.0175781,0.0605469 v 0.48046874 c 0,0.0108974 -0.004264,0.0190517 -0.007813,0.0234375 -0.003548,0.004386 -0.004893,0.007813 -0.015625,0.007813 -0.0107348,0 -0.0140316,-0.003429 -0.0175781,-0.007813 -0.003547,-0.004383 -0.005859,-0.0125329 -0.005859,-0.0234375 V 0.20117188 a 0.04647825,0.04647825 0 0 0 -0.046875,-0.046875 0.04647825,0.04647825 0 0 0 -0.046875,0.046875 v 0.48046874 c 0,0.0289647 0.007652,0.0576935 0.0273438,0.0820313 0.0196914,0.0243377 0.0541027,0.0410156 0.0898438,0.0410156 0.0357444,0 0.0682009,-0.0166778 0.0878906,-0.0410156 0.0196898,-0.0243378 0.0273438,-0.0530694 0.0273438,-0.0820313 V 0.20117188 c 0,-0.030987 -0.005236,-0.0733296 -0.0332031,-0.11328126 C 0.53453283,0.04793895 0.48064766,0.015625 0.41015625,0.015625 Z"
+     id="path1" />
+</svg>