chore: heygermany customer project

apps/website/components/ui/Emphasize.tsx

@@ -0,0 +1,68 @@
+import { Text } from "@pikku/mantine/core"
+import { asI18n } from "@pikku/react"
+import React from "react"
+
+interface EmphasizeProps {
+  text: string;
+  primary?: boolean
+  renderInlineStyles?: boolean
+  [key: string]: any
+}
+
+function stripInlineTags(text: string) {
+  return text
+    .replace(/<\/?(strong|i|em)>/g, '')
+    .replace(/<br\s*\/?>/g, '\n')
+    .replace(/<\/br>/g, '')
+}
+
+export function Emphasize({
+  text,
+  primary = true,
+  renderInlineStyles = true,
+  ...textProps
+}: EmphasizeProps) {
+  if (!renderInlineStyles) {
+    return <Text {...textProps}>{asI18n(stripInlineTags(text))}</Text>
+  }
+
+  // Split text by <strong> and <i> tags while preserving the tags
+  const parts = text.split(/(<strong>.*?<\/strong>|<i>.*?<\/i>|<em>.*?<\/em>|<br>.*?<\/br>)/g);
+
+  return (
+    <Text {...textProps}>
+      {parts.map((part, i) => {
+        if ((part.startsWith('<strong>') && part.endsWith('</strong>')) || (part.startsWith('<em>') && part.endsWith('</em>'))){
+          // Extract content between <strong> tags
+          const content = part.replace(/<\/?strong>/g, '').replace(/<\/?em>/g, '');
+          return (
+            <Text
+              key={i}
+              component="strong"
+              fw={700}
+              span
+              c={primary ? 'primary' : undefined}
+            >
+              {asI18n(content)}
+            </Text>
+          );
+        } else if (part.startsWith('<i>') && part.endsWith('</i>')) {
+          // Extract content between <i> tags
+          const content = part.replace(/<\/?i>/g, '');
+          return (
+            <Text key={i} fs="italic" span>
+              {asI18n(content)}
+            </Text>
+          );
+        } else if (part.startsWith('<br>') && part.endsWith('</br>')) {
+          return (
+            <br key={i}/>
+          );
+        } else {
+          // Regular text
+          return <React.Fragment key={i}>{asI18n(part)}</React.Fragment>;
+        }
+      })}
+    </Text>
+  );
+}