chore: sync demo

Weaverse · Nov 11, 2023 · d898d1a · d898d1a
1 parent 2922a99
commit d898d1a
Showing 1 changed file with 26 additions and 4 deletions.
diff --git a/app/sections/rich-text/buttons-item.tsx b/app/sections/rich-text/buttons-item.tsx
@@ -3,17 +3,20 @@ import type {
   HydrogenComponentSchema,
 } from '@weaverse/hydrogen';
 import { forwardRef } from 'react';
+import clsx from 'clsx';
 
 interface ButtonItemProps extends HydrogenComponentProps {
   buttonLabel: string;
   buttonLink: string;
+  openInNewTab: boolean;
+  buttonStyle: string;
 }
 
 let RichTextButtonItem = forwardRef<HTMLDivElement, ButtonItemProps>((props, ref) => {
-  let { buttonLabel, buttonLink, ...rest } = props;
+  let { buttonLabel, buttonLink, openInNewTab, buttonStyle, ...rest } = props;
   return (
-    <div ref={ref} {...rest} className='text-white'>
-      <a href={buttonLink} className='px-4 py-3 cursor-pointer bg-black rounded inline-block'>{buttonLabel}</a>
+    <div ref={ref} {...rest}>
+      <a href={buttonLink} target={openInNewTab ? '_blank' : ''} className={clsx('px-4 py-3 rounded cursor-pointer inline-block', buttonStyle)}>{buttonLabel}</a>
     </div>
   );
 });
@@ -39,7 +42,26 @@ export let schema: HydrogenComponentSchema = {
           label: 'Button link',
           name: 'buttonLink',
           placeholder: 'Button link',
-        }
+        },
+        {
+          type: 'switch',
+          name: 'openInNewTab',
+          label: 'Open in new tab',
+          defaultValue: true,
+        },
+        {
+          type: 'toggle-group',
+          label: 'Button style',
+          name: 'buttonStyle',
+          configs: {
+            options: [
+              { label: '1', value: 'transition hover:bg-white border-2 border-solid hover:border-gray-900 hover:text-black bg-black text-white' },
+              { label: '2', value: 'transition bg-white border-2 border-solid border-gray-900 text-black hover:bg-black hover:text-white' },
+              { label: '3', value: 'transition hover:bg-white border-2 border-solid border-white hover:text-black bg-gray-200 text-white' },
+            ],
+          },
+          defaultValue: 'transition bg-white border-2 border-solid border-gray-900 text-black hover:bg-black hover:text-white',
+        },
       ],
     },
   ],