47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import React from 'react'
|
|
|
|
import { Button } from '@janhq/uikit'
|
|
|
|
import { CopyIcon, CheckIcon } from 'lucide-react'
|
|
|
|
import { useClipboard } from '@/hooks/useClipboard'
|
|
|
|
// TODO @Louis help add missing information device specs
|
|
const DeviceSpecs = () => {
|
|
const userAgent = window.navigator.userAgent
|
|
const clipboard = useClipboard({ timeout: 1000 })
|
|
|
|
return (
|
|
<>
|
|
<div className="absolute -top-11 right-2">
|
|
<Button
|
|
themes="outline"
|
|
className="bg-white"
|
|
onClick={() => {
|
|
clipboard.copy(userAgent ?? '')
|
|
}}
|
|
>
|
|
<div className="flex items-center space-x-2">
|
|
{clipboard.copied ? (
|
|
<>
|
|
<CheckIcon size={14} className="text-green-600" />
|
|
<span>Copying...</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<CopyIcon size={14} />
|
|
<span>Copy All</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
<div>
|
|
<p className="leading-relaxed">{userAgent}</p>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default DeviceSpecs
|