Overview

The <CreateWorkspaceForm /> component provides a form interface for creating new workspaces within a specific organization. It includes fields for workspace name, description, and logo upload with built-in validation.

Basic Usage

import { CreateWorkspaceForm } from '@snipextt/wacht'

function CreateWorkspacePage() {
  return (
    <div className="create-workspace-page">
      <h1>Create Workspace</h1>
      <CreateWorkspaceForm organizationId="org_123" />
    </div>
  )
}

Props

organizationId
string
required
ID of the organization where the workspace will be created.
onSuccess
function
Callback function called when workspace is successfully created.
onCancel
function
Callback function called when form is cancelled.

What it includes

Form Fields

  • Workspace Name - Required text field with validation
  • Description - Optional textarea for workspace description
  • Logo Upload - Optional image upload with preview functionality

File Upload Features

  • Supported Formats - PNG, JPEG, GIF image files
  • Size Limit - 2MB maximum file size
  • Image Preview - Shows uploaded image with replace/remove options
  • Organization Context - Workspace is created within the specified organization

Form Functionality

  • Validation - Client-side validation for required fields
  • Loading States - Shows loading indicator during submission
  • Error Handling - Displays validation and submission errors
  • Organization Binding - Automatically associates workspace with the provided organization