feat: ToolBreadcrumb

2025-09-19 22:19:36 +02:00 · 2024-06-25 19:45:29 +01:00
parent 1e68c7105f
commit be3274ae82
5 changed files with 101 additions and 28 deletions
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,10 +4,12 @@
    <option name="autoReloadType" value="SELECTIVE" />
  </component>
  <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: create transparent png">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: ToolFileInput.tsx">
+      <change afterPath="$PROJECT_DIR$/src/components/ToolBreadcrumb.tsx" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/image/png/create-transparent/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/create-transparent/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/image/png/create-transparent/service.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ToolHeader.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolHeader.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ToolLayout.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolLayout.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/tools/defineTool.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/defineTool.tsx" afterDir="false" />
    </list>
    <option name="SHOW_DIALOG" value="false" />
    <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -18,6 +20,11 @@
    <option name="myRunOnSave" value="true" />
  </component>
  <component name="Git.Settings">
+    <option name="RECENT_BRANCH_BY_REPOSITORY">
+      <map>
+        <entry key="$PROJECT_DIR$" value="string-join" />
+      </map>
+    </option>
    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
    <option name="RESET_MODE" value="HARD" />
  </component>
@@ -183,14 +190,8 @@
      <workItem from="1719197816332" duration="1453000" />
      <workItem from="1719273044735" duration="9847000" />
      <workItem from="1719294110005" duration="3842000" />
-    </task>
-    <task id="LOCAL-00009" summary="chore: split string tools ui">
-      <option name="closed" value="true" />
-      <created>1718996769014</created>
-      <option name="number" value="00009" />
-      <option name="presentableId" value="LOCAL-00009" />
-      <option name="project" value="LOCAL" />
-      <updated>1718996769014</updated>
+      <workItem from="1719339559458" duration="303000" />
+      <workItem from="1719340295244" duration="772000" />
    </task>
    <task id="LOCAL-00010" summary="chore: use formik">
      <option name="closed" value="true" />
@@ -576,7 +577,15 @@
      <option name="project" value="LOCAL" />
      <updated>1719297880629</updated>
    </task>
-    <option name="localTasksCounter" value="58" />
+    <task id="LOCAL-00058" summary="fix: ToolFileInput.tsx">
+      <option name="closed" value="true" />
+      <created>1719305172029</created>
+      <option name="number" value="00058" />
+      <option name="presentableId" value="LOCAL-00058" />
+      <option name="project" value="LOCAL" />
+      <updated>1719305172029</updated>
+    </task>
+    <option name="localTasksCounter" value="59" />
    <servers />
  </component>
  <component name="TypeScriptGeneratedFilesManager">
@@ -597,7 +606,6 @@
    <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
    <option name="CHECK_NEW_TODO" value="false" />
    <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="feat: copy and import file" />
    <MESSAGE value="refactor: tool options components" />
    <MESSAGE value="fix: join text service" />
    <MESSAGE value="test: join service" />
@@ -622,7 +630,8 @@
    <MESSAGE value="fix: readme" />
    <MESSAGE value="refactor: tool input and result" />
    <MESSAGE value="feat: create transparent png" />
-    <option name="LAST_COMMIT_MESSAGE" value="feat: create transparent png" />
+    <MESSAGE value="fix: ToolFileInput.tsx" />
+    <option name="LAST_COMMIT_MESSAGE" value="fix: ToolFileInput.tsx" />
  </component>
  <component name="XSLT-Support.FileAssociations.UIState">
    <expand />
--- a/src/components/ToolBreadcrumb.tsx
+++ b/src/components/ToolBreadcrumb.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Breadcrumbs, Typography, useTheme } from '@mui/material';
+import { Link } from 'react-router-dom';
+
+interface BreadcrumbItem {
+  title: string;
+  link?: string; // link is optional for the last item
+}
+
+interface BreadcrumbComponentProps {
+  items: BreadcrumbItem[];
+}
+
+const ToolBreadcrumb: React.FC<BreadcrumbComponentProps> = ({ items }) => {
+  const theme = useTheme();
+  return (
+    <Breadcrumbs aria-label="breadcrumb">
+      {items.map((item, index) => {
+        if (index === items.length - 1 || !item.link) {
+          return (
+            <Typography color="textPrimary" key={index}>
+              {item.title}
+            </Typography>
+          );
+        }
+        return (
+          <Link color={theme.palette.primary.main} to={item.link} key={index}>
+            {item.title}
+          </Link>
+        );
+      })}
+    </Breadcrumbs>
+  );
+};
+
+export default ToolBreadcrumb;
--- a/src/components/ToolHeader.tsx
+++ b/src/components/ToolHeader.tsx
@@ -1,10 +1,13 @@
 import { Button, Box, Stack } from '@mui/material';
 import Typography from '@mui/material/Typography';
+import ToolBreadcrumb from './ToolBreadcrumb';
+import { capitalizeFirstLetter } from '../utils/string';

 interface ToolHeaderProps {
  title: string;
  description: string;
  image?: string;
+  type: string;
 }

 function ToolLinks() {
@@ -26,10 +29,22 @@ function ToolLinks() {
 export default function ToolHeader({
  image,
  title,
-  description
+  description,
+  type
 }: ToolHeaderProps) {
  return (
-    <Stack direction={'row'} alignItems={'center'} spacing={2} my={4}>
+    <Box my={4}>
+      <ToolBreadcrumb
+        items={[
+          { title: 'All tools', link: '/' },
+          {
+            title: capitalizeFirstLetter(type),
+            link: '/categories/' + type
+          },
+          { title }
+        ]}
+      />
+      <Stack direction={'row'} alignItems={'center'} spacing={2}>
        <Box>
          <Typography mb={2} fontSize={30} color={'primary'}>
            {title}
@@ -39,5 +54,6 @@ export default function ToolHeader({
        </Box>
        {image && <img width={'250'} src={image} />}
      </Stack>
+    </Box>
  );
 }
--- a/src/components/ToolLayout.tsx
+++ b/src/components/ToolLayout.tsx
@@ -7,11 +7,13 @@ export default function ToolLayout({
  children,
  title,
  description,
-  image
+  image,
+  type
 }: {
  title: string;
  description: string;
  image?: string;
+  type: string;
  children: ReactNode;
 }) {
  return (
@@ -25,7 +27,12 @@ export default function ToolLayout({
        <title>{`${title} - Omni Tools`}</title>
      </Helmet>
      <Box width={'85%'}>
-        <ToolHeader title={title} description={description} image={image} />
+        <ToolHeader
+          title={title}
+          description={description}
+          image={image}
+          type={type}
+        />
        {children}
      </Box>
    </Box>
--- a/src/tools/defineTool.tsx
+++ b/src/tools/defineTool.tsx
@@ -35,7 +35,12 @@ export const defineTool = (
    keywords,
    component: () => {
      return (
-        <ToolLayout title={name} description={description} image={image}>
+        <ToolLayout
+          title={name}
+          description={description}
+          image={image}
+          type={basePath}
+        >
          <Component />
        </ToolLayout>
      );