a7dc8f6d7f
<!-- Please make sure you have read the submission guidelines before posting an PR --> <!-- https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr --> <!-- Please make sure that your commit message follows our format --> <!-- Example: `fix(nx): must begin with lowercase` --> ## Current Behavior <!-- This is the behavior we have today --> Files are unformatted. ## Expected Behavior <!-- This is the behavior we should expect with the changes in this PR --> Files are formatted. ## Related Issue(s) <!-- Please link the issue being fixed so it gets closed when this is merged. --> Fixes #
74 lines
3.4 KiB
TypeScript
74 lines
3.4 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
import { transition, variants } from './motion.helpers';
|
|
|
|
export function GraphTab(): JSX.Element {
|
|
return (
|
|
<motion.div
|
|
initial="hidden"
|
|
variants={variants}
|
|
animate="visible"
|
|
transition={transition}
|
|
exit="hidden"
|
|
className="wrapper relative my-8 flex h-full flex-col items-center space-y-12 overflow-hidden lg:flex-row"
|
|
>
|
|
<div
|
|
className="coding z-10 w-96 shrink-0 grow-0 overflow-hidden rounded-lg border border-slate-200 bg-slate-50 p-4 font-mono
|
|
text-xs leading-normal text-slate-800 subpixel-antialiased shadow-lg dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"
|
|
>
|
|
<div className="flex items-center">
|
|
<p>
|
|
<span className="text-base text-purple-600 dark:text-fuchsia-500">
|
|
→
|
|
</span>{' '}
|
|
<span className="mx-1 text-green-600 dark:text-green-400">
|
|
~/workspace
|
|
</span>{' '}
|
|
<span>$</span>
|
|
</p>
|
|
<p className="typing mt-0.5 flex-1 pl-2">nx graph</p>
|
|
</div>
|
|
<div className="mt-2 flex">
|
|
<p className="typing flex-1 items-center">
|
|
<span className="bg-yellow-300 px-1 py-0.5 dark:bg-yellow-600">
|
|
Nx
|
|
</span>{' '}
|
|
Project graph started at{' '}
|
|
<span className="underline">http://127.0.0.1:4211</span>
|
|
<br />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="relative -top-5 mr-0.5 hidden grow items-center lg:flex">
|
|
<span className="absolute left-0 top-0 -ml-1 -mt-1 flex h-2 w-2">
|
|
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />
|
|
<span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 dark:bg-slate-700" />
|
|
</span>
|
|
<span className="absolute right-0 top-0 -mr-1 -mt-1 flex h-2 w-2">
|
|
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />
|
|
<span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 dark:bg-slate-700" />
|
|
</span>
|
|
<div className="-m-0.5 h-0.5 w-full bg-slate-200 dark:bg-slate-700" />
|
|
</div>
|
|
<div className="z-10 h-auto overflow-hidden rounded-lg border border-slate-200 shadow lg:min-h-[485px] lg:w-[690px] dark:border-slate-700">
|
|
<div className="flex h-7 w-full items-center justify-start space-x-1.5 bg-slate-200 px-3 dark:bg-slate-700">
|
|
<span className="h-2 w-2 rounded-full bg-red-400"></span>
|
|
<span className="h-2 w-2 rounded-full bg-yellow-400"></span>
|
|
<span className="h-2 w-2 rounded-full bg-green-400"></span>
|
|
</div>
|
|
<div className="w-full bg-transparent dark:hidden">
|
|
<video preload="true" autoPlay={true} loop muted playsInline={true}>
|
|
<source src="/videos/light.webm" type="video/webm" />
|
|
<source src="/videos/light.mp4" type="video/mp4" />
|
|
</video>
|
|
</div>
|
|
<div className="hidden w-full bg-slate-700 dark:flex">
|
|
<video preload="true" autoPlay={true} loop muted playsInline={true}>
|
|
<source src="/videos/dark.webm" type="video/webm" />
|
|
<source src="/videos/dark.mp4" type="video/mp4" />
|
|
</video>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|