Merge pull request #223 from webstudio-is/more-asset-work

apps/designer/app/designer/features/sidebar-left/panels/asset-manager/add-an-asset-form.tsx

@@ -58,7 +58,11 @@ export const AddAnAssetForm = ({
         ref={inputRef}
         style={{ display: "none" }}
       />
-      <Button type="button" onClick={() => inputRef?.current?.click()}>
+      <Button
+        variant="blue"
+        type="button"
+        onClick={() => inputRef?.current?.click()}
+      >
         Upload Image
       </Button>
     </Form>

apps/designer/app/designer/features/sidebar-left/panels/asset-manager/index.ts

@@ -0,0 +1,2 @@
+export * from "./add-an-asset-form";
+export * from "./thumbnail";

apps/designer/app/designer/features/sidebar-left/panels/assets.tsx

@@ -1,11 +1,11 @@
 import { ImageIcon } from "@webstudio-is/icons";
-import { Flex, Grid, Heading } from "@webstudio-is/design-system";
+import { Flex, Grid } from "@webstudio-is/design-system";
 import { useEffect, useState } from "react";
 import { useActionData } from "@remix-run/react";
-import { AssetManagerThumbnail } from "./components/thumbnail";
+import { AssetManagerThumbnail, AddAnAssetForm } from "./asset-manager";
 
-import { AddAnAssetForm } from "./components/add-an-asset-form";
-import { Asset } from "../types";
+import { Asset, TabName } from "../types";
+import { Header } from "../lib/header";
 
 export const useAssetsState = (baseAssets: Array<Asset>) => {
   const imageChanges = useActionData();
@@ -41,22 +41,31 @@ export const useAssetsState = (baseAssets: Array<Asset>) => {
 
 export const TabContent = ({
   assets: baseAssets,
+  onSetActiveTab,
 }: {
+  onSetActiveTab: (tabName: TabName) => void;
   assets: Array<Asset>;
 }) => {
   const { assets, onUploadAsset } = useAssetsState(baseAssets);
   return (
-    <Flex gap="3" direction="column" css={{ padding: "$1" }}>
-      <Flex justify="between" align="center">
-        <Heading>Assets</Heading>
-        <AddAnAssetForm onSubmit={onUploadAsset} />
+    <>
+      <Header
+        title="Assets"
+        onClose={() => {
+          onSetActiveTab("none");
+        }}
+      />
+      <Flex gap="3" direction="column" css={{ padding: "$1" }}>
+        <Flex justify="end">
+          <AddAnAssetForm onSubmit={onUploadAsset} />
+        </Flex>
+        <Grid columns={2} gap={2}>
+          {assets.map((asset) => (
+            <AssetManagerThumbnail key={asset.id} {...asset} />
+          ))}
+        </Grid>
       </Flex>
-      <Grid columns={2} gap={2}>
-        {assets.map((asset) => (
-          <AssetManagerThumbnail key={asset.id} {...asset} />
-        ))}
-      </Grid>
-    </Flex>
+    </>
   );
 };
 

apps/designer/app/designer/features/sidebar-left/panels/index.ts

@@ -1,5 +1,5 @@
 import * as components from "./components";
 import * as navigator from "./navigator";
-import * as assetManager from "./asset-manager";
+import * as assetManager from "./assets";
 
 export const panels = { components, navigator, assetManager } as const;