You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.8 KiB
71 lines
1.8 KiB
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Button } from '@/components/ui/button'
|
|
import { QrCode, Copy, AlertTriangle, Download, Smartphone } from 'lucide-react'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog'
|
|
import { useToast } from '@/hooks/use-toast'
|
|
import QRCode from 'react-qr-code'
|
|
import GenerateApiKey from './generate-api-key'
|
|
|
|
export default function GetStartedCard() {
|
|
const [isGenerateKeyModalOpen, setIsGenerateKeyModalOpen] = useState(false)
|
|
const [isConfirmGenerateKeyModalOpen, setIsConfirmGenerateKeyModalOpen] =
|
|
useState(false)
|
|
const [apiKey, setApiKey] = useState('')
|
|
|
|
const handleConfirmGenerateKey = () => {
|
|
|
|
setIsConfirmGenerateKeyModalOpen(true)
|
|
}
|
|
|
|
const handleGenerateKey = () => {
|
|
setIsConfirmGenerateKeyModalOpen(false)
|
|
// Simulate API key generation
|
|
const newKey = 'sk_live_' + Math.random().toString(36).substring(2, 15)
|
|
setApiKey(newKey)
|
|
setIsGenerateKeyModalOpen(true)
|
|
}
|
|
const { toast } = useToast()
|
|
|
|
const handleCopyKey = () => {
|
|
navigator.clipboard.writeText(apiKey)
|
|
toast({
|
|
title: 'API key copied to clipboard',
|
|
})
|
|
}
|
|
|
|
const copyApiKey = () => {
|
|
navigator.clipboard.writeText(apiKey)
|
|
toast({
|
|
title: 'API key copied to clipboard',
|
|
})
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Get Started</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className='space-y-4'>
|
|
<p className='text-muted-foreground'>
|
|
To start using TextBee, you need to generate an API key and connect
|
|
your device.
|
|
</p>
|
|
<GenerateApiKey/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
|
|
</>
|
|
)
|
|
}
|