Skip to content

Commit e2d5ea6

Browse files
mmaxencemmaxence
committed
feat: improve UX Patterns layout and code preview functionality
- Restore previous preview frame design with better centering and positioning: - Restored black frame with rounded corners and proper shadow - Fixed centering with flex justify-center and proper max-width - Maintained 9:16 aspect ratio with 400px height for realistic mobile appearance - Restored smartphone icon and 'Preview coming soon' text - Reorganize layout structure: - Move code preview to left column under description and tags - Keep live preview in right column for better visual balance - Improve spacing and organization with space-y-4 for left column - Add interactive copy functionality: - Implement copy-to-clipboard with proper error handling - Add visual feedback with 'Copied!' text that reverts after 3 seconds - Include smooth tap animation with whileTap scale effect - Track copied state per pattern to avoid conflicts - Enhance code preview styling to match website brand: - Use muted/10 background with border-border/50 for consistency - Apply muted-foreground text color matching site theme - Maintain monospace font with proper line height - Add subtle border and rounded corners for professional appearance - Improve overall user experience: - Better visual hierarchy with organized left/right column layout - Consistent styling that matches the rest of the website - Interactive feedback for better user engagement - Clean, professional code presentation
1 parent 9fc384d commit e2d5ea6

File tree

1 file changed

+67
-52
lines changed

1 file changed

+67
-52
lines changed

‎src/app/product/UX-patterns/page.tsx‎

