ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

refactor: replace router navigation with Link component for site creation and improve UI consistency in HomePage and SiteList components

Browse Source
This commit is contained in:
Usman Baig
2026-01-19 15:54:54 +01:00
parent 5b18fc17d8
commit d0a13adf36
2 changed files with 25 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/page.tsx
View File

@@ -1,16 +1,15 @@
'use client'
import Link from 'next/link'
import { useAuth } from '@/lib/auth/context'
import { initiateOAuthFlow, initiateSignupFlow } from '@/lib/api/oauth'
import LoadingOverlay from '@/components/LoadingOverlay'
import SiteList from '@/components/sites/SiteList'
import { Button } from '@ciphera-net/ui'
import { BarChartIcon, LockClosedIcon, LightningBoltIcon } from '@radix-ui/react-icons'
import { useRouter } from 'next/navigation'
export default function HomePage() {
const { user, loading } = useAuth()
const router = useRouter()
if (loading) {
return <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Ciphera Analytics" />
@@ -91,19 +90,13 @@ export default function HomePage() {
}
return (
<div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8">
<div className="mx-auto max-w-5xl p-6">
<div className="mb-8 flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-neutral-900 dark:text-white mb-2">
Your Sites
</h1>
<p className="text-neutral-600 dark:text-neutral-400">
Manage your analytics sites and view insights
</p>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white">Your Sites</h1>
<p className="mt-1 text-sm text-neutral-500 dark:text-neutral-400">Manage your analytics sites and view insights.</p>
</div>
<Button onClick={() => router.push('/sites/new')}>
+ Add New Site
</Button>
<Link href="/sites/new" className="btn-primary text-sm">Add New Site</Link>
</div>
<SiteList />
</div>

58
components/sites/SiteList.tsx
View File

@@ -1,17 +1,15 @@
'use client'
import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
import { listSites, deleteSite, type Site } from '@/lib/api/sites'
import { toast } from 'sonner'
import LoadingOverlay from '../LoadingOverlay'
import { Button } from '@ciphera-net/ui'
import { BarChartIcon, TrashIcon, PlusIcon } from '@radix-ui/react-icons'
import { BarChartIcon } from '@radix-ui/react-icons'
export default function SiteList() {
const [sites, setSites] = useState<Site[]>([])
const [loading, setLoading] = useState(true)
const router = useRouter()
useEffect(() => {
loadSites()
@@ -50,14 +48,9 @@ export default function SiteList() {
if (sites.length === 0) {
return (
<div className="text-center py-12">
<p className="text-neutral-600 dark:text-neutral-400 mb-4">No sites yet. Create your first site to get started.</p>
<Button
onClick={() => router.push('/sites/new')}
>
<PlusIcon className="w-4 h-4 mr-2" />
Create Site
</Button>
<div className="rounded-lg border border-dashed border-neutral-300 dark:border-neutral-700 p-12 text-center">
<h3 className="text-lg font-medium text-neutral-900 dark:text-white">No sites yet</h3>
<p className="mt-2 text-sm text-neutral-500 dark:text-neutral-400">Create your first site to get started.</p>
</div>
)
}
@@ -67,41 +60,28 @@ export default function SiteList() {
{sites.map((site) => (
<div
key={site.id}
className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 hover:shadow-lg transition-shadow"
className="flex flex-col rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 shadow-sm p-6 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200"
>
<h3 className="text-xl font-semibold mb-2 text-neutral-900 dark:text-white">
{site.name}
</h3>
<p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
{site.domain}
</p>
<div className="flex gap-2">
<Button
onClick={() => router.push(`/sites/${site.id}`)}
className="flex-1 text-sm"
<h3 className="text-xl font-semibold mb-2 text-neutral-900 dark:text-white">{site.name}</h3>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mb-4">{site.domain}</p>
<div className="flex gap-2 mt-auto">
<Link
href={`/sites/${site.id}`}
className="btn-primary text-sm inline-flex items-center justify-center gap-2 flex-1"
>
<BarChartIcon className="w-4 h-4 mr-2" />
<BarChartIcon className="w-4 h-4" />
View Dashboard
</Button>
<Button
variant="secondary"
</Link>
<button
type="button"
onClick={() => handleDelete(site.id)}
className="text-sm px-4"
className="shrink-0 text-sm text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 py-2 px-2"
>
<TrashIcon className="w-4 h-4" />
</Button>
Delete
</button>
</div>
</div>
))}
<button
onClick={() => router.push('/sites/new')}
className="bg-white dark:bg-neutral-900 border-2 border-dashed border-neutral-300 dark:border-neutral-700 rounded-xl p-6 hover:border-brand-orange transition-colors text-neutral-600 dark:text-neutral-400 w-full h-full min-h-[160px] flex items-center justify-center"
>
<div className="text-center">
<div className="text-2xl mb-2 mx-auto w-8 h-8 rounded-full bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center">+</div>
<div>Add New Site</div>
</div>
</button>
</div>
)
}