feat(example-app): ✨ update tag preview screen with controllables

Author: Karthik-B-06

example/src/modules/primitives/TagScreen.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from "react";
 import {
   Box,
-  Checkbox,
-  CheckboxGroup,
   Icon,
+  Radio,
+  RadioGroup,
   Slot,
+  Switch,
   Tag,
   TagSizes,
   TagTheme,
@@ -14,53 +15,90 @@ import {
 
 export const TagScreen = () => {
   const tailwind = useTheme();
-  const sizes: TagSizes[] = ["sm", "md", "lg", "xl"];
-  const themeColors: TagTheme[] = ["base", "primary"];
-  const variants: TagVariant[] = ["solid", "subtle", "outline"];
-  const [value, setValue] = useState<string[]>([]);
+  const [selectedSize, setSelectedSize] = useState<TagSizes>("md");
+  const [selectedVariant, setSelectedVariant] = useState<TagVariant>("solid");
+  const [selectedTheme, setSelectedTheme] = useState<TagTheme>("base");
+  const [hasPrefix, setHasPrefix] = useState<boolean>(false);
+  const [hasSuffix, setHasSuffix] = useState<boolean>(false);
+  const [isClosable, setIsClosable] = useState<boolean>(false);
 
   return (
-    <Box
-      style={tailwind.style("flex-1 justify-center items-center bg-white-900")}
-    >
-      <CheckboxGroup value={value} onChange={setValue}>
-        <Checkbox label="Closable" value="closable" />
-        <Checkbox label="Show Prefix" value="showprefix" />
-      </CheckboxGroup>
-      {sizes.map((size, index) => {
-        return (
-          <Box style={tailwind.style("flex-col my-1")} key={size + index}>
-            {variants.map((variant, variantIndex) => {
-              return (
-                <Box
-                  style={tailwind.style("flex-row my-1")}
-                  key={variant + variantIndex}
-                >
-                  {themeColors.map((theme, themeIndex) => {
-                    return (
-                      <Tag
-                        style={tailwind.style("mx-1")}
-                        size={size}
-                        key={theme + themeIndex}
-                        variant={variant}
-                        themeColor={theme}
-                        closable={value.includes("closable")}
-                        prefix={
-                          value.includes("showprefix") ? (
-                            <Icon icon={<Slot />} />
-                          ) : null
-                        }
-                      >
-                        Continue
-                      </Tag>
-                    );
-                  })}
-                </Box>
-              );
-            })}
-          </Box>
-        );
-      })}
+    <Box style={tailwind.style("flex-1 items-center bg-white-900")}>
+      <Box style={tailwind.style("flex-1 px-2 justify-center")}>
+        <Tag
+          size={selectedSize}
+          variant={selectedVariant}
+          themeColor={selectedTheme}
+          prefix={hasPrefix ? <Icon icon={<Slot />} /> : null}
+          suffix={hasSuffix ? <Icon icon={<Slot />} /> : null}
+          closable={isClosable}
+          style={tailwind.style("mx-1")}
+        >
+          Continue
+        </Tag>
+      </Box>
+
+      <Box
+        style={tailwind.style(
+          "w-full py-2 rounded-t-lg shadow-lg bg-gray-100 justify-end items-center",
+        )}
+      >
+        <RadioGroup
+          value={selectedSize}
+          onChange={value => setSelectedSize(value as TagSizes)}
+          orientation="horizontal"
+        >
+          <Radio value="sm" label="sm" />
+          <Radio value="md" label="md" />
+          <Radio value="lg" label="lg" />
+          <Radio value="xl" label="xl" />
+        </RadioGroup>
+        <RadioGroup
+          value={selectedVariant}
+          onChange={value => setSelectedVariant(value as TagVariant)}
+          orientation="horizontal"
+        >
+          <Radio value="outline" label="outline" />
+          <Radio value="subtle" label="subtle" />
+          <Radio value="solid" label="solid" />
+        </RadioGroup>
+        <RadioGroup
+          value={selectedTheme}
+          onChange={value => setSelectedTheme(value as TagTheme)}
+          orientation="horizontal"
+        >
+          <Radio value="base" label="base" />
+          <Radio value="primary" label="primary" />
+        </RadioGroup>
+        <Box
+          style={tailwind.style(
+            "flex flex-row justify-center flex-wrap w-full",
+          )}
+        >
+          <Switch
+            state={hasPrefix}
+            onStateChange={value => setHasPrefix(value)}
+            size="md"
+            style={tailwind.style("ml-1 mt-1")}
+            label="Prefix"
+          />
+          <Switch
+            state={hasSuffix}
+            onStateChange={value => setHasSuffix(value)}
+            size="md"
+            style={tailwind.style("ml-1 mt-1")}
+            label="Suffix"
+          />
+
+          <Switch
+            state={isClosable}
+            onStateChange={value => setIsClosable(value)}
+            size="md"
+            style={tailwind.style("ml-1 mt-1")}
+            label="Closable"
+          />
+        </Box>
+      </Box>
     </Box>
   );
 };