github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-04-08 03:00:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

Breadcrumbs

Browse Source
This commit is contained in:
SwiftyOS
2024-10-14 13:15:07 +02:00
parent 015ac85a83
commit ffdc457dea
2 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
autogpt_platform/frontend/src/components/agptui/BreadCrumbs.stories.tsx
View File

@@ -29,9 +29,7 @@ export const Default: Story = {
export const SingleItem: Story = {
args: {
items: [
{ name: "Home", link: "/" },
],
items: [{ name: "Home", link: "/" }],
},
};
@@ -42,7 +40,10 @@ export const LongPath: Story = {
{ name: "Categories", link: "/categories" },
{ name: "AI Tools", link: "/categories/ai-tools" },
{ name: "Data Analysis", link: "/categories/ai-tools/data-analysis" },
{ name: "Data Analyzer", link: "/categories/ai-tools/data-analysis/data-analyzer" },
{
name: "Data Analyzer",
link: "/categories/ai-tools/data-analysis/data-analyzer",
},
],
},
};
@@ -69,7 +70,10 @@ export const LongNames: Story = {
items: [
{ name: "Home", link: "/" },
{ name: "AI-Powered Writing Assistants", link: "/ai-writing-assistants" },
{ name: "Advanced Grammar and Style Checker", link: "/ai-writing-assistants/grammar-style-checker" },
{
name: "Advanced Grammar and Style Checker",
link: "/ai-writing-assistants/grammar-style-checker",
},
],
},
};

6
autogpt_platform/frontend/src/components/agptui/BreadCrumbs.tsx
View File

@@ -12,16 +12,16 @@ interface BreadCrumbsProps {
export const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ items }) => {
return (
<div className="h-[4.375rem] px-[1.625rem] py-[0.4375rem] bg-white rounded-[5rem] border border-black/50 justify-center items-center gap-4 inline-flex">
<div className="inline-flex h-[4.375rem] items-center justify-center gap-4 rounded-[5rem] border border-black/50 bg-white px-[1.625rem] py-[0.4375rem]">
{items.map((item, index) => (
<React.Fragment key={index}>
<Link href={item.link}>
<span className="text-[#272727] text-xl font-medium font-['PP Neue Montreal TT'] leading-9 tracking-tight hover:text-gray-400 transition-colors duration-200 px-2 py-1 rounded">
<span className="font-['PP Neue Montreal TT'] rounded px-2 py-1 text-xl font-medium leading-9 tracking-tight text-[#272727] transition-colors duration-200 hover:text-gray-400">
{item.name}
</span>
</Link>
{index < items.length - 1 && (
<span className="text-center text-black text-2xl font-normal font-['SF Pro']">
<span className="font-['SF Pro'] text-center text-2xl font-normal text-black">
/
</span>
)}