Yves Gugger
c5abba5d2f
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
CI / Frontend Build (push) Has been cancelled
CI / Backend Lint (push) Has been cancelled
CI / Backend Tests (push) Has been cancelled
CI / Docker Build (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
Deploy / Build & Push Images (push) Has been cancelled
Deploy / Deploy to Server (push) Has been cancelled
Deploy / Notify (push) Has been cancelled
435 lines
18 KiB
TypeScript
435 lines
18 KiB
TypeScript
'use client'
|
|
|
|
import { useCallback, useEffect, useMemo, useState } from 'react'
|
|
import clsx from 'clsx'
|
|
import {
|
|
ExternalLink,
|
|
Loader2,
|
|
Search,
|
|
Shield,
|
|
Sparkles,
|
|
Eye,
|
|
TrendingUp,
|
|
RefreshCw,
|
|
Filter,
|
|
ChevronRight,
|
|
Globe,
|
|
Zap,
|
|
X
|
|
} from 'lucide-react'
|
|
import { api } from '@/lib/api'
|
|
import { useAnalyzePanelStore } from '@/lib/analyze-store'
|
|
import { useStore } from '@/lib/store'
|
|
|
|
// ============================================================================
|
|
// HELPERS
|
|
// ============================================================================
|
|
|
|
function normalizeKeyword(s: string) {
|
|
return s.trim().replace(/\s+/g, ' ')
|
|
}
|
|
|
|
// ============================================================================
|
|
// COMPONENT
|
|
// ============================================================================
|
|
|
|
export function TrendSurferTab({ showToast }: { showToast: (message: string, type?: any) => void }) {
|
|
const openAnalyze = useAnalyzePanelStore((s) => s.open)
|
|
const addDomain = useStore((s) => s.addDomain)
|
|
|
|
// Trends State
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [geo, setGeo] = useState('US')
|
|
const [trends, setTrends] = useState<Array<{ title: string; approx_traffic?: string | null; link?: string | null }>>([])
|
|
const [selected, setSelected] = useState<string>('')
|
|
const [refreshing, setRefreshing] = useState(false)
|
|
|
|
// Keyword Check State
|
|
const [keywordInput, setKeywordInput] = useState('')
|
|
const [keywordFocused, setKeywordFocused] = useState(false)
|
|
const [availability, setAvailability] = useState<Array<{ domain: string; status: string; is_available: boolean | null }>>([])
|
|
const [checking, setChecking] = useState(false)
|
|
|
|
// Typo Check State
|
|
const [brand, setBrand] = useState('')
|
|
const [brandFocused, setBrandFocused] = useState(false)
|
|
const [typos, setTypos] = useState<Array<{ domain: string; status: string }>>([])
|
|
const [typoLoading, setTypoLoading] = useState(false)
|
|
|
|
// Tracking State
|
|
const [tracking, setTracking] = useState<string | null>(null)
|
|
|
|
const track = useCallback(
|
|
async (domain: string) => {
|
|
if (tracking) return
|
|
setTracking(domain)
|
|
try {
|
|
await addDomain(domain)
|
|
showToast(`Tracked ${domain}`, 'success')
|
|
} catch (e) {
|
|
showToast(e instanceof Error ? e.message : 'Failed to track domain', 'error')
|
|
} finally {
|
|
setTracking(null)
|
|
}
|
|
},
|
|
[addDomain, showToast, tracking]
|
|
)
|
|
|
|
const loadTrends = useCallback(async (isRefresh = false) => {
|
|
if (isRefresh) setRefreshing(true)
|
|
setError(null)
|
|
try {
|
|
const res = await api.getHuntTrends(geo)
|
|
setTrends(res.items || [])
|
|
if (!selected && res.items?.[0]?.title) setSelected(res.items[0].title)
|
|
} catch (e) {
|
|
const msg = e instanceof Error ? e.message : String(e)
|
|
setError(msg)
|
|
showToast(msg, 'error')
|
|
setTrends([])
|
|
} finally {
|
|
if (isRefresh) setRefreshing(false)
|
|
}
|
|
}, [geo, selected, showToast])
|
|
|
|
useEffect(() => {
|
|
let cancelled = false
|
|
const run = async () => {
|
|
setLoading(true)
|
|
try {
|
|
await loadTrends()
|
|
} catch (e) {
|
|
if (!cancelled) setError(e instanceof Error ? e.message : String(e))
|
|
} finally {
|
|
if (!cancelled) setLoading(false)
|
|
}
|
|
}
|
|
run()
|
|
return () => { cancelled = true }
|
|
}, [loadTrends])
|
|
|
|
const keyword = useMemo(() => normalizeKeyword(keywordInput || selected || ''), [keywordInput, selected])
|
|
|
|
const runCheck = useCallback(async () => {
|
|
if (!keyword) return
|
|
setChecking(true)
|
|
try {
|
|
const kw = keyword.toLowerCase().replace(/\s+/g, '')
|
|
const res = await api.huntKeywords({ keywords: [kw], tlds: ['com', 'io', 'ai', 'net', 'org'] })
|
|
setAvailability(res.items.map((r) => ({ domain: r.domain, status: r.status, is_available: r.is_available })))
|
|
} catch (e) {
|
|
const msg = e instanceof Error ? e.message : 'Failed to check availability'
|
|
showToast(msg, 'error')
|
|
setAvailability([])
|
|
} finally {
|
|
setChecking(false)
|
|
}
|
|
}, [keyword, showToast])
|
|
|
|
const runTypos = useCallback(async () => {
|
|
const b = brand.trim()
|
|
if (!b) return
|
|
setTypoLoading(true)
|
|
try {
|
|
const res = await api.huntTypos({ brand: b, tlds: ['com'], limit: 50 })
|
|
setTypos(res.items.map((i) => ({ domain: i.domain, status: i.status })))
|
|
} catch (e) {
|
|
const msg = e instanceof Error ? e.message : 'Failed to run typo check'
|
|
showToast(msg, 'error')
|
|
setTypos([])
|
|
} finally {
|
|
setTypoLoading(false)
|
|
}
|
|
}, [brand, showToast])
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center py-20">
|
|
<Loader2 className="w-6 h-6 text-accent animate-spin" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Trends Header */}
|
|
<div className="border border-white/[0.08] bg-[#020202]">
|
|
<div className="px-4 py-3 border-b border-white/[0.08] flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 bg-accent/10 border border-accent/20 flex items-center justify-center">
|
|
<TrendingUp className="w-4 h-4 text-accent" />
|
|
</div>
|
|
<div>
|
|
<div className="text-sm font-bold text-white">Google Trends (24h)</div>
|
|
<div className="text-[10px] font-mono text-white/40">Real-time trending topics</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<select
|
|
value={geo}
|
|
onChange={(e) => setGeo(e.target.value)}
|
|
className="bg-white/[0.02] border border-white/10 px-2 py-1.5 text-xs font-mono text-white/70 outline-none focus:border-accent/40"
|
|
>
|
|
<option value="US">🇺🇸 US</option>
|
|
<option value="CH">🇨🇭 CH</option>
|
|
<option value="DE">🇩🇪 DE</option>
|
|
<option value="GB">🇬🇧 UK</option>
|
|
<option value="FR">🇫🇷 FR</option>
|
|
</select>
|
|
<button
|
|
onClick={() => loadTrends(true)}
|
|
disabled={refreshing}
|
|
className="w-8 h-8 flex items-center justify-center border border-white/10 text-white/30 hover:text-white hover:bg-white/5 transition-colors"
|
|
>
|
|
<RefreshCw className={clsx("w-4 h-4", refreshing && "animate-spin")} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{error ? (
|
|
<div className="p-4 text-xs font-mono text-red-400 bg-red-500/5">{error}</div>
|
|
) : (
|
|
<div className="p-3 flex flex-wrap gap-2 max-h-[200px] overflow-y-auto">
|
|
{trends.slice(0, 20).map((t) => {
|
|
const active = selected === t.title
|
|
return (
|
|
<button
|
|
key={t.title}
|
|
onClick={() => {
|
|
setSelected(t.title)
|
|
setKeywordInput('')
|
|
setAvailability([])
|
|
}}
|
|
className={clsx(
|
|
'px-3 py-2 border text-xs font-mono transition-all',
|
|
active
|
|
? 'border-accent bg-accent/10 text-accent'
|
|
: 'border-white/[0.08] text-white/60 hover:border-white/20 hover:text-white'
|
|
)}
|
|
>
|
|
<span className="truncate max-w-[150px] block">{t.title}</span>
|
|
{t.approx_traffic && (
|
|
<span className="text-[9px] text-white/30 block mt-0.5">{t.approx_traffic}</span>
|
|
)}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Keyword Availability Check */}
|
|
<div className="border border-white/[0.08] bg-[#020202]">
|
|
<div className="px-4 py-3 border-b border-white/[0.08] flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 bg-white/[0.02] border border-white/[0.08] flex items-center justify-center">
|
|
<Globe className="w-4 h-4 text-white/40" />
|
|
</div>
|
|
<div>
|
|
<div className="text-sm font-bold text-white">Domain Availability</div>
|
|
<div className="text-[10px] font-mono text-white/40">Check {keyword || 'keyword'} across TLDs</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4">
|
|
<div className="flex gap-2 mb-4">
|
|
<div className={clsx(
|
|
"flex-1 relative border transition-all",
|
|
keywordFocused ? "border-accent/50 bg-accent/[0.02]" : "border-white/[0.08] bg-white/[0.02]"
|
|
)}>
|
|
<div className="flex items-center">
|
|
<Search className={clsx("w-4 h-4 ml-3 transition-colors", keywordFocused ? "text-accent" : "text-white/30")} />
|
|
<input
|
|
value={keywordInput || selected}
|
|
onChange={(e) => setKeywordInput(e.target.value)}
|
|
onFocus={() => setKeywordFocused(true)}
|
|
onBlur={() => setKeywordFocused(false)}
|
|
placeholder="Type a keyword..."
|
|
className="flex-1 bg-transparent px-3 py-3 text-sm text-white placeholder:text-white/20 outline-none font-mono"
|
|
/>
|
|
{(keywordInput || selected) && (
|
|
<button
|
|
onClick={() => { setKeywordInput(''); setSelected(''); setAvailability([]) }}
|
|
className="p-3 text-white/30 hover:text-white"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={runCheck}
|
|
disabled={!keyword || checking}
|
|
className={clsx(
|
|
"px-4 py-3 text-xs font-bold uppercase tracking-wider transition-all",
|
|
!keyword || checking
|
|
? "bg-white/5 text-white/20"
|
|
: "bg-accent text-black hover:bg-white"
|
|
)}
|
|
>
|
|
{checking ? <Loader2 className="w-4 h-4 animate-spin" /> : "Check"}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Results Grid */}
|
|
{availability.length > 0 && (
|
|
<div className="space-y-px bg-white/[0.04] border border-white/[0.08]">
|
|
{availability.map((a) => (
|
|
<div key={a.domain} className="bg-[#020202] hover:bg-white/[0.02] transition-colors p-3 flex items-center justify-between">
|
|
<div className="flex items-center gap-3 min-w-0 flex-1">
|
|
<div className={clsx(
|
|
"w-2 h-2 rounded-full shrink-0",
|
|
a.status === 'available' ? "bg-accent" : "bg-white/20"
|
|
)} />
|
|
<button
|
|
onClick={() => openAnalyze(a.domain)}
|
|
className="text-sm font-mono text-white/70 hover:text-accent truncate text-left"
|
|
>
|
|
{a.domain}
|
|
</button>
|
|
</div>
|
|
<div className="flex items-center gap-2 shrink-0">
|
|
<span className={clsx(
|
|
"text-[10px] font-mono font-bold px-2 py-0.5",
|
|
a.status === 'available' ? "text-accent bg-accent/10" : "text-white/30 bg-white/5"
|
|
)}>
|
|
{a.status.toUpperCase()}
|
|
</span>
|
|
<button
|
|
onClick={() => track(a.domain)}
|
|
disabled={tracking === a.domain}
|
|
className="w-7 h-7 flex items-center justify-center border border-white/10 text-white/30 hover:text-white hover:bg-white/5 transition-colors"
|
|
>
|
|
{tracking === a.domain ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Eye className="w-3.5 h-3.5" />}
|
|
</button>
|
|
<button
|
|
onClick={() => openAnalyze(a.domain)}
|
|
className="w-7 h-7 flex items-center justify-center border border-white/10 text-white/30 hover:text-accent hover:border-accent/20 hover:bg-accent/10 transition-colors"
|
|
>
|
|
<Shield className="w-3.5 h-3.5" />
|
|
</button>
|
|
{a.status === 'available' && (
|
|
<a
|
|
href={`https://www.namecheap.com/domains/registration/results/?domain=${a.domain}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="h-7 px-2 bg-accent text-black text-[10px] font-bold uppercase flex items-center gap-1 hover:bg-white transition-colors"
|
|
>
|
|
Buy
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{availability.length === 0 && keyword && !checking && (
|
|
<div className="text-center py-8 border border-dashed border-white/[0.08]">
|
|
<Zap className="w-6 h-6 text-white/10 mx-auto mb-2" />
|
|
<p className="text-white/30 text-xs font-mono">Click "Check" to find available domains</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Typo Finder */}
|
|
<div className="border border-white/[0.08] bg-[#020202]">
|
|
<div className="px-4 py-3 border-b border-white/[0.08] flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 bg-white/[0.02] border border-white/[0.08] flex items-center justify-center">
|
|
<Sparkles className="w-4 h-4 text-white/40" />
|
|
</div>
|
|
<div>
|
|
<div className="text-sm font-bold text-white">Typo Finder</div>
|
|
<div className="text-[10px] font-mono text-white/40">Find available typos of big brands</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4">
|
|
<div className="flex gap-2 mb-4">
|
|
<div className={clsx(
|
|
"flex-1 relative border transition-all",
|
|
brandFocused ? "border-accent/50 bg-accent/[0.02]" : "border-white/[0.08] bg-white/[0.02]"
|
|
)}>
|
|
<div className="flex items-center">
|
|
<Sparkles className={clsx("w-4 h-4 ml-3 transition-colors", brandFocused ? "text-accent" : "text-white/30")} />
|
|
<input
|
|
value={brand}
|
|
onChange={(e) => setBrand(e.target.value)}
|
|
onFocus={() => setBrandFocused(true)}
|
|
onBlur={() => setBrandFocused(false)}
|
|
placeholder="e.g. Shopify, Amazon, Google..."
|
|
className="flex-1 bg-transparent px-3 py-3 text-sm text-white placeholder:text-white/20 outline-none font-mono"
|
|
/>
|
|
{brand && (
|
|
<button onClick={() => { setBrand(''); setTypos([]) }} className="p-3 text-white/30 hover:text-white">
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={runTypos}
|
|
disabled={!brand.trim() || typoLoading}
|
|
className={clsx(
|
|
"px-4 py-3 text-xs font-bold uppercase tracking-wider transition-all",
|
|
!brand.trim() || typoLoading
|
|
? "bg-white/5 text-white/20"
|
|
: "bg-white/10 text-white hover:bg-white/20"
|
|
)}
|
|
>
|
|
{typoLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : "Find"}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Typo Results Grid */}
|
|
{typos.length > 0 && (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
|
{typos.map((t) => (
|
|
<div key={t.domain} className="border border-white/10 bg-white/[0.02] px-3 py-2 flex items-center justify-between group hover:border-accent/20 transition-colors">
|
|
<button
|
|
onClick={() => openAnalyze(t.domain)}
|
|
className="text-xs font-mono text-white/70 group-hover:text-accent truncate text-left transition-colors"
|
|
>
|
|
{t.domain}
|
|
</button>
|
|
<div className="flex items-center gap-2 shrink-0">
|
|
<span className="text-[9px] font-mono text-accent bg-accent/10 px-1.5 py-0.5">
|
|
{t.status.toUpperCase()}
|
|
</span>
|
|
<button
|
|
onClick={() => track(t.domain)}
|
|
disabled={tracking === t.domain}
|
|
className="w-6 h-6 flex items-center justify-center border border-white/10 text-white/30 hover:text-white hover:bg-white/5 transition-colors"
|
|
>
|
|
{tracking === t.domain ? <Loader2 className="w-3 h-3 animate-spin" /> : <Eye className="w-3 h-3" />}
|
|
</button>
|
|
<a
|
|
href={`https://www.namecheap.com/domains/registration/results/?domain=${t.domain}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="w-6 h-6 flex items-center justify-center border border-white/10 text-white/30 hover:text-white hover:bg-white/5 transition-colors"
|
|
>
|
|
<ExternalLink className="w-3 h-3" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{typos.length === 0 && !typoLoading && (
|
|
<div className="text-xs font-mono text-white/30 text-center py-4">
|
|
Enter a brand name to find available typo domains
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|