responsive drawer

elliotBraem · Oct 24, 2024 · dca185e · dca185e
1 parent fd02d34
commit dca185e
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 92 deletions.
diff --git a/src/components/action-button.tsx b/src/components/action-button.tsx
@@ -1,10 +1,10 @@
+import { BlackSphere } from "@/components/common/black-sphere";
 import { useSheetStack } from "@/hooks/use-sheet-stack";
 import { createItem, getInventories } from "@/lib/inventory";
 import { useAccount } from "@/lib/providers/jazz";
 import { Thing } from "@/lib/schema";
-import { BlackSphere } from "@/tangible/black-sphere";
 import { CoMapInit } from "jazz-tools";
-import AIAssistantComponent from "./ai-assistant";
+import { CreateThing } from "./thing/create";
 
 export const ActionButton = () => {
   const { openSheet } = useSheetStack();
@@ -48,7 +48,11 @@ export const ActionButton = () => {
   // <CreateThing availableTypes={["thing"]} onSubmit={handleSubmit} />
 
   const handleActionClick = () => {
-    openSheet(AIAssistantComponent);
+    // openSheet(AIAssistantComponent);
+    openSheet(CreateThing, {
+      availableTypes: ["type"],
+      onSubmit: handleSubmit
+    });
   };
 
   return (

diff --git a/src/tangible/black-sphere.tsx → src/components/common/black-sphere.tsx b/src/tangible/black-sphere.tsx → src/components/common/black-sphere.tsx
diff --git a/src/components/common/sheet-stack.tsx b/src/components/common/sheet-stack.tsx
@@ -34,14 +34,18 @@ const StackItem = memo(
     if (isMobile) {
       return (
         <Drawer open={true} onOpenChange={closeSheet}>
-          <DrawerContent>
-            <DrawerHeader className="text-left">
-              <DrawerTitle>Edit profile</DrawerTitle>
-              <DrawerDescription>
-                Make changes to your profile here. Click save when you're done.
-              </DrawerDescription>
-            </DrawerHeader>
-            <div className="px-4">{children}</div>
+          <DrawerContent className="flex h-screen max-h-screen flex-col justify-between">
+            {/* <div className="h-full flex-1"> */}
+            <div className="flex-1 overflow-y-auto">
+              <DrawerHeader className="text-left">
+                <DrawerTitle>Edit profile</DrawerTitle>
+                <DrawerDescription>
+                  Make changes to your profile here. Click save when you're
+                  done.
+                </DrawerDescription>
+              </DrawerHeader>
+              <div className="flex h-full flex-col">{children}</div>
+            </div>
             <DrawerFooter className="pt-2">
               <DrawerClose asChild>
                 <Button variant="outline">Cancel</Button>
@@ -53,14 +57,17 @@ const StackItem = memo(
     } else {
       return (
         <Sheet open={true} onOpenChange={closeSheet}>
-          <SheetContent className="w-full min-w-[768px]">
-            <SheetHeader>
-              <SheetTitle>Edit profile</SheetTitle>
-              <SheetDescription>
-                Make changes to your profile here. Click save when you're done.
-              </SheetDescription>
-            </SheetHeader>
-            {children}
+          <SheetContent className="flex h-screen max-h-screen w-full min-w-[768px] flex-col justify-between">
+            <div className="flex-1 overflow-y-auto">
+              <SheetHeader>
+                <SheetTitle>Edit profile</SheetTitle>
+                <SheetDescription>
+                  Make changes to your profile here. Click save when you're
+                  done.
+                </SheetDescription>
+              </SheetHeader>
+              <div className="flex h-full flex-col">{children}</div>
+            </div>
             <SheetFooter className="pt-2">
               <SheetClose asChild>
                 <Button variant="outline">Cancel</Button>

diff --git a/src/components/thing/create.tsx b/src/components/thing/create.tsx
@@ -16,11 +16,7 @@ interface CreateThingProps {
   onSubmit: (formData: { type: string; images: File[]; json: string }) => void;
 }
 
-export const CreateThing: React.FC<CreateThingProps> = ({
-  availableTypes,
-  onSubmit
-}) => {
-  const [selectedType, setSelectedType] = React.useState<string | null>(null);
+const ThingForm = ({ type, onSubmit }) => {
   const [jsonData, setJsonData] = React.useState<string>("");
   const [files, setFiles] = React.useState<File[]>([]);
   const [isExpanded, setIsExpanded] = React.useState(false);
@@ -46,89 +42,95 @@ export const CreateThing: React.FC<CreateThingProps> = ({
   };
 
   const handleSubmit = () => {
-    if (selectedType && jsonData && files.length > 0) {
-      onSubmit({ type: selectedType, images: files, json: jsonData });
-    }
+    onSubmit();
   };
 
   return (
-    <div className="flex h-full w-full flex-col space-y-4 p-4">
-      {/* Select Type Dropdown */}
-      <div className="flex flex-col">
-        <Select onValueChange={setSelectedType}>
-          <SelectTrigger className="w-full">
-            <SelectValue placeholder="Select a type" />
-          </SelectTrigger>
-          <SelectContent>
-            {availableTypes.map((type) => (
-              <SelectItem key={type} value={type}>
-                {type}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-
-      {/* Image Dropzone */}
-      {selectedType && (
-        <div className="flex flex-col">
-          <div
-            {...getRootProps({
-              className: `w-full h-20 border-2 border-dashed rounded-md flex justify-center items-center cursor-pointer ${files.length >= 6 ? "pointer-events-none opacity-50" : ""}`
-            })}
-          >
-            <input {...getInputProps()} />
-            <LucideImage className="mr-2 h-6 w-6" />
-            <span>
-              {files.length < 6
-                ? "Drag and drop images, or click to select"
-                : "Maximum of 6 images"}
-            </span>
-          </div>
-
-          {/* Image Count and Toggle Collapse */}
-          <div className="mt-2 flex items-center justify-between">
-            <span>{files.length} / 6 images added</span>
-            {files.length > 0 && (
-              <Button
-                variant="link"
-                size="sm"
-                onClick={() => setIsExpanded(!isExpanded)}
-              >
-                {isExpanded ? "Hide Images" : "View Images"}
-              </Button>
-            )}
-          </div>
+    <>
+      <div className="flex flex-grow flex-col">
+        <div
+          {...getRootProps({
+            className: `w-full h-20 border-2 border-dashed rounded-md flex justify-center items-center cursor-pointer ${files.length >= 6 ? "pointer-events-none opacity-50" : ""}`
+          })}
+        >
+          <input {...getInputProps()} />
+          <LucideImage className="mr-2 h-6 w-6" />
+          <span>
+            {files.length < 6
+              ? "Drag and drop images, or click to select"
+              : "Maximum of 6 images"}
+          </span>
+        </div>
 
-          {/* Collapsible Image Preview */}
-          {isExpanded && (
-            <ImagePreview files={files} onDelete={handleDeleteImage} />
+        <div className="mt-2 flex items-center justify-between">
+          <span>{files.length} / 6 images added</span>
+          {files.length > 0 && (
+            <Button
+              variant="link"
+              size="sm"
+              onClick={() => setIsExpanded(!isExpanded)}
+            >
+              {isExpanded ? "Hide Images" : "View Images"}
+            </Button>
           )}
         </div>
-      )}
 
+        {isExpanded && (
+          <ImagePreview files={files} onDelete={handleDeleteImage} />
+        )}
+      </div>
       {/* JSON Textarea */}
-      {selectedType && (
-        <div className="flex flex-grow flex-col">
-          <Textarea
-            placeholder="Paste your JSON data here..."
-            className="h-full"
-            value={jsonData}
-            onChange={(e) => setJsonData(e.target.value)}
-          />
-        </div>
-      )}
-
-      {/* Footer with "Create" Button */}
-      <div className="flex items-center justify-end pt-4">
+      <Textarea
+        placeholder="Paste your JSON data here..."
+        className="h-full flex-grow"
+        value={jsonData}
+        onChange={(e) => setJsonData(e.target.value)}
+      />
+      <div className="flex-shrink-0 items-center justify-end pt-4">
         <Button
           className="w-full"
           onClick={handleSubmit}
-          disabled={!selectedType || !jsonData || files.length === 0}
+          disabled={!type || !jsonData || files.length === 0}
         >
           Create
         </Button>
       </div>
+    </>
+  );
+};
+
+export const CreateThing: React.FC<CreateThingProps> = ({
+  availableTypes,
+  onSubmit
+}) => {
+  const [selectedType, setSelectedType] = React.useState<string | null>(null);
+
+  const handleSubmit = () => {
+    // if (selectedType && jsonData && files.length > 0) {
+    //   onSubmit({ type: selectedType, images: files, json: jsonData });
+    // }
+  };
+
+  return (
+    <div className="flex h-full flex-grow flex-col">
+      <div className="flex h-full w-full flex-col space-y-4 overflow-y-auto p-4">
+        {/* Select Type Dropdown */}
+        <div className="flex-shrink-0">
+          <Select onValueChange={setSelectedType}>
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Select a type" />
+            </SelectTrigger>
+            <SelectContent>
+              {availableTypes.map((type) => (
+                <SelectItem key={type} value={type}>
+                  {type}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        {selectedType ? <ThingForm type={selectedType} /> : <p>please select a type</p>}
+      </div>
     </div>
   );
 };