35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
import { useState, type FC } from 'react'
|
|
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/HoverCard'
|
|
import { Button } from '@/components/ui/Button'
|
|
import getWebSiteInfo from '@/utils/getWebsiteInfo'
|
|
|
|
const Header: FC = ({ ...props }) => {
|
|
const [websiteInfo] = useState(getWebSiteInfo())
|
|
|
|
return (
|
|
<div className="flex h-12 items-center px-4 shadow-sm 2xl:h-14">
|
|
<img className="h-8 w-8 overflow-hidden rounded-full" src={websiteInfo.icon} />
|
|
<HoverCard>
|
|
<HoverCardTrigger asChild>
|
|
<Button className="overflow-hidden text-xl" variant="link">
|
|
<h1 className="truncate">{websiteInfo.hostname}</h1>
|
|
</Button>
|
|
</HoverCardTrigger>
|
|
<HoverCardContent className="w-80">
|
|
<div className="flex justify-between space-x-4">
|
|
<img className="h-14 w-14 flex-shrink-0 overflow-hidden rounded-full" src={websiteInfo.icon} />
|
|
<div className="space-y-1">
|
|
<h4 className="text-sm font-semibold">{websiteInfo.title}</h4>
|
|
<p className="text-xs text-slate-500">{websiteInfo.description}</p>
|
|
</div>
|
|
</div>
|
|
</HoverCardContent>
|
|
</HoverCard>
|
|
<div className="ml-auto flex-shrink-0 text-sm text-slate-500">Online 99</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
Header.displayName = 'Header'
|
|
|
|
export default Header
|