Skip to content

improve layout #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vasanthakumarsf3389 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

improve layout #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ function App() {
return (
<BrowserRouter>
<Navbar />
<main className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
<main className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/installation" element={<Installation />} />
Expand Down
52 changes: 49 additions & 3 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
Expand All @@ -26,16 +30,58 @@ a {
text-align: left !important;
}

/* Smooth page transitions */
main {
animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@layer components {
.btn-primary {
@apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-medium;
@apply px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg hover:shadow-lg transition-all font-semibold hover:scale-105;
}

.btn-secondary {
@apply px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors font-medium;
@apply px-4 py-2 bg-white/10 backdrop-blur-xl text-white rounded-lg hover:bg-white/20 transition-all font-semibold border border-white/20 hover:border-white/40;
}

.card {
@apply bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow p-6;
@apply bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-xl rounded-xl shadow-lg hover:shadow-2xl transition-all p-6 border border-white/10 hover:border-blue-400/50;
}

.gradient-text {
@apply bg-gradient-to-r from-blue-400 via-cyan-300 to-blue-400 bg-clip-text text-transparent;
}

.glass-effect {
@apply bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-xl border border-white/10 rounded-2xl;
}
}

/* Smooth animations */
@layer utilities {
.animate-fade-in {
animation: fadeIn 0.3s ease-in;
}

.group-hover\:scale-105:hover {
transform: scale(1.05);
}
}

/* Global smooth transitions */
* {
transition-property: background-color, border-color, color, fill, stroke, opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
}
2 changes: 1 addition & 1 deletion src/components/GridDataAPI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useState, useCallback } from 'react';
import { Grid, Columns, Column, TextAlign, ClipMode, type ColumnTemplateProps, type FilterSettings, type SortSettings, ColumnType, VirtualDomType } from '@syncfusion/react-grid';
import { Grid, Columns, Column, TextAlign, ClipMode, type ColumnTemplateProps, type SortSettings, ColumnType, VirtualDomType } from '@syncfusion/react-grid';
import { type EmployeeData, generateEmployeeData } from '@/app/data2';
import styles from '@/app/scrolling-basic.module.css';

Expand Down
48 changes: 31 additions & 17 deletions src/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,55 @@ export default function Navbar() {
const location = useLocation()

const navItems = [
{ href: '/', label: 'Home' },
{ href: '/installation', label: 'Setup' },
{ href: '/data-source', label: 'Data Source' },
{ href: '/visual-template', label: 'Core Features' },
{ href: '/pagination', label: 'Paging' },
{ href: '/virtualization', label: 'Virtual Scroll' },
{ href: '/livedata', label: 'Live Data' },
{ href: '/', label: 'Home', icon: '🏠' },
{ href: '/installation', label: 'Setup', icon: '⚙️' },
{ href: '/data-source', label: 'Data Source', icon: '📊' },
{ href: '/visual-template', label: 'Features', icon: '✨' },
{ href: '/pagination', label: 'Paging', icon: '📄' },
{ href: '/virtualization', label: 'Performance', icon: '⚡' },
{ href: '/livedata', label: 'Live Data', icon: '📈' },
]

return (
<nav className="sticky top-0 z-50 bg-white shadow-lg border-b-2 border-blue-200">
<nav className="sticky top-0 z-50 bg-white shadow-xl border-b border-gray-200">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16">
<div className="flex justify-between items-center h-20">
{/* Brand Section */}
<div className="flex items-center space-x-2">
<div className="w-2 h-8 bg-gradient-to-b from-blue-500 to-blue-600 rounded-full"></div>
<span className="text-lg font-bold text-gray-900">React Grid</span>
</div>
<Link to="/" className="flex items-center space-x-3 group">
<div className="relative w-10 h-10 bg-gradient-to-br from-blue-500 via-blue-600 to-indigo-600 rounded-xl shadow-lg transform group-hover:scale-105 transition-transform duration-200 flex items-center justify-center">
<span className="text-white font-bold text-lg">⚛</span>
</div>
<div>
<span className="text-xl font-black text-gray-900 tracking-tight">Syncfusion</span>
<span className="text-xs font-semibold text-blue-600 block">React Grid Demo</span>
</div>
</Link>

{/* Navigation Items */}
<div className="flex items-center space-x-1">
{navItems.map((item) => (
<Link
key={item.href}
to={item.href}
className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
className={`px-3 py-2 rounded-lg text-sm font-semibold transition-all duration-300 flex items-center gap-1.5 ${
location.pathname === item.href
? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg'
: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg scale-105'
: 'text-gray-700 hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 hover:text-blue-600'
}`}
>
{item.label}
<span>{item.icon}</span>
<span className="hidden md:inline">{item.label}</span>
</Link>
))}
</div>

{/* CTA Button */}
<a
href="#"
className="ml-4 px-6 py-2.5 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold rounded-xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-200 whitespace-nowrap"
>
Get Started →
</a>
</div>
</div>
</nav>
Expand Down
1 change: 0 additions & 1 deletion src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import '@syncfusion/react-base/styles/material.css'
Expand Down
113 changes: 81 additions & 32 deletions src/pages/Datasource.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,54 +2,82 @@ import GridDataAPI from "@/components/GridDataAPI";

export default function DataSource() {
return (
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-16 px-4 sm:px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<div className="mb-12">
<div className="inline-block bg-teal-100 text-teal-700 px-4 py-2 rounded-full text-sm font-semibold mb-6">
High-Scale Data Management
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 py-20 px-4 sm:px-6 lg:px-8">
<div className="max-w-7xl mx-auto">
{/* Header */}
<div className="mb-16">
<div className="inline-flex items-center gap-2 bg-teal-500/20 backdrop-blur-xl px-6 py-3 rounded-full border border-teal-400/50 mb-8">
<span className="w-2 h-2 bg-teal-400 rounded-full animate-pulse"></span>
<span className="text-sm font-semibold text-teal-100">📊 High-Scale Data Management</span>
</div>
<h1 className="text-5xl font-bold text-gray-900 mb-6">Server-Side Virtualization</h1>
<p className="text-lg text-gray-700 max-w-4xl mb-8 leading-relaxed">
<h1 className="text-5xl lg:text-6xl font-black text-white mb-6 leading-tight">Server-Side <span className="bg-gradient-to-r from-teal-400 to-cyan-400 bg-clip-text text-transparent">Virtualization</span></h1>
<p className="text-lg text-gray-300 max-w-4xl mb-12 leading-relaxed">
Powerfully handles extremely large datasets (millions of rows) by loading only visible data from the server. The grid detects scroll position, calculates required row range, sends a request, and renders received rows without re-fetching previously viewed data when caching is enabled.
</p>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="bg-white p-6 rounded-lg shadow-md border-l-4 border-teal-500">
<h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
<span className="text-xl">⚡</span> Performance Benefits
{/* Benefits & Features Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-xl p-8 rounded-2xl border border-teal-400/50 hover:border-teal-300 transition-all duration-300 hover:scale-105">
<h3 className="font-bold text-white mb-4 text-lg flex items-center gap-2">
<span className="text-2xl">⚡</span> Performance Benefits
</h3>
<ul className="text-sm text-gray-600 space-y-2">
<li>• Manages only page size rows in memory at any time</li>
<li>• Scales regardless of backend capacity</li>
<li>• Supports live data streams & real-time updates</li>
<li>• Handles datasets exceeding browser DOM limits</li>
<ul className="text-sm text-gray-300 space-y-3">
<li className="flex items-center gap-3">
<span className="w-1.5 h-1.5 bg-teal-400 rounded-full"></span>
Manages only page size rows in memory at any time
</li>
<li className="flex items-center gap-3">
<span className="w-1.5 h-1.5 bg-teal-400 rounded-full"></span>
Scales regardless of backend capacity
</li>
<li className="flex items-center gap-3">
<span className="w-1.5 h-1.5 bg-teal-400 rounded-full"></span>
Supports live data streams & real-time updates
</li>
<li className="flex items-center gap-3">
<span className="w-1.5 h-1.5 bg-teal-400 rounded-full"></span>
Handles datasets exceeding browser DOM limits
</li>
</ul>
</div>
<div className="bg-white p-6 rounded-lg shadow-md border-l-4 border-teal-400">
<h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
<span className="text-xl">🔍</span> Key Features
<div className="bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-xl p-8 rounded-2xl border border-teal-400/50 hover:border-teal-300 transition-all duration-300 hover:scale-105">
<h3 className="font-bold text-white mb-4 text-lg flex items-center gap-2">
<span className="text-2xl">🔍</span> Key Features
</h3>
<ul className="text-sm text-gray-600 space-y-2">
<li>• Intelligent scroll detection</li>
<li>• Automatic row range calculation</li>
<li>• Smart server request batching</li>
<li>• Optional caching mechanism</li>
<ul className="text-sm text-gray-300 space-y-3">
<li className="flex items-center gap-3">
<span className="w-1.5 h-1.5 bg-teal-400 rounded-full"></span>
Intelligent scroll detection
</li>
<li className="flex items-center gap-3">
<span className="w-1.5 h-1.5 bg-teal-400 rounded-full"></span>
Automatic row range calculation
</li>
<li className="flex items-center gap-3">
<span className="w-1.5 h-1.5 bg-teal-400 rounded-full"></span>
Smart server request batching
</li>
<li className="flex items-center gap-3">
<span className="w-1.5 h-1.5 bg-teal-400 rounded-full"></span>
Optional caching mechanism
</li>
</ul>
</div>
</div>
</div>

{/* Divider */}
<div className="h-1 bg-gradient-to-r from-teal-200 via-teal-400 to-teal-200 rounded-full mb-8"></div>
<div className="h-1 bg-gradient-to-r from-teal-500/20 via-teal-400 to-teal-500/20 rounded-full mb-12"></div>

{/* Grid Preview Area */}
<div className="bg-white rounded-2xl shadow-2xl overflow-hidden border border-teal-100 hover:shadow-3xl transition-shadow duration-300">
<div className="p-8">
<div className="mb-6">
<div className="flex items-center gap-3 mb-4">
<div className="w-1 h-8 bg-gradient-to-b from-teal-400 to-teal-600 rounded"></div>
<div className="bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-2xl rounded-3xl overflow-hidden border border-white/10 shadow-2xl hover:shadow-3xl transition-shadow duration-300">
<div className="p-8 md:p-12">
<div className="mb-8">
<div className="flex items-center gap-4 mb-4">
<div className="w-1 h-10 bg-gradient-to-b from-teal-400 to-teal-600 rounded-full"></div>
<div>
<h2 className="text-2xl font-bold text-gray-900">Live Server-Side Virtualization Demo</h2>
<h2 className="text-3xl font-bold text-white">Live Server-Side Virtualization Demo</h2>
<p className="text-gray-300 mt-1">Scroll through thousands of rows with on-demand data loading</p>
</div>
</div>
</div>
Expand Down Expand Up @@ -80,7 +108,28 @@ export default function DataSource() {
color: #9333ea;
}
`}</style>
<GridDataAPI />
<div className="bg-white/5 rounded-xl overflow-hidden border border-white/10">
<GridDataAPI />
</div>
</div>
</div>

{/* Technical Details */}
<div className="mt-16 bg-gradient-to-r from-teal-600/20 to-cyan-600/20 backdrop-blur-xl p-8 md:p-12 rounded-2xl border border-teal-400/30">
<h2 className="text-2xl font-bold text-white mb-6">🎯 How It Works</h2>
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
{[
{ step: '1', title: 'Scroll Detection', desc: 'Monitors user scroll position' },
{ step: '2', title: 'Calculate Range', desc: 'Determines needed row range' },
{ step: '3', title: 'Load Data', desc: 'Fetches from server on demand' },
{ step: '4', title: 'Render', desc: 'Displays visible rows instantly' },
].map((item, idx) => (
<div key={idx} className="bg-white/5 rounded-xl p-6 border border-white/10 text-center">
<div className="w-10 h-10 bg-teal-500/30 rounded-full flex items-center justify-center mx-auto mb-4 text-teal-300 font-bold">{item.step}</div>
<h3 className="font-bold text-white mb-2">{item.title}</h3>
<p className="text-sm text-gray-300">{item.desc}</p>
</div>
))}
</div>
</div>
</div>
Expand Down
Loading