34 lines
2.0 KiB
TypeScript
34 lines
2.0 KiB
TypeScript
|
import { Bell } from 'lucide-react';
|
||
|
|
import { Search } from 'lucide-react';
|
||
|
|
import { Input } from '@/components/ui/input';
|
||
|
|
|
||
|
|
export default function Navbar() {
|
||
|
|
return (
|
||
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', padding: '24px 40px', background: 'white', width: '100%', height: '75px' }}>
|
||
|
|
<div style={{ flex: 1, display: 'flex', justifyContent: 'flex-end', marginRight: 120 }}>
|
||
|
|
<div style={{ display: 'flex', alignItems: 'center', background: '#F2F4F8', borderRadius: '10px', padding: '8px 16px', minWidth: 350 }}>
|
||
|
|
<Search size={20} style={{ color: '#6B7280', marginRight: 8 }} />
|
||
|
|
<Input
|
||
|
|
type="text"
|
||
|
|
placeholder="Search ebooks, folders, and uploads"
|
||
|
|
className="bg-transparent text-[#6B7280] text-base w-[250px] focus-visible:ring-0 focus-visible:ring-offset-0 border-0 focus:border-0"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
|
||
|
|
<div style={{ position: 'relative', cursor: 'pointer' }}>
|
||
|
|
<Bell size={22} style={{ color: '#222' }} />
|
||
|
|
<span style={{ position: 'absolute', top: -2, right: 0, width: 9, height: 9, background: '#FF3B30', borderRadius: '50%', border: '1.5px solid white' }} />
|
||
|
|
</div>
|
||
|
|
<div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
|
||
|
|
<div style={{ width: 32, height: 32, borderRadius: '50%', background: '#FFD600', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600, color: '#222', fontSize: 14, position: 'relative', zIndex: 1 }}>
|
||
|
|
D
|
||
|
|
</div>
|
||
|
|
<div style={{ width: 32, height: 32, borderRadius: '50%', background: 'white', border: '1px solid #E5E7EB', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, color: '#222', cursor: 'pointer', marginLeft: -8, position: 'relative', zIndex: 0 }}>
|
||
|
|
+
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|