feat: enhance integrations overview with search functionality and related integrations display
This commit is contained in:
Usman Baig
@@ -1,12 +1,49 @@
|
||||
'use client'
|
||||
|
||||
/**
|
||||
* @file Integrations overview page with search, grouped by category.
|
||||
*
|
||||
* Displays all 50 integrations in a filterable grid.
|
||||
* When the search query returns no results, a "Missing something?" card is shown.
|
||||
*/
|
||||
|
||||
import { useState, useMemo } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { ArrowRightIcon } from '@ciphera-net/ui'
|
||||
import { getGroupedIntegrations } from '@/lib/integrations'
|
||||
import {
|
||||
integrations,
|
||||
categoryLabels,
|
||||
categoryOrder,
|
||||
type IntegrationCategory,
|
||||
} from '@/lib/integrations'
|
||||
|
||||
export default function IntegrationsPage() {
|
||||
const groups = getGroupedIntegrations()
|
||||
const [query, setQuery] = useState('')
|
||||
|
||||
// * Filter integrations by name, description, or category label
|
||||
const filteredGroups = useMemo(() => {
|
||||
const q = query.toLowerCase().trim()
|
||||
|
||||
const filtered = q
|
||||
? integrations.filter(
|
||||
(i) =>
|
||||
i.name.toLowerCase().includes(q) ||
|
||||
i.description.toLowerCase().includes(q) ||
|
||||
categoryLabels[i.category].toLowerCase().includes(q),
|
||||
)
|
||||
: integrations
|
||||
|
||||
return categoryOrder
|
||||
.map((cat) => ({
|
||||
category: cat as IntegrationCategory,
|
||||
label: categoryLabels[cat],
|
||||
items: filtered.filter((i) => i.category === cat),
|
||||
}))
|
||||
.filter((g) => g.items.length > 0)
|
||||
}, [query])
|
||||
|
||||
const hasResults = filteredGroups.length > 0
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
|
||||
@@ -25,85 +62,167 @@ export default function IntegrationsPage() {
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="text-center mb-16"
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6">
|
||||
Integrations
|
||||
</h1>
|
||||
<p className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto leading-relaxed">
|
||||
<p className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto leading-relaxed mb-8">
|
||||
Connect Pulse with your favorite frameworks and platforms in minutes.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{groups.map((group) => (
|
||||
<div key={group.category} className="mb-12">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="text-lg font-semibold text-neutral-500 dark:text-neutral-400 mb-6 tracking-wide uppercase"
|
||||
>
|
||||
{group.label}
|
||||
</motion.h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{group.items.map((integration, i) => (
|
||||
<motion.div
|
||||
key={integration.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: i * 0.1 }}
|
||||
>
|
||||
<Link
|
||||
href={`/integrations/${integration.id}`}
|
||||
className="group relative p-8 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-2xl hover:border-brand-orange/50 dark:hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl block focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl group-hover:scale-110 transition-transform duration-300">
|
||||
{integration.icon}
|
||||
</div>
|
||||
<ArrowRightIcon className="w-5 h-5 text-neutral-400 group-hover:text-brand-orange transition-colors" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">
|
||||
{integration.name}
|
||||
</h3>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 leading-relaxed mb-4">
|
||||
{integration.description}
|
||||
</p>
|
||||
<span className="text-sm font-medium text-brand-orange opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1">
|
||||
View Guide <span aria-hidden="true">→</span>
|
||||
</span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
{/* * --- Search Input --- */}
|
||||
<div className="relative max-w-md mx-auto">
|
||||
<div className="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
|
||||
<svg
|
||||
className="w-5 h-5 text-neutral-400"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={2}
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search integrations..."
|
||||
className="w-full pl-12 pr-10 py-3 bg-white/70 dark:bg-neutral-900/70 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-xl text-neutral-900 dark:text-white placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/50 focus:border-brand-orange/50 transition-all"
|
||||
/>
|
||||
{query && (
|
||||
<button
|
||||
onClick={() => setQuery('')}
|
||||
className="absolute inset-y-0 right-0 flex items-center pr-4 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors"
|
||||
aria-label="Clear search"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* * Request Integration Card */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="max-w-md mx-auto p-8 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
|
||||
>
|
||||
<h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">
|
||||
Missing something?
|
||||
</h3>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 text-sm mb-4">
|
||||
Let us know which integration you'd like to see next.
|
||||
</p>
|
||||
<a
|
||||
href="mailto:support@ciphera.net"
|
||||
className="text-sm font-medium text-brand-orange hover:underline focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
|
||||
>
|
||||
Request Integration
|
||||
</a>
|
||||
</motion.div>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
{hasResults ? (
|
||||
<motion.div
|
||||
key="results"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
{filteredGroups.map((group) => (
|
||||
<div key={group.category} className="mb-12">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="text-lg font-semibold text-neutral-500 dark:text-neutral-400 mb-6 tracking-wide uppercase"
|
||||
>
|
||||
{group.label}
|
||||
</motion.h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{group.items.map((integration, i) => (
|
||||
<motion.div
|
||||
key={integration.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: i * 0.05 }}
|
||||
>
|
||||
<Link
|
||||
href={`/integrations/${integration.id}`}
|
||||
className="group relative p-8 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-2xl hover:border-brand-orange/50 dark:hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl block focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl group-hover:scale-110 transition-transform duration-300">
|
||||
{integration.icon}
|
||||
</div>
|
||||
<ArrowRightIcon className="w-5 h-5 text-neutral-400 group-hover:text-brand-orange transition-colors" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">
|
||||
{integration.name}
|
||||
</h3>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 leading-relaxed mb-4">
|
||||
{integration.description}
|
||||
</p>
|
||||
<span className="text-sm font-medium text-brand-orange opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1">
|
||||
View Guide <span aria-hidden="true">→</span>
|
||||
</span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
) : (
|
||||
// * --- No Results: "Missing something?" card ---
|
||||
<motion.div
|
||||
key="no-results"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="max-w-md mx-auto mt-8 p-10 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
|
||||
>
|
||||
<div className="p-4 bg-neutral-100 dark:bg-neutral-800 rounded-full mb-4">
|
||||
<svg className="w-8 h-8 text-neutral-400" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">
|
||||
Missing something?
|
||||
</h3>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 text-sm mb-1">
|
||||
No integrations found for “{query}”.
|
||||
</p>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 text-sm mb-5">
|
||||
Let us know which integration you'd like to see next.
|
||||
</p>
|
||||
<a
|
||||
href="mailto:support@ciphera.net"
|
||||
className="inline-flex items-center gap-2 px-5 py-2.5 bg-brand-orange text-white font-medium rounded-lg hover:bg-brand-orange/90 transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
|
||||
>
|
||||
Request Integration
|
||||
</a>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* * Request Integration Card — always shown when there ARE results */}
|
||||
{hasResults && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="max-w-md mx-auto mt-12 p-8 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
|
||||
>
|
||||
<h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">
|
||||
Missing something?
|
||||
</h3>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 text-sm mb-4">
|
||||
Let us know which integration you'd like to see next.
|
||||
</p>
|
||||
<a
|
||||
href="mailto:support@ciphera.net"
|
||||
className="text-sm font-medium text-brand-orange hover:underline focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
|
||||
>
|
||||
Request Integration
|
||||
</a>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user