feat: add slider width in setting

cmgriffing · Nov 2, 2024 · 64ad792 · 64ad792
1 parent 9fa9074
commit 64ad792
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/playgrounds/app/src/components/Editor.tsx b/playgrounds/app/src/components/Editor.tsx
@@ -229,6 +229,7 @@ export default function Editor(props: EditorProps) {
           maxContainerDimensions()?.height || 100,
           {
             layout: {
+              width: props.snippetWidth,
               yPadding: props.yPadding,
               xPadding: props.xPadding,
             },
@@ -434,6 +435,27 @@ export default function Editor(props: EditorProps) {
               <AccordionTrigger>Layout</AccordionTrigger>
               <AccordionContent>
                 <div class="flex flex-col gap-4">
+                  <Slider
+                    value={[props.snippetWidth]}
+                    minValue={0}
+                    maxValue={1500}
+                    onChange={e => {
+                      props.setSnippetWidth(e[0])
+                    }}
+                  >
+                    <div class="flex w-full justify-between mb-2">
+                      <SliderLabel>Width</SliderLabel>
+                      <div class="flex flex-row">
+                        <SliderValueLabel />
+                        <span class="text-xs">px</span>
+                      </div>
+                    </div>
+                    <SliderTrack>
+                      <SliderFill />
+                      <SliderThumb />
+                    </SliderTrack>
+                  </Slider>
+
                   <Slider
                     value={[props.yPadding]}
                     minValue={0}

diff --git a/playgrounds/app/src/types.ts b/playgrounds/app/src/types.ts
@@ -34,6 +34,7 @@ export interface Snippet {
 }
 
 export interface AnimationFrameLayout {
+  width: number
   yPadding: number
   xPadding: number
 }