Lines changed: 67 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { useState } from 'react';
44
import { motion, AnimatePresence } from 'framer-motion';
55
import { useLanguage } from '@/contexts/LanguageContext';
6-
import { MousePointer, ChevronDown, CheckCircle, XCircle, ArrowLeft, Copy } from 'lucide-react';
6+
import { MousePointer, Smartphone, ChevronDown, CheckCircle, XCircle, ArrowLeft, Copy } from 'lucide-react';
77
import { useRouter } from 'next/navigation';
88
import Header from '@/components/layout/Header';
99
import Footer from '@/components/layout/Footer';
@@ -15,11 +15,22 @@ const UXPatternsPage = () => {
1515
const { t } = useLanguage();
1616
const router = useRouter();
1717
const [openPattern, setOpenPattern] = useState<string | null>(null);
18+
const [copiedPattern, setCopiedPattern] = useState<string | null>(null);
1819

1920
const handlePatternToggle = (patternId: string) => {
2021
setOpenPattern(openPattern === patternId ? null : patternId);
2122
};
2223

24+
const handleCopyCode = async (patternId: string, code: string) => {
25+
try {
26+
await navigator.clipboard.writeText(code);
27+
setCopiedPattern(patternId);
28+
setTimeout(() => setCopiedPattern(null), 3000);
29+
} catch (err) {
30+
console.error('Failed to copy code:', err);
31+
}
32+
};
33+
2334
const sections = [
2435
{ id: 'interaction-patterns', label: 'Interaction Patterns' },
2536
{ id: 'ui-kit', label: 'UI Kit' },
@@ -387,74 +398,78 @@ const ComingSoonPattern = () => (
387398
>
388399
<div className="px-4 pb-4">
389400
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
390-
{/* Description */}
391-
<div className="space-y-3">
392-
<h5 className="text-sm font-medium text-white">
393-
Description
394-
</h5>
395-
<p className="text-muted-foreground leading-relaxed text-sm">
396-
{pattern.description}
397-
</p>
398-
399-
{/* Tags */}
400-
<div className="flex flex-wrap gap-2 mt-3">
401-
{pattern.tags.map((tag, tagIndex) => (
402-
<span
403-
key={tagIndex}
404-
className="px-2 py-1 bg-primary/20 text-primary text-xs rounded-full border border-primary/30"
405-
>
406-
{tag}
407-
</span>
408-
))}
401+
{/* Left Column - Description, Tags, and Code */}
402+
<div className="space-y-4">
403+
{/* Description */}
404+
<div className="space-y-3">
405+
<h5 className="text-sm font-medium text-white">
406+
Description
407+
</h5>
408+
<p className="text-muted-foreground leading-relaxed text-sm">
409+
{pattern.description}
410+
</p>
411+
412+
{/* Tags */}
413+
<div className="flex flex-wrap gap-2 mt-3">
414+
{pattern.tags.map((tag, tagIndex) => (
415+
<span
416+
key={tagIndex}
417+
className="px-2 py-1 bg-primary/20 text-primary text-xs rounded-full border border-primary/30"
418+
>
419+
{tag}
420+
</span>
421+
))}
422+
</div>
409423
</div>
424+
425+
{/* Code Preview */}
426+
{pattern.code && (
427+
<div className="space-y-3">
428+
<div className="flex items-center justify-between">
429+
<h5 className="text-sm font-medium text-white">
430+
Code Example
431+
</h5>
432+
<motion.button
433+
onClick={() => handleCopyCode(pattern.id, pattern.code)}
434+
className="flex items-center space-x-1 text-xs text-muted-foreground hover:text-white transition-colors"
435+
whileTap={{ scale: 0.95 }}
436+
>
437+
<Copy className="w-3 h-3" />
438+
<span>{copiedPattern === pattern.id ? 'Copied!' : 'Copy'}</span>
439+
</motion.button>
440+
</div>
441+
<div className="bg-muted/10 border border-border/50 rounded-lg p-4 overflow-x-auto">
442+
<pre className="text-xs text-muted-foreground font-mono leading-relaxed">
443+
<code>{pattern.code}</code>
444+
</pre>
445+
</div>
446+
</div>
447+
)}
410448
</div>
411449

412-
{/* Live Preview */}
450+
{/* Right Column - Live Preview */}
413451
<div className="space-y-3">
414452
<h5 className="text-sm font-medium text-white">
415453
Live Preview
416454
</h5>
417-
<div className="relative">
455+
<div className="relative flex justify-center">
418456
{/* Mobile Frame with 9:16 ratio (vertical phone) */}
419-
<div className="w-full max-w-[180px] mx-auto bg-gray-900 rounded-[2rem] p-1 shadow-2xl border border-gray-700">
420-
<div className="bg-gray-800 rounded-[1.5rem] h-[320px] flex items-center justify-center" style={{ aspectRatio: '9/16' }}>
421-
<div className="text-center space-y-2 px-3">
422-
<div className="w-6 h-6 bg-gray-600 rounded-full mx-auto mb-2"></div>
423-
<p className="text-xs text-gray-400 break-words font-medium">
457+
<div className="w-full max-w-[200px] bg-black rounded-[1.5rem] p-1 shadow-2xl">
458+
<div className="bg-muted/20 rounded-[1.25rem] h-[400px] flex items-center justify-center" style={{ aspectRatio: '9/16' }}>
459+
<div className="text-center space-y-3 px-4">
460+
<Smartphone className="w-8 h-8 text-muted-foreground mx-auto" />
461+
<p className="text-sm text-muted-foreground break-words font-medium">
424462
{pattern.title}
425463
</p>
426-
<p className="text-xs text-gray-500">
427-
Preview
464+
<p className="text-xs text-muted-foreground/70">
465+
Preview coming soon
428466
</p>
429467
</div>
430468
</div>
431469
</div>
432470
</div>
433471
</div>
434472
</div>
435-
436-
{/* Code Preview */}
437-
{pattern.code && (
438-
<div className="mt-6 space-y-3">
439-
<div className="flex items-center justify-between">
440-
<h5 className="text-sm font-medium text-white">
441-
Code Example
442-
</h5>
443-
<button
444-
onClick={() => navigator.clipboard.writeText(pattern.code)}
445-
className="flex items-center space-x-1 text-xs text-muted-foreground hover:text-white transition-colors"
446-
>
447-
<Copy className="w-3 h-3" />
448-
<span>Copy</span>
449-
</button>
450-
</div>
451-
<div className="bg-gray-900 rounded-lg p-4 overflow-x-auto">
452-
<pre className="text-xs text-gray-300 font-mono leading-relaxed">
453-
<code>{pattern.code}</code>
454-
</pre>
455-
</div>
456-
</div>
457-
)}
458473
</div>
459474
</motion.div>
460475
)}

0 commit comments

Comments
 (0)