init commit

web/src/components/MemoContent/EmbeddedContent/EmbeddedAttachment.tsx

@@ -0,0 +1,62 @@
+import { observer } from "mobx-react-lite";
+import { useEffect } from "react";
+import MemoAttachmentListView from "@/components/MemoAttachmentListView";
+import useLoading from "@/hooks/useLoading";
+import { cn } from "@/lib/utils";
+import { attachmentStore } from "@/store";
+import Error from "./Error";
+
+interface Props {
+  resourceId: string;
+  params: string;
+}
+
+const getAdditionalClassNameWithParams = (params: URLSearchParams) => {
+  const additionalClassNames = [];
+  if (params.has("align")) {
+    const align = params.get("align");
+    if (align === "center") {
+      additionalClassNames.push("mx-auto");
+    }
+  }
+  if (params.has("size")) {
+    const size = params.get("size");
+    if (size === "lg") {
+      additionalClassNames.push("w-full");
+    } else if (size === "md") {
+      additionalClassNames.push("w-2/3");
+    } else if (size === "sm") {
+      additionalClassNames.push("w-1/3");
+    }
+  }
+  if (params.has("width")) {
+    const width = params.get("width");
+    additionalClassNames.push(`w-[${width}]`);
+  }
+  return additionalClassNames.join(" ");
+};
+
+const EmbeddedAttachment = observer(({ resourceId: uid, params: paramsStr }: Props) => {
+  const loadingState = useLoading();
+  const attachment = attachmentStore.getAttachmentByName(uid);
+  const params = new URLSearchParams(paramsStr);
+
+  useEffect(() => {
+    attachmentStore.fetchAttachmentByName(`attachments/${uid}`).finally(() => loadingState.setFinish());
+  }, [uid]);
+
+  if (loadingState.isLoading) {
+    return null;
+  }
+  if (!attachment) {
+    return <Error message={`Attachment not found: ${uid}`} />;
+  }
+
+  return (
+    <div className={cn("max-w-full", getAdditionalClassNameWithParams(params))}>
+      <MemoAttachmentListView attachments={[attachment]} />
+    </div>
+  );
+});
+
+export default EmbeddedAttachment;