From a6557079061d60068b24e52364fd2ffe1bb646bd Mon Sep 17 00:00:00 2001
From: Anthony Skelton <anthony@anthonyskelton.com>
Date: Fri, 28 Jun 2024 12:07:02 -0700
Subject: [PATCH] Adds new header option "HeadLightsTabString"

Uses the headlights svg, alongside the headerText and uses the background color of the editor to create a tab effect for the text.
---
 src/editor/components/HeaderSelect.tsx        |  7 +-
 .../headers/HeadlightsTabString.tsx           | 79 +++++++++++++++++++
 src/editor/controls/Sidebar.tsx               |  1 +
 3 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 src/editor/components/headers/HeadlightsTabString.tsx

diff --git a/src/editor/components/HeaderSelect.tsx b/src/editor/components/HeaderSelect.tsx
index 4bbcfc8..983dc14 100644
--- a/src/editor/components/HeaderSelect.tsx
+++ b/src/editor/components/HeaderSelect.tsx
@@ -4,6 +4,7 @@ import { Attributes } from '../../types';
 import { Headlights } from './headers/Headlights';
 import { HeadlightsMuted } from './headers/HeadlightsMuted';
 import { HeadlightsMutedAlt } from './headers/HeadlightsMutedAlt';
+import { HeadlightsTabString } from './headers/HeadlightsTabString';
 import { PillString } from './headers/PillString';
 import { SimpleString } from './headers/SimpleString';
 import { StringSmall } from './headers/StringSmall';
@@ -25,6 +26,7 @@ export const HeaderSelect = ({ attributes, onClick }: HeaderSelectProps) => {
         headlights: __('Headlights', 'code-block-pro'),
         headlightsMuted: __('Headlights muted', 'code-block-pro'),
         headlightsMutedAlt: __('Headlights muted alt', 'code-block-pro'),
+        headlightsTabString: __('Headlights with tab string', 'code-block-pro'),
         simpleString: __('Simple string', 'code-block-pro'),
         stringSmall: __('String muted', 'code-block-pro'),
         pillString: __('Pill string', 'code-block-pro'),
@@ -45,7 +47,7 @@ export const HeaderSelect = ({ attributes, onClick }: HeaderSelectProps) => {
                             : type
                     }
                     help={
-                        ['simpleString', 'pillString', 'stringSmall'].includes(
+                        ['headlightsTabString', 'simpleString', 'pillString', 'stringSmall'].includes(
                             slug,
                         )
                             ? // Settings refers to the panel that can be expanded
@@ -97,6 +99,9 @@ export const HeaderType = (attributes: Attributes) => {
     if (headerType === 'headlightsMutedAlt') {
         return <HeadlightsMutedAlt {...attributes} />;
     }
+    if ( headerType === 'headlightsTabString') {
+        return <HeadlightsTabString {...attributes} />;
+    }
     if (headerType === 'simpleString') {
         return <SimpleString {...attributes} />;
     }
diff --git a/src/editor/components/headers/HeadlightsTabString.tsx b/src/editor/components/headers/HeadlightsTabString.tsx
new file mode 100644
index 0000000..1d618e9
--- /dev/null
+++ b/src/editor/components/headers/HeadlightsTabString.tsx
@@ -0,0 +1,79 @@
+import { colord, AnyColor } from "colord";
+import { Attributes, Lang } from '../../../types';
+import { findBackgroundColor, findTextColor } from '../../../util/colors';
+import { languages } from '../../../util/languages';
+
+export const HeadlightsTabString = (attributes: Attributes) => {
+    const {language, bgColor, textColor, headerString} = attributes;
+    const bgC = colord(bgColor as AnyColor);
+    let bg = bgC.isDark()
+        ? bgC.lighten(0.05).toHex()
+        : bgC.darken(0.05).toHex();
+    const textC = colord(textColor as AnyColor);
+    let text = textC.isDark()
+        ? textC.lighten(0.05).toHex()
+        : textC.darken(0.05).toHex();
+
+    if (bgColor?.startsWith('var(')) {
+        bg = findBackgroundColor(attributes) ?? bgColor;
+    }
+    if (textColor?.startsWith('var(')) {
+        text = findTextColor(attributes) ?? textColor;
+    }
+
+    return (
+        <span
+            style={{
+                display: 'block',
+                padding: '5px 0 0 16px',
+                marginBottom: '-1px',
+                width: '100%',
+                textAlign: 'left',
+                backgroundColor: bg,
+                color: text,
+            }}>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width={54}
+                height={14}
+                viewBox="0 0 54 14">
+                <g fill="none" fillRule="evenodd" transform="translate(1 1)">
+                    <circle
+                        cx="6"
+                        cy="6"
+                        r="6"
+                        fill="#FF5F56"
+                        stroke="#E0443E"
+                        strokeWidth=".5"></circle>
+                    <circle
+                        cx="26"
+                        cy="6"
+                        r="6"
+                        fill="#FFBD2E"
+                        stroke="#DEA123"
+                        strokeWidth=".5"></circle>
+                    <circle
+                        cx="46"
+                        cy="6"
+                        r="6"
+                        fill="#27C93F"
+                        stroke="#1AAB29"
+                        strokeWidth=".5"></circle>
+                </g>
+            </svg>
+            <span
+                style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    padding: '5px 10px',
+                    borderRadius: '0.25rem 0.25rem 0 0',
+                    marginLeft: '16px',
+                    textAlign: 'center',
+                    color: text,
+                    backgroundColor: bgColor,
+                }}>
+                {headerString || languages[language as Lang]}
+            </span>
+        </span>
+    );
+}
diff --git a/src/editor/controls/Sidebar.tsx b/src/editor/controls/Sidebar.tsx
index b317a17..1852952 100644
--- a/src/editor/controls/Sidebar.tsx
+++ b/src/editor/controls/Sidebar.tsx
@@ -50,6 +50,7 @@ export const SidebarControls = ({
     const canEdit = useCanEditHTML();
     const footersNeedingLinks = ['simpleStringEnd', 'simpleStringStart'];
     const showHeaderTextEdit = [
+        'headlightsTabString',
         'simpleString',
         'pillString',
         'stringSmall',