feat: start of buttons

src/app/tools/embed/customize/[embed]/components/Boolean.tsx

@@ -7,6 +7,7 @@ export function Boolean({ configKey }: EmbedPreviewControllerProps) {
 
   return (
     <Switch
+      variant="soft"
       checked={EmbedState.use((state) => state[configKey] as boolean)}
       onCheckedChange={() => {
         mutateEmbedState((draft) => {

src/app/tools/embed/customize/[embed]/components/Color/components/ColorControllerRaw.tsx

@@ -25,6 +25,7 @@ export function ColorControllerRaw({
         }}
       />
       <Slider
+        variant="soft"
         min={0}
         max={255}
         value={[alpha]}

src/app/tools/embed/customize/[embed]/components/Radius.tsx

@@ -7,6 +7,7 @@ export function Radius({ configKey }: EmbedPreviewControllerProps) {
 
   return (
     <Slider
+      variant="soft"
       min={0}
       max={5}
       value={[

src/app/tools/embed/customize/[embed]/components/Size.tsx

@@ -7,6 +7,7 @@ export function Size({ configKey }: EmbedPreviewControllerProps) {
 
   return (
     <Slider
+      variant="soft"
       min={0}
       max={9}
       value={[

src/app/tools/embed/customize/[embed]/components/SizeWithout0.tsx

@@ -7,6 +7,7 @@ export function SizeWithout0({ configKey }: EmbedPreviewControllerProps) {
 
   return (
     <Slider
+      variant="soft"
       min={1}
       max={9}
       value={[

src/app/tools/embed/customize/[embed]/components/Slider.tsx

@@ -16,6 +16,7 @@ export function Slider({
 
   return (
     <RadixSlider
+      variant="soft"
       min={config.min}
       max={config.max}
       value={[

src/app/tools/embed/customize/[embed]/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ImageIcon } from '@radix-ui/react-icons';
+import { CopyIcon, ImageIcon } from '@radix-ui/react-icons';
 import { Box, Button, Flex, Heading, ScrollArea, Text } from '@radix-ui/themes';
 import { capitalize, startCase } from 'lodash';
 import { ReactNode, useEffect, useRef, useState } from 'react';
@@ -54,7 +54,22 @@ export default function Page({
           style={{ height: '100%', maxWidth: 320 }}
         >
           <Flex direction="column" gap="2" p="4">
-            <Heading mb="4">Customize</Heading>
+            <Heading>Customize</Heading>
+
+            <Flex mb="4" gap="2">
+              <Button
+                onClick={() => {
+                  console.log(`${location.origin}/embed/${params.embed}/host`);
+                }}
+              >
+                <CopyIcon />
+                Copy URL
+              </Button>
+              <Button variant="outline">
+                <CopyIcon />
+                Copy CSS
+              </Button>
+            </Flex>
 
             {Object.keys(config).map((configKey) => {
               const item = config[configKey];