[V0_FILE]typescriptreact:file="app/settings/data-integrations/components/integrations-list.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Database, Cloud, Server } from "lucide-react" import { SnowflakeConnectModal } from "./snowflake-connect-modal" // Available integrations data const availableIntegrations = [ { id: "snowflake", name: "Snowflake", description: "Connect to your Snowflake data warehouse", icon: Database, popular: true, }, { id: "google-cloud", name: "Google Cloud", description: "Connect to Google Cloud Platform services", icon: Cloud, popular: false, }, { id: "aws", name: "Amazon Web Services", description: "Connect to AWS data services", icon: Server, popular: true, }, ] export function IntegrationsList() { const [isModalOpen, setIsModalOpen] = useState(false) return (

{availableIntegrations.map((integration) => (

{integration.name}

{integration.popular && ( Popular )}

{integration.description}

))}

) } [V0_FILE]typescriptreact:file="app/settings/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { SettingsSidebar } from "./components/settings-sidebar" export const metadata: Metadata = { title: "Settings", description: "Manage your account settings and preferences", } export default function SettingsLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/settings/data-integrations/components/create-data-share-dialog-updated.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { z } from "zod" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Loader2 } from "lucide-react" const formSchema = z.object({ name: z.string().min(2, { message: "Name must be at least 2 characters.", }), description: z.string().optional(), source: z.string({ required_error: "Please select a source.", }), destination: z.string().min(2, { message: "Destination must be at least 2 characters.", }), syncFrequency: z.enum(["hourly", "daily", "weekly"]), }) interface CreateDataShareDialogProps { open: boolean onOpenChange: (open: boolean) => void integrationId: string } export function CreateDataShareDialog({ open, onOpenChange, integrationId }: CreateDataShareDialogProps) { const router = useRouter() const [isSubmitting, setIsSubmitting] = useState(false) const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { name: "", description: "", source: "", destination: "", syncFrequency: "daily", }, }) async function onSubmit(values: z.infer) { setIsSubmitting(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1500)) console.log("Creating data share:", values) setIsSubmitting(false) onOpenChange(false) form.reset() // In a real app, you would refresh the data or redirect router.refresh() } return (