website refactor
This commit is contained in:
174
apps/website/ui/WorkflowMockup.tsx
Normal file
174
apps/website/ui/WorkflowMockup.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
'use client';
|
||||
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Box } from '@/ui/primitives/Box';
|
||||
import { Surface } from '@/ui/primitives/Surface';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
|
||||
import { CheckCircle2, LucideIcon } from 'lucide-react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
export interface WorkflowStep {
|
||||
id: number;
|
||||
icon: LucideIcon;
|
||||
title: string;
|
||||
description: string;
|
||||
intent: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
|
||||
}
|
||||
|
||||
interface WorkflowMockupProps {
|
||||
steps: WorkflowStep[];
|
||||
}
|
||||
|
||||
export function WorkflowMockup({ steps }: WorkflowMockupProps) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
const [activeStep, setActiveStep] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
setIsMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMounted) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setActiveStep((prev) => (prev + 1) % steps.length);
|
||||
}, 3000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [isMounted, steps.length]);
|
||||
|
||||
if (!isMounted) {
|
||||
return (
|
||||
<Box position="relative" fullWidth>
|
||||
<Surface variant="muted" rounded="none" padding={6}>
|
||||
<Box display="flex" justifyContent="between" gap={2}>
|
||||
{steps.map((step) => (
|
||||
<Box key={step.id} display="flex" alignItems="center" justifyContent="center" flexDirection="col">
|
||||
<Box width="10" height="10" rounded="none" bg="var(--ui-color-bg-base)" style={{ border: '1px solid var(--ui-color-border-default)' }} display="flex" alignItems="center" justifyContent="center" mb={2}>
|
||||
<Text variant={step.intent}>
|
||||
<Icon icon={step.icon} size={4} />
|
||||
</Text>
|
||||
</Box>
|
||||
<Text size="xs" weight="bold" variant="high" uppercase>{step.title}</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Surface>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box position="relative" fullWidth>
|
||||
<Surface variant="muted" rounded="none" padding={6} overflow="hidden">
|
||||
{/* Connection Lines */}
|
||||
<Box position="absolute" top="3.5rem" left="8%" right="8%" display={{ base: 'none', sm: 'block' }}>
|
||||
<Box height="0.5" bg="rgba(255,255,255,0.05)" position="relative">
|
||||
<Box
|
||||
as={motion.div}
|
||||
position="absolute"
|
||||
fullHeight
|
||||
bg="var(--ui-color-intent-primary)"
|
||||
initial={{ width: '0%' }}
|
||||
animate={{ width: `${(activeStep / (steps.length - 1)) * 100}%` }}
|
||||
transition={{ duration: 0.5, ease: 'easeInOut' }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Steps */}
|
||||
<Box display="flex" justifyContent="between" gap={2} position="relative">
|
||||
{steps.map((step, index) => {
|
||||
const isActive = index === activeStep;
|
||||
const isCompleted = index < activeStep;
|
||||
const StepIcon = step.icon;
|
||||
|
||||
return (
|
||||
<Box
|
||||
as={motion.div}
|
||||
key={step.id}
|
||||
display="flex"
|
||||
flexDirection="col"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
cursor="pointer"
|
||||
flexGrow={1}
|
||||
onClick={() => setActiveStep(index)}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<Box
|
||||
as={motion.div}
|
||||
w={{ base: '10', sm: '12' }}
|
||||
h={{ base: '10', sm: '12' }}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
mb={2}
|
||||
transition
|
||||
style={{
|
||||
backgroundColor: isActive ? 'rgba(25, 140, 255, 0.1)' : isCompleted ? 'rgba(16, 185, 129, 0.1)' : 'var(--ui-color-bg-base)',
|
||||
opacity: isActive ? 1 : isCompleted ? 0.8 : 0.5,
|
||||
border: `1px solid ${isActive ? 'var(--ui-color-intent-primary)' : isCompleted ? 'var(--ui-color-intent-success)' : 'var(--ui-color-border-default)'}`
|
||||
}}
|
||||
animate={isActive && !shouldReduceMotion ? {
|
||||
opacity: [0.7, 1, 0.7],
|
||||
transition: { duration: 1.5, repeat: Infinity }
|
||||
} : {}}
|
||||
className="relative"
|
||||
>
|
||||
{isActive && (
|
||||
<Box position="absolute" top="-1px" left="-1px" w="2" h="2" style={{ borderTop: '1px solid var(--ui-color-intent-primary)', borderLeft: '1px solid var(--ui-color-intent-primary)' }} />
|
||||
)}
|
||||
{isCompleted ? (
|
||||
<Icon icon={CheckCircle2} size={5} intent="success" />
|
||||
) : (
|
||||
<Text variant={isActive ? 'primary' : 'low'}>
|
||||
<Icon icon={StepIcon} size={5} />
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
<Text
|
||||
size="xs"
|
||||
weight="bold"
|
||||
variant={isActive ? 'high' : 'low'}
|
||||
display={{ base: 'none', sm: 'block' }}
|
||||
uppercase
|
||||
>
|
||||
{step.title}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
|
||||
{/* Active Step Preview - Mobile */}
|
||||
<AnimatePresence mode="wait">
|
||||
<Box
|
||||
as={motion.div}
|
||||
key={activeStep}
|
||||
initial={{ opacity: 0, y: 5 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -5 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
marginTop={4}
|
||||
paddingTop={4}
|
||||
style={{ borderTop: '1px solid var(--ui-color-border-muted)' }}
|
||||
display={{ base: 'block', sm: 'none' }}
|
||||
>
|
||||
<Box textAlign="center">
|
||||
<Text size="xs" variant="med" block marginBottom={1} font="mono" weight="bold" uppercase>
|
||||
STEP {activeStep + 1}: {steps[activeStep]?.title || ''}
|
||||
</Text>
|
||||
<Text size="xs" variant="low" block font="mono" uppercase>
|
||||
{steps[activeStep]?.description || ''}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</AnimatePresence>
|
||||
</Surface>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user