Merge pull request #9 from storytold/feature/styles-and-prompt

Feature/styles and prompt

app/components/H4.tsx

@@ -0,0 +1,19 @@
+import { twMerge } from "tailwind-merge"
+
+export const H4 = ({
+  className,
+  children,
+}:{
+  className?: string,
+  children: React.ReactNode,
+})=>{
+  return(
+    <h4
+      className={
+        twMerge("text-base font-medium text-white", className)
+      }
+    >
+      {children}
+    </h4>
+  )
+}

app/components/ItemPicker.tsx

@@ -0,0 +1,17 @@
+import { H4 } from ".";
+
+interface ItemPickerProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  label: string
+}
+
+export const ItemPicker = ({
+  label,
+  ...imgProps
+}:ItemPickerProps) => {
+  return (
+    <div className="relative border border-ui-border rounded-lg overflow-hidden">
+      <img className="aspect-square min-w-20" {...imgProps} />
+      <H4 className="absolute bottom-0 left-2 drop-shadow-md">{label}</H4>
+    </div>
+  )
+}

app/components/Textarea.tsx

@@ -0,0 +1,17 @@
+import { TextareaHTMLAttributes } from "react"
+import { twMerge } from "tailwind-merge";
+
+export const Textarea = ({
+  className,
+  ...rest
+}:TextareaHTMLAttributes<HTMLTextAreaElement>) => {
+  return(
+    <textarea
+      {...rest}
+      className={twMerge(
+        "rounded-lg bg-ui-controls border border-ui-panel-border py-2 px-4"
+        ,className
+      )}
+    />
+  );
+}

app/components/index.tsx

@@ -3,4 +3,9 @@ import { ButtonIcon } from "./ButtonIcon";
 import { ButtonLink } from "./ButtonLink";
 import { ButtonIconSelect } from "./ButtonIconSelect";
 
-export { Button, ButtonIcon, ButtonLink, ButtonIconSelect };
+import {H4} from "./H4";
+
+import { ItemPicker } from "./ItemPicker";
+import { Textarea } from "./Textarea";
+
+export { Button, ButtonIcon, ButtonLink, ButtonIconSelect, H4, ItemPicker, Textarea};

app/modules/SidePanel/SidePanel.tsx

@@ -7,7 +7,11 @@ import {
   faChevronRight,
 } from "@fortawesome/pro-solid-svg-icons";
 
-export const SidePanel = () => {
+interface Props {
+  children: React.ReactNode;
+}
+
+export const SidePanel = ({children}:Props) => {
   const [isVisible, setIsVisible] = useState(true);
 
   return (
@@ -27,27 +31,11 @@ export const SidePanel = () => {
         leaveFrom="translate-x-0"
         leaveTo="translate-x-full"
       >
-        <Tabs
-          tabs={[
-            {
-              header: "Animation",
-              children: <p>Animation Tab</p>,
-            },
-            {
-              header: "Camera",
-              children: <p>Camera Tab</p>,
-            },
-            {
-              header: "Audio",
-              children: <p>Audio Tab</p>,
-            },
-            {
-              header: "Styling",
-              children: <p>Styling Tab</p>,
-            },
-          ]}
-        />
+
+          {children}
+
       </Transition>
     </div>
+
   );
 };

app/pages/PageEnigma/PageEnigma.tsx

@@ -6,13 +6,14 @@ import { Button, ButtonLink } from "~/components";
 import { ButtonDialogue } from "~/modules/ButtonDialogue";
 import { TopBarHelmet } from "~/modules/TopBarHelmet/TopBarHelmet";
 import { SidePanel } from "~/modules/SidePanel";
-import { Tabs } from "~/modules/Tabs";
+
 import { Controls3D } from "./comps/Controls3D";
 import { ControlsVideo } from "./comps/ControlsVideo";
 import { Timeline } from "./comps/Timeline";
+import { SidePanelTabs } from "./comps/SidePanelTabs";
 
 import Editor from "./js/editor";
-import { TrackContext } from "~/contexts/TrackContext/TrackContext";
+
 import { TrackProvider } from "~/contexts/TrackContext/TrackProvider";
 
 export const PageEnigma = () => {
@@ -124,13 +125,15 @@ export const PageEnigma = () => {
           </div>
 
           {/* Side panel */}
-          <SidePanel />
+          <SidePanel>
+            <SidePanelTabs />
+          </SidePanel>
         </div>
 
         {/* Timeline */}
         <div className="min-h-[260px]" ref={timelineRef}>
           <TrackProvider>
-            <Timeline editorCurrent={editorRef.current} length={12} />
+            <Timeline editorCurrent={editorRef.current} />
           </TrackProvider>
         </div>
       </div>

app/pages/PageEnigma/comps/SidePanelTabs/TabStyling.tsx

@@ -0,0 +1,53 @@
+
+import {
+  H4,
+  ItemPicker,
+  Textarea
+} from "~/components"
+
+
+export const TabStyling = ()=>{
+  const handlePickingStyle = (picked:string)=>{
+    console.log(`Picked style: ${picked}`);
+  }
+
+  return(
+    <>
+      <H4>Select Base Style</H4>
+      <div className="flex gap-2 my-2">
+        <ItemPicker
+          label="Anime"
+          onClick={()=>handlePickingStyle("anime")}
+          src="/resources/avatars/0.webp"
+        />
+        <ItemPicker
+          label="Pixel"
+          onClick={()=>handlePickingStyle("pixel")}
+          src="/resources/avatars/1.webp"
+        />
+        <ItemPicker
+          label="Pixar"
+          onClick={()=>handlePickingStyle("pixar")}
+          src="/resources/avatars/2.webp"
+        />
+        <ItemPicker
+          label="Stylized"
+          onClick={()=>handlePickingStyle("stylized")}
+          src="/resources/avatars/3.webp"
+        />
+      </div>
+      <H4>Enter a Prompt</H4>
+      <div className="flex gap-2 my-2">
+        <Textarea className="w-full" />
+      </div>
+      <H4>Negative Prompt</H4>
+      <div className="flex gap-2 my-2">
+        <Textarea
+          className="w-full"
+          placeholder="Type here to filter out the things you don't want in the scene
+        "/>
+      </div>
+    </>
+  );
+
+}

app/pages/PageEnigma/comps/SidePanelTabs/index.tsx

@@ -0,0 +1,28 @@
+import { Tabs } from "~/modules/Tabs";
+import { TabStyling } from "./TabStyling";
+
+export const SidePanelTabs = ()=>{
+  return(
+    <Tabs
+      tabs={[
+        {
+          header: "Animation",
+          children: <p>Animation Tab</p>,
+        },
+        {
+          header: "Camera",
+          children: <p>Camera Tab</p>,
+        },
+        {
+          header: "Audio",
+          children: <p>Audio Tab</p>,
+        },
+        {
+          header: "Styling",
+          children: <TabStyling />,
+        },
+      ]}
+    />
+  );
+
+}