@digilogiclabs/create-saas-app 2.10.0 → 2.12.0

package/dist/templates/web/ui-auth-ai/template/src/components/ai/audio-generator.tsx

@@ -1,141 +1,145 @@
-'use client'
-
-import { useState } from 'react'
-import { useGenerateAudio, useJobStatus } from '@digilogiclabs/saas-factory-ai/react'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { JobProgress } from '@digilogiclabs/saas-factory-ai/react'
-
-export function AudioGenerator() {
-  const [prompt, setPrompt] = useState('')
-  const [style, setStyle] = useState('lofi')
-  const [duration, setDuration] = useState(30)
-  const [jobId, setJobId] = useState<string | null>(null)
-  const [audioUrl, setAudioUrl] = useState<string | null>(null)
-  
-  const { generate, loading, error } = useGenerateAudio()
-  const { status } = useJobStatus(jobId)
-
-  const handleGenerate = async () => {
-    if (!prompt.trim()) return
-    
-    try {
-      const result = await generate(prompt, {
-        style,
-        durationSec: duration,
-        format: 'mp3'
-      })
-      setJobId(result.jobId)
-      setAudioUrl(null)
-    } catch (err) {
-      console.error('Audio generation failed:', err)
-    }
-  }
-
-  const handleJobComplete = (result: any) => {
-    if (result.url) {
-      setAudioUrl(result.url)
-    }
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="grid grid-cols-1 gap-4">
-        <div>
-          <Label htmlFor="prompt">Audio Description</Label>
-          <Input
-            id="prompt"
-            value={prompt}
-            onChange={(e) => setPrompt(e.target.value)}
-            placeholder="Describe the audio you want to generate..."
-            className="mt-1"
-          />
-        </div>
-        
-        <div className="grid grid-cols-2 gap-4">
-          <div>
-            <Label htmlFor="style">Style</Label>
-            <Select value={style} onValueChange={setStyle}>
-              <SelectTrigger className="mt-1">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="lofi">Lo-Fi</SelectItem>
-                <SelectItem value="jazz">Jazz</SelectItem>
-                <SelectItem value="classical">Classical</SelectItem>
-                <SelectItem value="electronic">Electronic</SelectItem>
-                <SelectItem value="ambient">Ambient</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          
-          <div>
-            <Label htmlFor="duration">Duration (seconds)</Label>
-            <Input
-              id="duration"
-              type="number"
-              value={duration}
-              onChange={(e) => setDuration(parseInt(e.target.value) || 30)}
-              min={10}
-              max={300}
-              className="mt-1"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className="flex justify-center">
-        <Button
-          onClick={handleGenerate}
-          disabled={loading || !prompt.trim() || !!jobId}
-          className="px-8"
-        >
-          {loading ? 'Starting Generation...' : 'Generate Audio'}
-        </Button>
-      </div>
-
-      {error && (
-        <div className="p-4 bg-red-50 border border-red-200 rounded-md">
-          <p className="text-sm text-red-600">{error.message}</p>
-        </div>
-      )}
-
-      {jobId && (
-        <div className="space-y-4">
-          <JobProgress 
-            jobId={jobId}
-            onComplete={handleJobComplete}
-            className="p-4 bg-gray-50 rounded-md"
-          />
-        </div>
-      )}
-
-      {audioUrl && (
-        <div className="p-4 bg-green-50 border border-green-200 rounded-md">
-          <h4 className="font-medium text-green-800 mb-3">Generated Audio</h4>
-          <audio controls className="w-full">
-            <source src={audioUrl} type="audio/mpeg" />
-            Your browser does not support the audio element.
-          </audio>
-          <div className="mt-3">
-            <Button
-              variant="outline"
-              onClick={() => {
-                const link = document.createElement('a')
-                link.href = audioUrl
-                link.download = 'generated-audio.mp3'
-                document.body.appendChild(link)
-                link.click()
-                document.body.removeChild(link)
-              }}
-            >
-              Download Audio
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
-  )
+'use client'
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+// Using native select for simplicity
+
+// TODO: Replace with your AI SDK hooks
+function useGenerateAudio() {
+  return { generate: async (_prompt: string, _opts?: Record<string, unknown>) => ({ jobId: '' }), loading: false, error: null as string | null }
+}
+function useJobStatus(_id: string | null) {
+  return { status: null as string | null }
+}
+function JobProgress({ jobId, onComplete, className }: { jobId?: string; onComplete?: (result: unknown) => void; className?: string; status?: string | null }) {
+  return status ? <div className="text-sm text-muted-foreground">Status: {status}</div> : null
+}
+
+export function AudioGenerator() {
+  const [prompt, setPrompt] = useState('')
+  const [style, setStyle] = useState('lofi')
+  const [duration, setDuration] = useState(30)
+  const [jobId, setJobId] = useState<string | null>(null)
+  const [audioUrl, setAudioUrl] = useState<string | null>(null)
+  
+  const { generate, loading, error } = useGenerateAudio()
+  const { status } = useJobStatus(jobId)
+
+  const handleGenerate = async () => {
+    if (!prompt.trim()) return
+    
+    try {
+      const result = await generate(prompt, {
+        style,
+        durationSec: duration,
+        format: 'mp3'
+      })
+      setJobId(result.jobId)
+      setAudioUrl(null)
+    } catch (err) {
+      console.error('Audio generation failed:', err)
+    }
+  }
+
+  const handleJobComplete = (result: any) => {
+    if (result.url) {
+      setAudioUrl(result.url)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 gap-4">
+        <div>
+          <Label htmlFor="prompt">Audio Description</Label>
+          <Input
+            id="prompt"
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            placeholder="Describe the audio you want to generate..."
+            className="mt-1"
+          />
+        </div>
+        
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <Label htmlFor="style">Style</Label>
+            <select value={style} onChange={(e) => setStyle(e.target.value)} className="mt-1 flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+              <option value="lofi">Lo-Fi</option>
+              <option value="jazz">Jazz</option>
+              <option value="classical">Classical</option>
+              <option value="electronic">Electronic</option>
+              <option value="ambient">Ambient</option>
+            </select>
+          </div>
+          
+          <div>
+            <Label htmlFor="duration">Duration (seconds)</Label>
+            <Input
+              id="duration"
+              type="number"
+              value={duration}
+              onChange={(e) => setDuration(parseInt(e.target.value) || 30)}
+              min={10}
+              max={300}
+              className="mt-1"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex justify-center">
+        <Button
+          onClick={handleGenerate}
+          disabled={loading || !prompt.trim() || !!jobId}
+          className="px-8"
+        >
+          {loading ? 'Starting Generation...' : 'Generate Audio'}
+        </Button>
+      </div>
+
+      {error && (
+        <div className="p-4 bg-red-50 border border-red-200 rounded-md">
+          <p className="text-sm text-red-600">{error}</p>
+        </div>
+      )}
+
+      {jobId && (
+        <div className="space-y-4">
+          <JobProgress 
+            jobId={jobId}
+            onComplete={handleJobComplete}
+            className="p-4 bg-muted rounded-md"
+          />
+        </div>
+      )}
+
+      {audioUrl && (
+        <div className="p-4 bg-green-50 border border-green-200 rounded-md">
+          <h4 className="font-medium text-green-800 mb-3">Generated Audio</h4>
+          <audio controls className="w-full">
+            <source src={audioUrl} type="audio/mpeg" />
+            Your browser does not support the audio element.
+          </audio>
+          <div className="mt-3">
+            <Button
+              variant="outline"
+              onClick={() => {
+                const link = document.createElement('a')
+                link.href = audioUrl
+                link.download = 'generated-audio.mp3'
+                document.body.appendChild(link)
+                link.click()
+                document.body.removeChild(link)
+              }}
+            >
+              Download Audio
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
 }

package/dist/templates/web/ui-auth-ai/template/src/components/ai/video-generator.tsx

@@ -1,158 +1,157 @@
-'use client'
-
-import { useState } from 'react'
-import { useGenerateVideo, useJobStatus } from '@digilogiclabs/saas-factory-ai/react'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Textarea } from '@/components/ui/textarea'
-import { JobProgress } from '@digilogiclabs/saas-factory-ai/react'
-
-export function VideoGenerator() {
-  const [prompt, setPrompt] = useState('')
-  const [style, setStyle] = useState('realistic')
-  const [duration, setDuration] = useState(10)
-  const [resolution, setResolution] = useState('720p')
-  const [jobId, setJobId] = useState<string | null>(null)
-  const [videoUrl, setVideoUrl] = useState<string | null>(null)
-  
-  const { generate, loading, error } = useGenerateVideo()
-  const { status } = useJobStatus(jobId)
-
-  const handleGenerate = async () => {
-    if (!prompt.trim()) return
-    
-    try {
-      const result = await generate(prompt, {
-        style,
-        durationSec: duration,
-        resolution,
-        format: 'mp4'
-      })
-      setJobId(result.jobId)
-      setVideoUrl(null)
-    } catch (err) {
-      console.error('Video generation failed:', err)
-    }
-  }
-
-  const handleJobComplete = (result: any) => {
-    if (result.url) {
-      setVideoUrl(result.url)
-    }
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="grid grid-cols-1 gap-4">
-        <div>
-          <Label htmlFor="video-prompt">Video Description</Label>
-          <Textarea
-            id="video-prompt"
-            value={prompt}
-            onChange={(e) => setPrompt(e.target.value)}
-            placeholder="Describe the video you want to generate in detail..."
-            className="mt-1 min-h-[100px]"
-          />
-        </div>
-        
-        <div className="grid grid-cols-3 gap-4">
-          <div>
-            <Label htmlFor="video-style">Style</Label>
-            <Select value={style} onValueChange={setStyle}>
-              <SelectTrigger className="mt-1">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="realistic">Realistic</SelectItem>
-                <SelectItem value="animated">Animated</SelectItem>
-                <SelectItem value="cinematic">Cinematic</SelectItem>
-                <SelectItem value="artistic">Artistic</SelectItem>
-                <SelectItem value="documentary">Documentary</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          
-          <div>
-            <Label htmlFor="video-duration">Duration (seconds)</Label>
-            <Input
-              id="video-duration"
-              type="number"
-              value={duration}
-              onChange={(e) => setDuration(parseInt(e.target.value) || 10)}
-              min={5}
-              max={60}
-              className="mt-1"
-            />
-          </div>
-          
-          <div>
-            <Label htmlFor="video-resolution">Resolution</Label>
-            <Select value={resolution} onValueChange={setResolution}>
-              <SelectTrigger className="mt-1">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="480p">480p (SD)</SelectItem>
-                <SelectItem value="720p">720p (HD)</SelectItem>
-                <SelectItem value="1080p">1080p (Full HD)</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-      </div>
-
-      <div className="flex justify-center">
-        <Button
-          onClick={handleGenerate}
-          disabled={loading || !prompt.trim() || !!jobId}
-          className="px-8"
-        >
-          {loading ? 'Starting Generation...' : 'Generate Video'}
-        </Button>
-      </div>
-
-      {error && (
-        <div className="p-4 bg-red-50 border border-red-200 rounded-md">
-          <p className="text-sm text-red-600">{error.message}</p>
-        </div>
-      )}
-
-      {jobId && (
-        <div className="space-y-4">
-          <JobProgress 
-            jobId={jobId}
-            onComplete={handleJobComplete}
-            className="p-4 bg-gray-50 rounded-md"
-          />
-        </div>
-      )}
-
-      {videoUrl && (
-        <div className="p-4 bg-green-50 border border-green-200 rounded-md">
-          <h4 className="font-medium text-green-800 mb-3">Generated Video</h4>
-          <video controls className="w-full rounded-md" style={{ maxHeight: '400px' }}>
-            <source src={videoUrl} type="video/mp4" />
-            Your browser does not support the video element.
-          </video>
-          <div className="mt-3">
-            <Button
-              variant="outline"
-              onClick={() => {
-                const link = document.createElement('a')
-                link.href = videoUrl
-                link.download = 'generated-video.mp4'
-                document.body.appendChild(link)
-                link.click()
-                document.body.removeChild(link)
-              }}
-            >
-              Download Video
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
-  )
+'use client'
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+// Using native select for simplicity
+import { Textarea } from '@/components/ui/textarea'
+
+// TODO: Replace with your AI SDK hooks
+function useGenerateVideo() {
+  return { generate: async (_prompt: string, _opts?: Record<string, unknown>) => ({ jobId: '' }), loading: false, error: null as string | null }
+}
+function useJobStatus(_id: string | null) {
+  return { status: null as string | null }
+}
+function JobProgress({ jobId, onComplete, className }: { jobId?: string; onComplete?: (result: unknown) => void; className?: string; status?: string | null }) {
+  return status ? <div className="text-sm text-muted-foreground">Status: {status}</div> : null
+}
+
+export function VideoGenerator() {
+  const [prompt, setPrompt] = useState('')
+  const [style, setStyle] = useState('realistic')
+  const [duration, setDuration] = useState(10)
+  const [resolution, setResolution] = useState('720p')
+  const [jobId, setJobId] = useState<string | null>(null)
+  const [videoUrl, setVideoUrl] = useState<string | null>(null)
+  
+  const { generate, loading, error } = useGenerateVideo()
+  const { status } = useJobStatus(jobId)
+
+  const handleGenerate = async () => {
+    if (!prompt.trim()) return
+    
+    try {
+      const result = await generate(prompt, {
+        style,
+        durationSec: duration,
+        resolution,
+        format: 'mp4'
+      })
+      setJobId(result.jobId)
+      setVideoUrl(null)
+    } catch (err) {
+      console.error('Video generation failed:', err)
+    }
+  }
+
+  const handleJobComplete = (result: any) => {
+    if (result.url) {
+      setVideoUrl(result.url)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 gap-4">
+        <div>
+          <Label htmlFor="video-prompt">Video Description</Label>
+          <Textarea
+            id="video-prompt"
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            placeholder="Describe the video you want to generate in detail..."
+            className="mt-1 min-h-[100px]"
+          />
+        </div>
+        
+        <div className="grid grid-cols-3 gap-4">
+          <div>
+            <Label htmlFor="video-style">Style</Label>
+            <select value={style} onChange={(e) => setStyle(e.target.value)} className="mt-1 flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+              <option value="realistic">Realistic</option>
+              <option value="animated">Animated</option>
+              <option value="cinematic">Cinematic</option>
+              <option value="artistic">Artistic</option>
+              <option value="documentary">Documentary</option>
+            </select>
+          </div>
+          
+          <div>
+            <Label htmlFor="video-duration">Duration (seconds)</Label>
+            <Input
+              id="video-duration"
+              type="number"
+              value={duration}
+              onChange={(e) => setDuration(parseInt(e.target.value) || 10)}
+              min={5}
+              max={60}
+              className="mt-1"
+            />
+          </div>
+          
+          <div>
+            <Label htmlFor="video-resolution">Resolution</Label>
+            <select value={resolution} onChange={(e) => setResolution(e.target.value)} className="mt-1 flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
+              <option value="480p">480p (SD)</option>
+              <option value="720p">720p (HD)</option>
+              <option value="1080p">1080p (Full HD)</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex justify-center">
+        <Button
+          onClick={handleGenerate}
+          disabled={loading || !prompt.trim() || !!jobId}
+          className="px-8"
+        >
+          {loading ? 'Starting Generation...' : 'Generate Video'}
+        </Button>
+      </div>
+
+      {error && (
+        <div className="p-4 bg-red-50 border border-red-200 rounded-md">
+          <p className="text-sm text-red-600">{error}</p>
+        </div>
+      )}
+
+      {jobId && (
+        <div className="space-y-4">
+          <JobProgress 
+            jobId={jobId}
+            onComplete={handleJobComplete}
+            className="p-4 bg-muted rounded-md"
+          />
+        </div>
+      )}
+
+      {videoUrl && (
+        <div className="p-4 bg-green-50 border border-green-200 rounded-md">
+          <h4 className="font-medium text-green-800 mb-3">Generated Video</h4>
+          <video controls className="w-full rounded-md" style={{ maxHeight: '400px' }}>
+            <source src={videoUrl} type="video/mp4" />
+            Your browser does not support the video element.
+          </video>
+          <div className="mt-3">
+            <Button
+              variant="outline"
+              onClick={() => {
+                const link = document.createElement('a')
+                link.href = videoUrl
+                link.download = 'generated-video.mp4'
+                document.body.appendChild(link)
+                link.click()
+                document.body.removeChild(link)
+              }}
+            >
+              Download Video
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
 }