Generate Logo Modal

Logo generation interface modal with form inputs for brand customization. Perfect for AI-powered logo generation, brand creation, and design workflows.

Features

Logo type selection
Brand name input
Industry selection with dropdown
Color preference input
Style customization
Loading states during generation

Example

Generate Your Logo

Click the button below to open the logo generation modal. Fill out the form to customize your logo design.

Usage

import { GenerateLogoModal } from '@/components/ui/templates/modal'

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  
  const handleSubmit = (data: {
    logoType: string
    brandName: string
    industry: string
    colorPreference: string
    style: string
  }) => {
    console.log('Generating logo:', data)
    setIsLoading(true)
    // Process logo generation
    setTimeout(() => {
      setIsLoading(false)
      setIsOpen(false)
    }, 2000)
  }
  
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Generate Logo
      </Button>
      
      <GenerateLogoModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onSubmit={handleSubmit}
        isLoading={isLoading}
      />
    </>
  )
}

Props

Prop	Type	Default	Description
isOpen	boolean	-	Controls modal visibility
onClose	() => void	-	Callback when modal is closed
onSubmit	(data) => void	-	Callback with logo generation data
isLoading	boolean	false	Shows loading state on submit button