feat(frontend): add title and description to FormatterPreview component

packages/frontend/src/components/FormatterPreview.module.css

@@ -10,6 +10,19 @@
   gap: 15px;
   margin: 10px 0;
 }
+.previewTitle {
+  font-size: 18px;
+  font-weight: bold;
+  color: #ffffff;
+  margin-bottom: 10px;
+}
+
+.previewDescription {
+  font-size: 14px;
+  color: #aaa;
+  white-space: pre-wrap;
+  margin-bottom: 10px;
+}
 
 .streamPreview {
   font-family: monospace;

packages/frontend/src/components/FormatterPreview.tsx

@@ -111,6 +111,17 @@ const FormatterPreview: React.FC<FormatterPreviewProps> = ({ formatter }) => {
 
   return (
     <div className={styles.previewContainer}>
+      <h2 className={styles.previewTitle}>Formatter Preview</h2>
+      <p className={styles.previewDescription}>
+        This is a preview of how the formatter will look like. You can change
+        the filename and other parameters to see how it affects the output.
+        <br />
+        <br />
+        Note: The options here do not affect your configuration and are only for
+        testing purposes.
+        <br />
+      </p>
+      {/* Formatter example display */}
       <div className={styles.streamPreview}>
         <div className={styles.streamName}>{example.name}</div>
         <div className={styles.streamDescription}>{example.description}</div>