feat: add text element

Willem-Jaap · Nov 10, 2024 · 487df3e · 487df3e
1 parent 836198f
commit 487df3e
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
diff --git a/src/components/misc/preview-header.tsx b/src/components/misc/preview-header.tsx
@@ -20,6 +20,7 @@ const PreviewHeader = ({ api, percentage, setPercentage }: Props) => {
         api.start({ width: value });
         setPercentage(value);
     };
+
     return (
         <div className="flex w-full items-center justify-between gap-4 border-b border-b-neutral-100 p-5">
             <h2 className="text-lg font-medium">Emulated screen width</h2>

diff --git a/src/components/misc/preview-text.tsx b/src/components/misc/preview-text.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import useSettings from '~/hooks/useSettings';
+
+const PreviewText = () => {
+    const { watch } = useSettings();
+
+    return (
+        <div
+            className="h-20 rounded-lg border border-dashed border-neutral-400 bg-neutral-200 px-2 py-1"
+            style={{ margin: `0 ${watch('clamp').replace('vw', '%')}` }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+        </div>
+    );
+};
+
+export default PreviewText;
diff --git a/src/components/misc/preview.tsx b/src/components/misc/preview.tsx
@@ -5,6 +5,7 @@ import { animated, useSpring } from '@react-spring/web';
 
 import PreviewElement from '~/components/misc/preview-element';
 import PreviewHeader from '~/components/misc/preview-header';
+import PreviewText from '~/components/misc/preview-text';
 import useSettings from '~/hooks/useSettings';
 
 const Preview = () => {
@@ -38,7 +39,7 @@ const Preview = () => {
                 className="pointer-events-none absolute left-0 mt-32 2xl:mt-40"
                 ref={screenContainerRef}>
                 <animated.div
-                    className="relative h-full origin-top-left overflow-hidden rounded-lg border border-neutral-100 bg-neutral-50 py-5"
+                    className="relative h-full origin-top-left overflow-hidden rounded-xl border border-neutral-100 bg-neutral-50 pb-5"
                     style={{
                         width: width.to(w => {
                             centerPreviewScreen();
@@ -49,14 +50,15 @@ const Preview = () => {
                         }),
                     }}
                     ref={screenRef}>
-                    {watch('previewMode') === 'container' ? (
-                        <PreviewElement />
-                    ) : (
-                        <div className="h-20 border border-dashed border-neutral-400 bg-neutral-400 px-2 py-1">
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
-                            tempor
+                    <div className="mb-5 flex items-center justify-between gap-4 border-b border-b-neutral-100 px-4 py-4">
+                        <div className="flex items-center space-x-2">
+                            <div className="size-3 rounded-full bg-[#F05454]" />
+                            <div className="size-3 rounded-full bg-[#F0C454]" />
+                            <div className="size-3 rounded-full bg-[#48DD23]" />
                         </div>
-                    )}
+                        <div className="flex-1">{/* <Tabs /> */}</div>
+                    </div>
+                    {watch('previewMode') === 'container' ? <PreviewElement /> : <PreviewText />}
                 </animated.div>
             </div>
         </div>