feat: add breadcrumb

CoreumFoundation · Jan 8, 2024 · 551f0db · 551f0db
1 parent eac48a3
commit 551f0db
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 5 deletions.
diff --git a/packages/ui/src/screens/asset_details/index.tsx b/packages/ui/src/screens/asset_details/index.tsx
@@ -7,6 +7,7 @@ import useStyles from '@/screens/asset_details/styles';
 import AssetOverview from '@/screens/asset_details/components/AssetOverview';
 import AssetDetailsOverview from '@/screens/asset_details/components/AssetDetails';
 import AssetPriceOverview from '@/screens/asset_details/components/AssetPriceOverview';
+import Link from 'next/link';
 
 const AssetDetails = () => {
   const { t } = useTranslation('assets');
@@ -24,11 +25,26 @@ const AssetDetails = () => {
       />
       <Layout navTitle={t('assetDetails') ?? undefined}>
         <LoadAndExist exists={exists} loading={loading}>
-          <span className={classes.root}>
+          <div className={classes.root}>
+            <div className={classes.block}>
+              <Link href="/assets" className={classes.breadcrumb}>
+                <svg
+                  width="16"
+                  height="17"
+                  viewBox="0 0 16 17"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M10.5 13.5L5.5 8.5L10.5 3.5" stroke="#25D695" strokeWidth="1.5" />
+                </svg>
+                Back to all Assets
+              </Link>
+              <div className={classes.title}>{t('assetDetails')}</div>
+            </div>
             <AssetOverview className={classes.block} asset={asset} />
             <AssetDetailsOverview className={classes.block} asset={asset} />
             <AssetPriceOverview className={classes.block} asset={asset} />
-          </span>
+          </div>
         </LoadAndExist>
       </Layout>
     </>

diff --git a/packages/ui/src/screens/asset_details/styles.ts b/packages/ui/src/screens/asset_details/styles.ts
@@ -8,9 +8,6 @@ const useStyles = makeStyles()((theme) => ({
     gridTemplateColumns: '1fr',
     gridTemplateRows: 'auto',
     gap: theme.spacing(1),
-    '& a': {
-      color: theme.palette.custom.fonts.highlight,
-    },
     [theme.breakpoints.up('lg')]: {
       gap: theme.spacing(2),
       gridTemplateColumns: 'repeat(2, 1fr) 500px',
@@ -21,6 +18,24 @@ const useStyles = makeStyles()((theme) => ({
       gridColumn: '1 / 4',
     },
   },
+  breadcrumb: {
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    fontSize: theme.spacing(1.75),
+    fontWeight: 500,
+    color: theme.palette.primary.main,
+    '& svg': {
+      fill: 'transparent',
+    },
+  },
+  title: {
+    fontSize: theme.spacing(3.5),
+    fontWeight: 600,
+    color: theme.palette.primary.contrastText,
+    marginTop: theme.spacing(1.5),
+    marginBottom: theme.spacing(1.5),
+  },
 }));
 
 export default useStyles;