⚠️ wip

apps/web/package.json

@@ -17,6 +17,7 @@
     "@tanstack/react-query": "5.18.1",
     "@ygtang/api": "workspace:^",
     "@ygtang/constants": "workspace:*",
+    "@ygtang/hooks": "workspace:*",
     "@ygtang/http": "workspace:^",
     "@ygtang/ui-components": "workspace:*",
     "@ygtang/ui-styles": "workspace:*",

apps/webextension/src/components/Thumbnails/Thumbnails.tsx

@@ -0,0 +1,36 @@
+import { css } from "@emotion/react";
+import { InspirationInterface, InspirationType } from "@ygtang/api";
+import { Thumbnail } from "@ygtang/ui-components";
+
+interface Props {
+  inspirations: InspirationInterface[];
+}
+
+export default function Thumbnails({ inspirations }: Props) {
+  return (
+    <div css={thumbnailWrapperCss}>
+      {inspirations.map(
+        ({ id, type, content, openGraphResponse, memo, tagResponses }) => (
+          <Thumbnail
+            key={id}
+            id={id}
+            type={type as InspirationType}
+            content={content}
+            tags={tagResponses}
+            openGraph={openGraphResponse}
+            memo={memo}
+          />
+        ),
+      )}
+    </div>
+  );
+}
+
+const thumbnailWrapperCss = css`
+  width: 100%;
+  padding-top: 16px;
+  padding-bottom: 5px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+`;

apps/webextension/src/components/Thumbnails/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Thumbnails";