61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
'use client'
|
|
import Shortcut from '@/components/shortcut'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Flame, Radius, Search } from 'lucide-react'
|
|
import { useEffect, useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { Item } from '@/lib/types'
|
|
import store from 'store2'
|
|
|
|
export default function Home() {
|
|
const router = useRouter()
|
|
const [shortcuts, setShortcuts] = useState<Item[]>([])
|
|
const [splashText, setSplashText] = useState<string>('')
|
|
|
|
useEffect(() => {
|
|
|
|
fetch('/splash.json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const randomIndex = Math.floor(Math.random() * data.length);
|
|
setSplashText(data[randomIndex].splash);
|
|
})
|
|
.catch(error => console.error('Error fetching splash text:', error));
|
|
|
|
store.set('shortcuts', [], false)
|
|
const data: Item[] = store('shortcuts')
|
|
setShortcuts(data)
|
|
}, [])
|
|
|
|
return (
|
|
<div>
|
|
<div className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center gap-6">
|
|
<div className="flex items-center gap-2">
|
|
<Radius className="h-16 w-16 rotate-180" />
|
|
<h1 className="text-6xl font-semibold">Radius</h1>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="relative">
|
|
<Input
|
|
className="w-[26rem] px-9 h-12 rounded-lg"
|
|
placeholder="Search the web"
|
|
onKeyDown={(e) => {
|
|
if (e.key !== 'Enter') return
|
|
router.push(`/go/${btoa(e.currentTarget.value)}`)
|
|
}}
|
|
/>
|
|
<Search className="h-4 w-4 text-muted-foreground absolute top-1/2 -translate-y-1/2 left-3" />
|
|
</div>
|
|
</div>
|
|
<p style={{ fontSize: '1rem', fontWeight: 'normal', marginTop: '0rem' }}>{splashText}</p>
|
|
{shortcuts.length > 0 && (
|
|
<div className="py-2 flex flex-wrap gap-2 justify-center">
|
|
{shortcuts.map((shortcut: Item) => {
|
|
return <Shortcut key={shortcut.title} image={shortcut.image} title={shortcut.title} url={shortcut.url} />
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|