feat: breadcrumb + headling styling

glzr-io · Feb 17, 2025 · 6246a19 · 6246a19
1 parent e953bef
commit 6246a19
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 7 deletions.
diff --git a/packages/settings-ui/src/common/layout/AppBreadcrumbs.tsx b/packages/settings-ui/src/common/layout/AppBreadcrumbs.tsx
@@ -1,16 +1,17 @@
 import { Breadcrumbs, BreadcrumbsProps } from '@glzr/components';
+import { IconHome } from '@tabler/icons-solidjs';
 import { createMemo } from 'solid-js';
 
 export function AppBreadcrumbs(props: BreadcrumbsProps) {
   const entries = createMemo(() => {
     return [
       {
         href: '/',
-        content: 'Home',
+        content: () => <IconHome class="h-4 w-4 my-0.5" />,
       },
       ...props.entries,
     ];
   });
 
-  return <Breadcrumbs entries={entries()} />;
+  return <Breadcrumbs class="mb-5" entries={entries()} />;
 }
diff --git a/packages/settings-ui/src/marketplace/MarketplacePackPage.tsx b/packages/settings-ui/src/marketplace/MarketplacePackPage.tsx
@@ -42,7 +42,7 @@ export function MarketplacePackPage() {
   }
 
   return (
-    <div class="container mx-auto pt-6 pb-40">
+    <div class="container mx-auto pt-3.5 pb-32">
       <Show when={communityPacks.selectedPack()}>
         {selectedPack => (
           <div class="space-y-8">

diff --git a/packages/settings-ui/src/marketplace/MarketplacePage.tsx b/packages/settings-ui/src/marketplace/MarketplacePage.tsx
@@ -33,7 +33,7 @@ export function MarketplacePage() {
   );
 
   return (
-    <div class="container mx-auto py-6 space-y-6">
+    <div class="container mx-auto pt-3.5 pb-32 space-y-6">
       <div class="space-y-3">
         <AppBreadcrumbs
           entries={[{ href: '/marketplace', content: 'Marketplace' }]}

diff --git a/packages/settings-ui/src/user-packs/WidgetPackPage.tsx b/packages/settings-ui/src/user-packs/WidgetPackPage.tsx
@@ -88,7 +88,7 @@ export function WidgetPackPage() {
   // };
 
   return (
-    <div class="container mx-auto py-6 max-w-4xl">
+    <div class="container mx-auto pt-3.5 pb-32">
       <AppBreadcrumbs
         entries={[
           {

diff --git a/packages/settings-ui/src/user-packs/WidgetPacksPage.tsx b/packages/settings-ui/src/user-packs/WidgetPacksPage.tsx
@@ -18,11 +18,11 @@ export function WidgetPacksPage() {
   const userPacks = useUserPacks();
 
   return (
-    <div class="container mx-auto pt-6">
+    <div class="container mx-auto pt-3.5 pb-32">
       <AppBreadcrumbs entries={[]} />
 
       <div class="flex justify-between items-center mb-6">
-        <h1 class="text-3xl font-bold">Widget Packs</h1>
+        <h1 class="text-3xl font-bold">My Widgets</h1>
         <div class="flex gap-2">
           <Dialog>
             <DialogTrigger>