128 lines
3.8 KiB
TypeScript
128 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import { OpenInV0Button } from '@workspace/ui/components/docs/open-in-v0-button';
|
|
import { Button } from '@workspace/ui/components/ui/button';
|
|
import { cn } from '@workspace/ui/lib/utils';
|
|
import { Fullscreen, RotateCcw, SlidersHorizontal } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
import { motion } from 'motion/react';
|
|
import Iframe from './iframe';
|
|
import { useIsMobile } from '@workspace/ui/hooks/use-mobile';
|
|
|
|
interface ComponentWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
name: string;
|
|
iframe?: boolean;
|
|
bigScreen?: boolean;
|
|
tweakpane?: React.ReactNode;
|
|
}
|
|
|
|
export const ComponentWrapper = ({
|
|
className,
|
|
children,
|
|
name,
|
|
iframe = false,
|
|
bigScreen = false,
|
|
tweakpane,
|
|
}: ComponentWrapperProps) => {
|
|
const [tweakMode, setTweakMode] = useState(false);
|
|
const [key, setKey] = useState(0);
|
|
|
|
const isMobile = useIsMobile();
|
|
|
|
return (
|
|
<motion.div
|
|
className={cn(
|
|
'max-w-screen relative rounded-xl border bg-background flex flex-col md:flex-row',
|
|
bigScreen && 'overflow-hidden',
|
|
className,
|
|
)}
|
|
>
|
|
<motion.div className="relative size-full flex-1">
|
|
{!iframe && (
|
|
<div className="absolute top-3 right-3 z-[9] bg-background flex items-center justify-end gap-2 p-1 rounded-[11px]">
|
|
<OpenInV0Button url={`https://animate-ui.com/r/${name}.json`} />
|
|
|
|
<Button
|
|
onClick={() => setKey((prev) => prev + 1)}
|
|
className="flex items-center rounded-lg"
|
|
variant="neutral"
|
|
size="icon-sm"
|
|
asChild
|
|
>
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
<RotateCcw aria-label="restart-btn" size={14} />
|
|
</motion.button>
|
|
</Button>
|
|
|
|
{iframe && (
|
|
<Button
|
|
onClick={() => window.open(`/examples/${name}`, '_blank')}
|
|
className="flex items-center rounded-lg"
|
|
variant="neutral"
|
|
size="icon-sm"
|
|
asChild
|
|
>
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
<Fullscreen aria-label="fullscreen-btn" size={14} />
|
|
</motion.button>
|
|
</Button>
|
|
)}
|
|
|
|
{tweakpane && (
|
|
<Button
|
|
onClick={() => setTweakMode((prev) => !prev)}
|
|
className="flex items-center rounded-lg"
|
|
variant="neutral"
|
|
size="icon-sm"
|
|
asChild
|
|
>
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
<SlidersHorizontal aria-label="tweak-btn" size={14} />
|
|
</motion.button>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{iframe ? (
|
|
<Iframe key={key} name={name} bigScreen={bigScreen} />
|
|
) : (
|
|
<div
|
|
key={key}
|
|
className="flex min-h-[400px] w-full items-center justify-center px-10 py-16"
|
|
>
|
|
{children}
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={false}
|
|
animate={{
|
|
width: isMobile ? '100%' : tweakMode ? '250px' : '0px',
|
|
height: isMobile ? (tweakMode ? '250px' : '0px') : 'auto',
|
|
opacity: tweakMode ? 1 : 0,
|
|
}}
|
|
transition={{
|
|
type: 'spring',
|
|
stiffness: 300,
|
|
damping: 30,
|
|
restDelta: 0.01,
|
|
}}
|
|
className="relative"
|
|
>
|
|
<div className="absolute inset-0 overflow-y-auto">{tweakpane}</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
};
|