From 31666c9bb667afdc63b2bdcd78f64b9fb60306be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 10 Aug 2024 13:39:49 -0500
Subject: [PATCH] feat: start of buttons

---
 .../customize/[embed]/components/Boolean.tsx  |  1 +
 .../Color/components/ColorControllerRaw.tsx   |  1 +
 .../customize/[embed]/components/Radius.tsx   |  1 +
 .../customize/[embed]/components/Size.tsx     |  1 +
 .../[embed]/components/SizeWithout0.tsx       |  1 +
 .../customize/[embed]/components/Slider.tsx   |  1 +
 .../tools/embed/customize/[embed]/page.tsx    | 19 +++++++++++++++++--
 7 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/app/tools/embed/customize/[embed]/components/Boolean.tsx b/src/app/tools/embed/customize/[embed]/components/Boolean.tsx
index f01b26107..2a6d8899b 100644
--- a/src/app/tools/embed/customize/[embed]/components/Boolean.tsx
+++ b/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) => {
diff --git a/src/app/tools/embed/customize/[embed]/components/Color/components/ColorControllerRaw.tsx b/src/app/tools/embed/customize/[embed]/components/Color/components/ColorControllerRaw.tsx
index ecf286466..c547720a6 100644
--- a/src/app/tools/embed/customize/[embed]/components/Color/components/ColorControllerRaw.tsx
+++ b/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]}
diff --git a/src/app/tools/embed/customize/[embed]/components/Radius.tsx b/src/app/tools/embed/customize/[embed]/components/Radius.tsx
index 6d02f97fc..aabe701d0 100644
--- a/src/app/tools/embed/customize/[embed]/components/Radius.tsx
+++ b/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={[
diff --git a/src/app/tools/embed/customize/[embed]/components/Size.tsx b/src/app/tools/embed/customize/[embed]/components/Size.tsx
index f92e15126..2cc4d70e5 100644
--- a/src/app/tools/embed/customize/[embed]/components/Size.tsx
+++ b/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={[
diff --git a/src/app/tools/embed/customize/[embed]/components/SizeWithout0.tsx b/src/app/tools/embed/customize/[embed]/components/SizeWithout0.tsx
index 092cc0fe8..f8e9fb174 100644
--- a/src/app/tools/embed/customize/[embed]/components/SizeWithout0.tsx
+++ b/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={[
diff --git a/src/app/tools/embed/customize/[embed]/components/Slider.tsx b/src/app/tools/embed/customize/[embed]/components/Slider.tsx
index c0d461a00..d8d3607ce 100644
--- a/src/app/tools/embed/customize/[embed]/components/Slider.tsx
+++ b/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={[
diff --git a/src/app/tools/embed/customize/[embed]/page.tsx b/src/app/tools/embed/customize/[embed]/page.tsx
index f9bf148ab..148ba64b4 100644
--- a/src/app/tools/embed/customize/[embed]/page.tsx
+++ b/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];