Use css instead of array conditional

GCTC-NTGC · Jan 10, 2025 · c87cf97 · c87cf97
1 parent 4db1ac6
commit c87cf97
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 48 deletions.
diff --git a/apps/web/src/pages/AdminDashboardPage/AdminDashboardPage.tsx b/apps/web/src/pages/AdminDashboardPage/AdminDashboardPage.tsx
@@ -260,14 +260,9 @@ export const DashboardPage = ({ currentUser }: DashboardPageProps) => {
                 })}
               </Heading>
               <CardBasic data-h2-min-width="base(x14.5)">
-                <ul>
-                  {recruitmentCollectionSorted.map((item, i, { length }) => (
-                    <li
-                      key={item.label}
-                      data-h2-margin-bottom={
-                        i === length - 1 ? "base(initial)" : "base(x.5)"
-                      }
-                    >
+                <ul data-h2-margin-bottom="base:children[li:not(:last-child)](x.5)">
+                  {recruitmentCollectionSorted.map((item) => (
+                    <li key={item.label}>
                       <Link color="primary" mode="inline" href={item.href}>
                         {item.label}
                       </Link>
@@ -291,14 +286,9 @@ export const DashboardPage = ({ currentUser }: DashboardPageProps) => {
               })}
             </Heading>
             <CardBasic data-h2-min-width="base(x14.5)">
-              <ul>
-                {resourcesCollectionSorted.map((item, i, { length }) => (
-                  <li
-                    key={item.label}
-                    data-h2-margin-bottom={
-                      i === length - 1 ? "base(initial)" : "base(x.5)"
-                    }
-                  >
+              <ul data-h2-margin-bottom="base:children[li:not(:last-child)](x.5)">
+                {resourcesCollectionSorted.map((item) => (
+                  <li key={item.label}>
                     <Link color="secondary" mode="inline" href={item.href}>
                       {item.label}
                     </Link>
@@ -322,14 +312,9 @@ export const DashboardPage = ({ currentUser }: DashboardPageProps) => {
                 })}
               </Heading>
               <CardBasic data-h2-min-width="base(x14.5)">
-                <ul>
-                  {administrationCollectionSorted.map((item, i, { length }) => (
-                    <li
-                      key={item.label}
-                      data-h2-margin-bottom={
-                        i === length - 1 ? "base(initial)" : "base(x.5)"
-                      }
-                    >
+                <ul data-h2-margin-bottom="base:children[li:not(:last-child)](x.5)">
+                  {administrationCollectionSorted.map((item) => (
+                    <li key={item.label}>
                       <Link color="error" mode="inline" href={item.href}>
                         {item.label}
                       </Link>

diff --git a/apps/web/src/pages/CommunityDashboardPage/CommunityDashboardPage.tsx b/apps/web/src/pages/CommunityDashboardPage/CommunityDashboardPage.tsx
@@ -260,14 +260,9 @@ export const DashboardPage = ({ currentUser }: DashboardPageProps) => {
                 })}
               </Heading>
               <CardBasic data-h2-min-width="base(x14.5)">
-                <ul>
-                  {recruitmentCollectionSorted.map((item, i, { length }) => (
-                    <li
-                      key={item.label}
-                      data-h2-margin-bottom={
-                        i === length - 1 ? "base(initial)" : "base(x.5)"
-                      }
-                    >
+                <ul data-h2-margin-bottom="base:children[li:not(:last-child)](x.5)">
+                  {recruitmentCollectionSorted.map((item) => (
+                    <li key={item.label}>
                       <Link color="primary" mode="inline" href={item.href}>
                         {item.label}
                       </Link>
@@ -291,14 +286,9 @@ export const DashboardPage = ({ currentUser }: DashboardPageProps) => {
               })}
             </Heading>
             <CardBasic data-h2-min-width="base(x14.5)">
-              <ul>
-                {resourcesCollectionSorted.map((item, i, { length }) => (
-                  <li
-                    key={item.label}
-                    data-h2-margin-bottom={
-                      i === length - 1 ? "base(initial)" : "base(x.5)"
-                    }
-                  >
+              <ul data-h2-margin-bottom="base:children[li:not(:last-child)](x.5)">
+                {resourcesCollectionSorted.map((item) => (
+                  <li key={item.label}>
                     <Link color="secondary" mode="inline" href={item.href}>
                       {item.label}
                     </Link>
@@ -322,14 +312,9 @@ export const DashboardPage = ({ currentUser }: DashboardPageProps) => {
                 })}
               </Heading>
               <CardBasic data-h2-min-width="base(x14.5)">
-                <ul>
-                  {administrationCollectionSorted.map((item, i, { length }) => (
-                    <li
-                      key={item.label}
-                      data-h2-margin-bottom={
-                        i === length - 1 ? "base(initial)" : "base(x.5)"
-                      }
-                    >
+                <ul data-h2-margin-bottom="base:children[li:not(:last-child)](x.5)">
+                  {administrationCollectionSorted.map((item) => (
+                    <li key={item.label}>
                       <Link color="error" mode="inline" href={item.href}>
                         {item.label}
                       </Link>