33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { useState } from "react"
|
||
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||
|
|
import { Button } from "@/components/ui/button"
|
||
|
|
import { QrCode } from "lucide-react"
|
||
|
|
|
||
|
|
export function BindDouyinQRCode() {
|
||
|
|
const [isOpen, setIsOpen] = useState(false)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Button variant="ghost" size="icon" onClick={() => setIsOpen(true)}>
|
||
|
|
<QrCode className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||
|
|
<DialogContent className="sm:max-w-md">
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle>绑定抖音号</DialogTitle>
|
||
|
|
</DialogHeader>
|
||
|
|
<div className="flex flex-col items-center p-4">
|
||
|
|
<div className="w-64 h-64 bg-gray-100 rounded-lg flex items-center justify-center">
|
||
|
|
<img src="/placeholder.svg?height=256&width=256" alt="抖音二维码" className="w-full h-full" />
|
||
|
|
</div>
|
||
|
|
<p className="mt-4 text-sm text-gray-600">请使用抖音APP扫描二维码进行绑定</p>
|
||
|
|
</div>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|