prompt fom ui update

astriaai · Oct 29, 2024 · 7118951 · 7118951
1 parent bc9935a
commit 7118951
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 15 deletions.
diff --git a/src/components/AdvancedControls.tsx b/src/components/AdvancedControls.tsx
@@ -64,7 +64,7 @@ export const AdvancedControls: React.FC<AdvancedControlsProps> = ({
   const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-6 border rounded-lg overflow-auto h-[400px] scrollbar shadow-lg dark:bg-zinc-900 dark:border-zinc-800">
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-6 overflow-auto h-[400px] scrollbar dark:bg-zinc-900 dark:border-zinc-800">
       <AspectRatioSlider
         value={aspectRatio}
         baseSize={1024}

diff --git a/src/components/AspectRatioSlider.tsx b/src/components/AspectRatioSlider.tsx
@@ -55,7 +55,7 @@ const AspectRatioSlider: React.FC<AspectRatioSliderProps> = ({
   }
 
   return (
-    <div className={`w-full max-w-md ${className} p-6 bg-gray-50 rounded-lg shadow-sm`}>
+    <div className={`w-full ${className} p-6 bg-gray-50 rounded-lg shadow-sm`}>
       <div className="flex justify-between items-center mb-4">
         <h2 className="text-sm font-medium text-gray-800">Aspect Ratio</h2>
         <div className="flex items-center gap-2">
@@ -89,15 +89,15 @@ const AspectRatioSlider: React.FC<AspectRatioSliderProps> = ({
 
 
 
-      <div className="flex justify-around gap-4 mb-6">
+      <div className="flex justify-around mb-6">
         {['Portrait', 'Square', 'Landscape'].map((label, index) => {
           const value = [-4, 0, 4][index]  // Matching values for Portrait, Square, and Landscape
           return (
             <Button
               key={label}
-              variant="outline"
+              variant="ghost"
               size="sm"
-              className={`px-3 ${sliderValue === value ? 'bg-gray-200 text-gray-800' : 'text-gray-500'} hover:bg-gray-300`}
+              className={`px-2 ${sliderValue === value ? 'bg-gray-200 text-gray-800' : 'text-gray-500'} hover:bg-gray-300`}
               onClick={() => handleSliderChange(value)}
             >
               {label}

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,37 +1,46 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { cn } from '@/lib/utils';
+import { PhotoIcon, HomeIcon } from '@heroicons/react/24/outline';
 
 interface NavItem {
   to: string;
   label: string;
+  Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
 }
 
 const navItems: NavItem[] = [
-  { to: '/', label: 'My Prompts' },
-  { to: '/gallery', label: 'Gallery' },
+  { to: '/', label: 'My Prompts', Icon: HomeIcon },
+  { to: '/gallery', label: 'Gallery', Icon: PhotoIcon },
 ];
 
 const Navbar: React.FC = () => {
   const location = useLocation();
 
   return (
-    <nav className="sticky top-0 h-screen w-60 flex-col items-center justify-between p-6 bg-none hidden md:flex">
+    <nav className="sticky top-0 h-screen w-20 lg:w-60 flex-col items-center justify-between p-4 bg-none hidden md:flex">
       <div className="flex w-full grow flex-col items-center gap-6">
         {/* Logo and brand */}
         <div className="flex-shrink-0 my-3">
-          <Link to="/" className="flex items-center">
+          <Link to="/" className="flex items-center justify-center md:justify-start">
             <img
               src="https://www.astria.ai/assets/logo-b4e21f646fb5879eb91113a70eae015a7413de8920960799acb72c60ad4eaa99.png"
               alt="Logo"
               className="h-7 w-7"
             />
-            <span className="ml-2 text-md font-semibold">Astria Imagine</span>
+            <span className="ml-2 text-md font-semibold hidden lg:inline">Astria Imagine</span>
           </Link>
         </div>
         <div className="flex flex-col text-center w-full space-y-4">
           {navItems.map((item) => (
-            <NavLink key={item.to} to={item.to} label={item.label} active={location.pathname === item.to} />
+            <NavLink
+              key={item.to}
+              to={item.to}
+              label={item.label}
+              Icon={item.Icon}
+              active={location.pathname === item.to}
+
+            />
           ))}
         </div>
       </div>
@@ -44,15 +53,16 @@ interface NavLinkProps extends NavItem {
   active: boolean;
 }
 
-const NavLink: React.FC<NavLinkProps> = ({ to, label, active }) => (
+const NavLink: React.FC<NavLinkProps> = ({ to, label, Icon, active }) => (
   <Link
     to={to}
     className={cn(
-      'w-full px-4 py-2 rounded-full text-sm font-medium transition-all duration-200',
+      'w-full flex items-center justify-center md:justify-start px-4 py-2 rounded-full text-sm font-medium transition-all duration-200',
       active ? 'bg-gray-900 text-white' : 'text-gray-700 hover:bg-gray-100 hover:text-black'
     )}
   >
-    {label}
+    <Icon className="h-4 w-4" />
+    <span className="ml-2 hidden lg:inline">{label}</span>
   </Link>
 );
 

diff --git a/src/components/PromptForm.tsx b/src/components/PromptForm.tsx
@@ -85,7 +85,9 @@ const PromptForm: React.FC<PromptFormProps> = () => {
             formData.append('prompt[num_images]', numImages.toString());
             formData.append('prompt[w]', width.toString());
             formData.append('prompt[h]', height.toString());
-
+
+            formData.append('prompt[backend_version]', '1');
+
 
             const response = await createPrompt(formData);
             console.log(response);