Complete questionnaire builder

src/components/PrimaryButton/constants.js

@@ -0,0 +1,10 @@
+export const VARIANTS = {
+  CONTAINED: "CONTAINED",
+  OUTLINED: "OUTLINED",
+};
+
+export const VARIANTS_CLASS = {
+  [VARIANTS.CONTAINED]: "bg-blue-700 hover:bg-blue-900 text-white font-bold",
+  [VARIANTS.OUTLINED]:
+    "border border-blue-700 hover:border-blue-700 hover:bg-blue-200 text-black",
+};

src/components/PrimaryButton/index.svelte

@@ -1,13 +1,17 @@
 <script>
+  import { VARIANTS, VARIANTS_CLASS } from "./constants";
   export let label;
   export let className = "";
   export let onClick = () => {};
   export let name = "";
   export let type;
+  export let variant = VARIANTS.CONTAINED;
+
+  const variantClass = VARIANTS_CLASS[variant];
 </script>
 
 <button
-  class="bg-blue-700 hover:bg-blue-900 text-white font-bold py-1 px-3 rounded {className}"
+  class="h-auto {variantClass} py-1 px-3 rounded {className} transition delay-150 duration-300 ease-in-out"
   on:click={onClick}
   {name}
   {type}