Added Breadcrumbs component to AdminX

refs. https://github.com/TryGhost/Team/issues/3432

ghost/admin-x-settings/src/admin-x-ds/global/Breadcrumbs.stories.tsx

@@ -0,0 +1,26 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import Breadcrumbs from './Breadcrumbs';
+
+const meta = {
+    title: 'Global / Breadcrumbs',
+    component: Breadcrumbs,
+    tags: ['autodocs']
+} satisfies Meta<typeof Breadcrumbs>;
+
+export default meta;
+type Story = StoryObj<typeof Breadcrumbs>;
+
+export const Default: Story = {
+    args: {
+        items: [
+            {label: 'Hello', onClick: () => {
+                alert('Hello');
+            }},
+            {label: 'Nice', onClick: () => {
+                alert('Nice');
+            }},
+            {label: 'Turtlenect'}
+        ]
+    }
+};

ghost/admin-x-settings/src/admin-x-ds/global/Breadcrumbs.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+export type BreadcrumbItem = {
+    label: string;
+    onClick?: () => void;
+}
+
+interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+}
+
+const Breadcrumbs: React.FC<BreadcrumbsProps> = ({items}) => {
+    const allItems = items.length;
+    let i = 0;
+
+    return (
+        <div className='flex items-center gap-2 text-sm'>
+            {items.map((item) => {
+                const bcItem = (i === allItems - 1 ?
+                    <span className='font-bold'>{item.label}</span>
+                    :
+                    <>
+                        <button
+                            key={`bc-${i}`}
+                            className={` text-sm ${item.onClick && '-mx-1 cursor-pointer rounded-sm px-1 py-px hover:bg-grey-100'}`}
+                            type="button"
+                            onClick={item.onClick}
+                        >
+                            {item.label}
+                        </button>
+                        <span>&rarr;</span>
+                    </>);
+                i = i + 1;
+                return bcItem;
+            })}
+        </div>
+    );
+};
+
+export default Breadcrumbs;

ghost/admin-x-settings/src/components/settings/site/ThemeModal.tsx

@@ -1,4 +1,5 @@
 import AdvancedThemeSettings from './theme/AdvancedThemeSettings';
+import Breadcrumbs from '../../../admin-x-ds/global/Breadcrumbs';
 import Button from '../../../admin-x-ds/global/Button';
 import ButtonGroup from '../../../admin-x-ds/global/ButtonGroup';
 import FileUpload from '../../../admin-x-ds/global/form/FileUpload';
@@ -48,22 +49,20 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
         const installedTheme = themes.find(theme => theme.name.toLowerCase() === selectedTheme.name.toLowerCase());
 
         left =
-            <div className='flex w-[33%] items-center gap-2'>
-                <button
-                    className={`text-sm`}
-                    type="button"
-                    onClick={() => {
-                        setCurrentTab('official');
-                        setSelectedTheme(null);
-                    }}>
-                    Official themes
-                </button>
-                &rarr;
-                <span className='text-sm font-bold'>{selectedTheme?.name}</span>
+            <div className='flex items-center gap-2'>
+                <Breadcrumbs
+                    items={[
+                        {label: 'Official themes', onClick: () => {
+                            setCurrentTab('official');
+                            setSelectedTheme(null);
+                        }},
+                        {label: selectedTheme.name}
+                    ]}
+                />
             </div>;
 
         right =
-            <div className='flex w-[33%] justify-end gap-8'>
+            <div className='flex justify-end gap-8'>
                 <ButtonGroup
                     buttons={[
                         {icon: 'laptop', link: true, size: 'sm'},