IRGO-CO/nextjs-visual-docs-explorer
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>NextJS Components Visualized</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <style>9 @keyframes serverPulse {10 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }11 70% { box-shadow: 0 0 0 20px rgba(99, 102, 241, 0); }12 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }13 }14 @keyframes clientPulse {15 0% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.4); }16 70% { box-shadow: 0 0 0 20px rgba(236, 72, 153, 0); }17 100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); }18 }19 .monitor {20 aspect-ratio: 9/16;21 min-height: 600px;22 }23 .component-card {24 transition: all 0.3s ease;25 }26 .component-card:hover {27 transform: translateY(-5px);28 }29 </style>30</head>31<body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen flex items-center justify-center p-4">32 <div class="monitor bg-gray-800 rounded-xl shadow-2xl border-4 border-gray-700 p-6 w-full max-w-md relative overflow-hidden">33 <div class="absolute inset-0 bg-gradient-to-br from-transparent via-gray-900/20 to-transparent"></div>34 35 <div class="relative z-10 h-full flex flex-col">36 <div class="text-center mb-8">37 <h1 class="text-2xl font-bold text-indigo-300 mb-2">NextJS Components</h1>38 <div class="w-24 h-1 bg-indigo-500 mx-auto rounded-full"></div>39 </div>40 41 <div class="grid grid-cols-1 gap-6 flex-grow">42 <!-- Server Component -->43 <div class="component-card bg-gray-700/50 backdrop-blur-sm rounded-xl p-5 border-l-4 border-indigo-500 animate-pulse" style="animation: serverPulse 2s infinite;">44 <div class="flex items-start">45 <div class="bg-indigo-500/20 p-3 rounded-lg mr-4">46 <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-indigo-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">47 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />48 </svg>49 </div>50 <div>51 <h3 class="text-lg font-semibold text-indigo-100">Server Component</h3>52 <div class="mt-2 flex flex-wrap gap-1">53 <span class="px-2 py-1 text-xs rounded bg-indigo-900/50 text-indigo-200">Pre-rendered</span>54 <span class="px-2 py-1 text-xs rounded bg-indigo-900/50 text-indigo-200">Zero JS</span>55 <span class="px-2 py-1 text-xs rounded bg-indigo-900/50 text-indigo-200">Direct DB access</span>56 </div>57 </div>58 </div>59 <div class="mt-4">60 <div class="h-2 bg-gray-600 rounded-full w-full mb-1.5"></div>61 <div class="h-2 bg-gray-600 rounded-full w-5/6 mb-1.5"></div>62 <div class="h-2 bg-gray-600 rounded-full w-4/6"></div>63 </div>64 </div>65 66 <div class="flex items-center justify-center my-2">67 <div class="h-px bg-gray-600 w-full"></div>68 <div class="mx-4 text-gray-400 font-medium text-sm">VS</div>69 <div class="h-px bg-gray-600 w-full"></div>70 </div>71 72 <!-- Client Component -->73 <div class="component-card bg-gray-700/50 backdrop-blur-sm rounded-xl p-5 border-l-4 border-pink-500 animate-pulse" style="animation: clientPulse 2s infinite 0.5s;">74 <div class="flex items-start">75 <div class="bg-pink-500/20 p-3 rounded-lg mr-4">76 <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-pink-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">77 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />78 </svg>79 </div>80 <div>81 <h3 class="text-lg font-semibold text-pink-100">Client Component</h3>82 <div class="mt-2 flex flex-wrap gap-1">83 <span class="px-2 py-1 text-xs rounded bg-pink-900/50 text-pink-200">Interactive</span>84 <span class="px-2 py-1 text-xs rounded bg-pink-900/50 text-pink-200">useState/Effect</span>85 <span class="px-2 py-1 text-xs rounded bg-pink-900/50 text-pink-200">Browser APIs</span>86 </div>87 </div>88 </div>89 <div class="mt-4">90 <div class="h-2 bg-gray-600 rounded-full w-3/4 mb-1.5"></div>91 <div class="h-2 bg-gray-600 rounded-full w-1/2 mb-1.5"></div>92 <div class="h-2 bg-gray-600 rounded-full w-5/6"></div>93 </div>94 </div>95 </div>96 97 <div class="mt-8 pt-4 border-t border-gray-700 flex justify-center">98 <div class="text-xs text-gray-400 text-center">99 <p>Hover components for details</p>100 <div class="flex justify-center mt-2 space-x-4">101 <span class="inline-flex items-center"><span class="w-2 h-2 rounded-full bg-indigo-500 mr-1"></span> Server</span>102 <span class="inline-flex items-center"><span class="w-2 h-2 rounded-full bg-pink-500 mr-1"></span> Client</span>103 </div>104 </div>105 </div>106 </div>107 </div>108</body>109</html>110