smallText

Author: alexanderkirtzel

website/docs/destinations/event_mapping.mdx

@@ -51,7 +51,7 @@ section of the mapping.
 }
 ```
 
-<DestinationPush event={event} height={'666px'} eventConfig={false}>
+<DestinationPush event={event} height={'666px'} labelMiddle={'Config'} eventConfig={false} smallText={true}>
   {`{
     order: {
       complete: {

website/src/components/molecules/codeBox.tsx

@@ -40,6 +40,7 @@ interface CodeBoxProps {
   inline?: boolean;
   className?: string;
   height?: number;
+  smallText?: boolean;
 }
 
 const CodeBox: React.FC<CodeBoxProps> = ({
@@ -50,6 +51,7 @@ const CodeBox: React.FC<CodeBoxProps> = ({
   language = 'javascript',
   className = '',
   height,
+  smallText = false,
 }) => {
   const highlightCode = (code: string) => (
     <Highlight theme={prismThemes.palenight} code={code} language={language}>
@@ -69,7 +71,7 @@ const CodeBox: React.FC<CodeBoxProps> = ({
 
   return (
     <div
-      className={`border border-base-300 rounded-lg overflow-hidden bg-gray-800 text-sm ${className}`}
+      className={`border border-base-300 rounded-lg overflow-hidden bg-gray-800 ${smallText ? 'text-xs' : 'text-sm'} ${className}`}
       style={height && { height: `${height}` }}
     >
       {label && (

website/src/components/organisms/mapping.tsx

@@ -21,6 +21,8 @@ interface MappingProps {
   labelRight?: string;
   showMiddle?: boolean;
   height?: number;
+  smallText?: boolean;
+  className?: string;
 }
 
 const Mapping: React.FC<MappingProps> = memo(
@@ -36,6 +38,8 @@ const Mapping: React.FC<MappingProps> = memo(
     labelRight = 'Result',
     showMiddle = true,
     height,
+    smallText,
+    className,
   }) => {
     const [left, setLeft] = useState(initLeft);
     const [middle, setMiddle] = useState(initMiddle);
@@ -72,7 +76,7 @@ const Mapping: React.FC<MappingProps> = memo(
       updateRight(left, middle, options);
     }, [left, middle, options]);
 
-    const boxClassNames = 'flex-1 resize max-h-96 xl:max-h-full flex flex-col';
+    const boxClassNames = `flex-1 resize max-h-96 xl:max-h-full flex flex-col ${className}`;
 
     return (
       <div className="my-4">
@@ -83,6 +87,7 @@ const Mapping: React.FC<MappingProps> = memo(
             onChange={setLeft}
             className={boxClassNames}
             height={height}
+            smallText={smallText}
           />
 
           {showMiddle && (
@@ -92,6 +97,7 @@ const Mapping: React.FC<MappingProps> = memo(
               onChange={setMiddle}
               className={boxClassNames}
               height={height}
+              smallText={smallText}
             />
           )}
 
@@ -101,6 +107,7 @@ const Mapping: React.FC<MappingProps> = memo(
             value={right[0] || 'No event yet.'}
             className={boxClassNames}
             height={height}
+            smallText={smallText}
           />
         </div>
       </div>

website/src/components/templates/destination.tsx

@@ -103,6 +103,8 @@ interface DestinationPushProps {
   mapping?: Mapping.EventConfig | string;
   children?: React.ReactNode;
   height?: number;
+  smallText?: boolean;
+  className?: string;
   labelLeft?: string;
   labelMiddle?: string;
   labelRight?: string;
@@ -114,6 +116,8 @@ export const DestinationPush: React.FC<DestinationPushProps> = ({
   mapping = {},
   children,
   height,
+  smallText,
+  className,
   labelLeft,
   labelMiddle = 'Event Config',
   labelRight,
@@ -165,6 +169,8 @@ export const DestinationPush: React.FC<DestinationPushProps> = ({
       fn={mappingFn}
       options={customConfig}
       height={height}
+      smallText={smallText}
+      className={className}
       labelLeft={labelLeft}
       labelMiddle={labelMiddle}
       labelRight={labelRight}