fix diagram formatting
This commit is contained in:
Raven Scott
@@ -65,7 +65,7 @@ const colorClasses = {
|
||||
};
|
||||
|
||||
export default function P2NSFlowDiagram() {
|
||||
// Group steps into rows of 2
|
||||
// Group steps into rows of 2 (last row may have 1 item)
|
||||
const rows: (typeof steps)[] = [];
|
||||
for (let i = 0; i < steps.length; i += 2) {
|
||||
rows.push(steps.slice(i, i + 2));
|
||||
@@ -76,65 +76,100 @@ export default function P2NSFlowDiagram() {
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{rows.map((row, rowIndex) => {
|
||||
const isLastRow = rowIndex === rows.length - 1;
|
||||
const isOddLastRow = isLastRow && row.length === 1;
|
||||
|
||||
const isSingleItemRow = row.length === 1;
|
||||
|
||||
return (
|
||||
<div key={rowIndex} className="flex flex-col items-center">
|
||||
<div className="grid grid-cols-2 gap-6 md:gap-8 w-full">
|
||||
{row.map((step, stepIndex) => {
|
||||
const Icon = step.icon;
|
||||
const globalIndex = rowIndex * 2 + stepIndex;
|
||||
const isLastInRow = stepIndex === row.length - 1;
|
||||
|
||||
return (
|
||||
<div key={step.id} className="flex items-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: globalIndex * 0.08 }}
|
||||
className="flex items-center gap-4 flex-1 bg-white dark:bg-gray-800 rounded-xl p-4 shadow-md hover:shadow-lg border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:scale-[1.02]"
|
||||
>
|
||||
<div className={`p-3 rounded-xl border-2 ${colorClasses[step.color as keyof typeof colorClasses]} shadow-sm flex-shrink-0 transition-all duration-300 hover:scale-110`}>
|
||||
<Icon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-base font-bold text-gray-900 dark:text-white mb-1 leading-tight">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 leading-snug">
|
||||
{step.description}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{!isLastInRow && (
|
||||
{/* Use a centered single column for the very last step */}
|
||||
{isLastRow && isSingleItemRow ? (
|
||||
<div className="w-full flex justify-center">
|
||||
<div className="max-w-md w-full">
|
||||
{row.map((step) => {
|
||||
const Icon = step.icon;
|
||||
const globalIndex = steps.indexOf(step);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
key={step.id}
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: globalIndex * 0.08 + 0.2 }}
|
||||
className="flex-shrink-0 mx-2 md:mx-4"
|
||||
transition={{ duration: 0.4, delay: globalIndex * 0.08 }}
|
||||
className="flex items-center gap-4 bg-white dark:bg-gray-800 rounded-xl p-4 shadow-md hover:shadow-lg border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:scale-[1.02]"
|
||||
>
|
||||
<ArrowRight className="h-5 w-5 text-gray-500 dark:text-gray-400" strokeWidth={2.5} />
|
||||
<div className={`p-3 rounded-xl border-2 ${colorClasses[step.color as keyof typeof colorClasses]} shadow-sm flex-shrink-0 transition-all duration-300 hover:scale-110`}>
|
||||
<Icon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-base font-bold text-gray-900 dark:text-white mb-1 leading-tight">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 leading-snug">
|
||||
{step.description}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{/* Empty cell for odd last row to center the single item */}
|
||||
{isOddLastRow && <div></div>}
|
||||
</div>
|
||||
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* Normal 2-column rows */
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 w-full">
|
||||
{row.map((step, stepIndex) => {
|
||||
const Icon = step.icon;
|
||||
const globalIndex = rowIndex * 2 + stepIndex;
|
||||
const isLastInRow = stepIndex === row.length - 1;
|
||||
|
||||
return (
|
||||
<div key={step.id} className="flex items-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: globalIndex * 0.08 }}
|
||||
className="flex items-center gap-4 flex-1 bg-white dark:bg-gray-800 rounded-xl p-4 shadow-md hover:shadow-lg border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:scale-[1.02]"
|
||||
>
|
||||
<div className={`p-3 rounded-xl border-2 ${colorClasses[step.color as keyof typeof colorClasses]} shadow-sm flex-shrink-0 transition-all duration-300 hover:scale-110`}>
|
||||
<Icon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-base font-bold text-gray-900 dark:text-white mb-1 leading-tight">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 leading-snug">
|
||||
{step.description}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{!isLastInRow && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: globalIndex * 0.08 + 0.2 }}
|
||||
className="flex-shrink-0 mx-4"
|
||||
>
|
||||
<ArrowRight className="h-5 w-5 text-gray-500 dark:text-gray-400" strokeWidth={2.5} />
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Down arrow between rows */}
|
||||
{!isLastRow && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: (rowIndex * 2 + 1) * 0.08 + 0.2 }}
|
||||
className="my-4 md:my-6"
|
||||
className="my-6 md:my-8"
|
||||
>
|
||||
<ArrowDown className="h-6 w-6 text-gray-500 dark:text-gray-400" strokeWidth={2.5} />
|
||||
<ArrowDown className="h-7 w-7 text-gray-500 dark:text-gray-400" strokeWidth={2.5} />
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
@@ -143,5 +178,4 @@ export default function P2NSFlowDiagram() {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user