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

feat(dashboard): add hover effects to stats blocks and external link icon to content list

Browse Source
This commit is contained in:
Usman Baig
2026-01-18 17:03:16 +01:00
parent 2fc623c14e
commit a92a938c29
4 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/dashboard/ContentStats.tsx
View File

@@ -4,6 +4,7 @@ import { useState } from 'react'
import { formatNumber } from '@/lib/utils/format' import { formatNumber } from '@/lib/utils/format'
import { TopPage } from '@/lib/api/stats' import { TopPage } from '@/lib/api/stats'
import { Modal } from '@ciphera-net/ui' import { Modal } from '@ciphera-net/ui'
import { FiExternalLink } from 'react-icons/fi'
interface ContentStatsProps { interface ContentStatsProps {
topPages: TopPage[] topPages: TopPage[]
@@ -85,15 +86,16 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain }
{hasData ? ( {hasData ? (
<> <>
{displayedData.map((page, index) => ( {displayedData.map((page, index) => (
<div key={index} className="flex items-center justify-between h-7"> <div key={index} className="flex items-center justify-between h-7 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
<div className="flex-1 truncate text-neutral-900 dark:text-white"> <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center">
<a <a
href={`https://${domain.replace(/^https?:\/\//, '')}${page.path}`} href={`https://${domain.replace(/^https?:\/\//, '')}${page.path}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="hover:underline" className="hover:underline flex items-center"
> >
{page.path} {page.path}
<FiExternalLink className="w-3 h-3 ml-2 text-neutral-400 opacity-0 group-hover:opacity-100 transition-opacity" />
</a> </a>
</div> </div>
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4"> <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
@@ -102,7 +104,7 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain }
</div> </div>
))} ))}
{Array.from({ length: emptySlots }).map((_, i) => ( {Array.from({ length: emptySlots }).map((_, i) => (
<div key={`empty-${i}`} className="h-7" aria-hidden="true" /> <div key={`empty-${i}`} className="h-7 px-2 -mx-2" aria-hidden="true" />
))} ))}
</> </>
) : ( ) : (
@@ -120,15 +122,16 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain }
> >
<div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2"> <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
{data.map((page, index) => ( {data.map((page, index) => (
<div key={index} className="flex items-center justify-between py-1"> <div key={index} className="flex items-center justify-between py-1 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
<div className="flex-1 truncate text-neutral-900 dark:text-white"> <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center">
<a <a
href={`https://${domain.replace(/^https?:\/\//, '')}${page.path}`} href={`https://${domain.replace(/^https?:\/\//, '')}${page.path}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="hover:underline" className="hover:underline flex items-center"
> >
{page.path} {page.path}
<FiExternalLink className="w-3 h-3 ml-2 text-neutral-400 opacity-0 group-hover:opacity-100 transition-opacity" />
</a> </a>
</div> </div>
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4"> <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">

6
components/dashboard/Locations.tsx
View File

@@ -119,7 +119,7 @@ export default function Locations({ countries, cities, regions }: LocationProps)
hasData ? ( hasData ? (
<> <>
{displayedData.map((item, index) => ( {displayedData.map((item, index) => (
<div key={index} className="flex items-center justify-between h-7"> <div key={index} className="flex items-center justify-between h-7 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3"> <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
{activeTab === 'countries' && <span className="shrink-0">{getFlagComponent(item.country)}</span>} {activeTab === 'countries' && <span className="shrink-0">{getFlagComponent(item.country)}</span>}
{activeTab !== 'countries' && <span className="shrink-0">{getFlagComponent(item.country)}</span>} {activeTab !== 'countries' && <span className="shrink-0">{getFlagComponent(item.country)}</span>}
@@ -136,7 +136,7 @@ export default function Locations({ countries, cities, regions }: LocationProps)
</div> </div>
))} ))}
{Array.from({ length: emptySlots }).map((_, i) => ( {Array.from({ length: emptySlots }).map((_, i) => (
<div key={`empty-${i}`} className="h-7" aria-hidden="true" /> <div key={`empty-${i}`} className="h-7 px-2 -mx-2" aria-hidden="true" />
))} ))}
</> </>
) : ( ) : (
@@ -155,7 +155,7 @@ export default function Locations({ countries, cities, regions }: LocationProps)
> >
<div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2"> <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
{(data as any[]).map((item, index) => ( {(data as any[]).map((item, index) => (
<div key={index} className="flex items-center justify-between py-1"> <div key={index} className="flex items-center justify-between py-1 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3"> <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
<span className="shrink-0">{getFlagComponent(item.country)}</span> <span className="shrink-0">{getFlagComponent(item.country)}</span>
<span className="truncate"> <span className="truncate">

6
components/dashboard/TechSpecs.tsx
View File

@@ -80,7 +80,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions }:
{hasData ? ( {hasData ? (
<> <>
{displayedData.map((item, index) => ( {displayedData.map((item, index) => (
<div key={index} className="flex items-center justify-between h-7"> <div key={index} className="flex items-center justify-between h-7 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3"> <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
{item.icon && <span className="text-lg">{item.icon}</span>} {item.icon && <span className="text-lg">{item.icon}</span>}
<span className="truncate">{item.name === 'Unknown' ? 'Unknown' : item.name}</span> <span className="truncate">{item.name === 'Unknown' ? 'Unknown' : item.name}</span>
@@ -91,7 +91,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions }:
</div> </div>
))} ))}
{Array.from({ length: emptySlots }).map((_, i) => ( {Array.from({ length: emptySlots }).map((_, i) => (
<div key={`empty-${i}`} className="h-7" aria-hidden="true" /> <div key={`empty-${i}`} className="h-7 px-2 -mx-2" aria-hidden="true" />
))} ))}
</> </>
) : ( ) : (
@@ -109,7 +109,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions }:
> >
<div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2"> <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
{data.map((item, index) => ( {data.map((item, index) => (
<div key={index} className="flex items-center justify-between py-1"> <div key={index} className="flex items-center justify-between py-1 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3"> <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
{item.icon && <span className="text-lg">{item.icon}</span>} {item.icon && <span className="text-lg">{item.icon}</span>}
<span className="truncate">{item.name === 'Unknown' ? 'Unknown' : item.name}</span> <span className="truncate">{item.name === 'Unknown' ? 'Unknown' : item.name}</span>

6
components/dashboard/TopReferrers.tsx
View File

@@ -40,7 +40,7 @@ export default function TopReferrers({ referrers }: TopReferrersProps) {
{hasData ? ( {hasData ? (
<> <>
{displayedReferrers.map((ref, index) => ( {displayedReferrers.map((ref, index) => (
<div key={index} className="flex items-center justify-between h-7"> <div key={index} className="flex items-center justify-between h-7 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3"> <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
<span className="text-lg flex-shrink-0">{getReferrerIcon(ref.referrer)}</span> <span className="text-lg flex-shrink-0">{getReferrerIcon(ref.referrer)}</span>
<span className="truncate" title={ref.referrer}>{ref.referrer}</span> <span className="truncate" title={ref.referrer}>{ref.referrer}</span>
@@ -51,7 +51,7 @@ export default function TopReferrers({ referrers }: TopReferrersProps) {
</div> </div>
))} ))}
{Array.from({ length: emptySlots }).map((_, i) => ( {Array.from({ length: emptySlots }).map((_, i) => (
<div key={`empty-${i}`} className="h-7" aria-hidden="true" /> <div key={`empty-${i}`} className="h-7 px-2 -mx-2" aria-hidden="true" />
))} ))}
</> </>
) : ( ) : (
@@ -69,7 +69,7 @@ export default function TopReferrers({ referrers }: TopReferrersProps) {
> >
<div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2"> <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
{referrers?.map((ref, index) => ( {referrers?.map((ref, index) => (
<div key={index} className="flex items-center justify-between py-1"> <div key={index} className="flex items-center justify-between py-1 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors">
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3"> <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
<span className="text-lg flex-shrink-0">{getReferrerIcon(ref.referrer)}</span> <span className="text-lg flex-shrink-0">{getReferrerIcon(ref.referrer)}</span>
<span className="truncate" title={ref.referrer}>{ref.referrer}</span> <span className="truncate" title={ref.referrer}>{ref.referrer}</span>