feat(notification-panel): table-info layout

Wizleap-Inc · Jul 21, 2024 · ae1c335 · ae1c335
1 parent 28eb127
commit ae1c335
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 27 deletions.
diff --git a/packages/wiz-ui-next/src/components/custom/notification/panel/panel.vue b/packages/wiz-ui-next/src/components/custom/notification/panel/panel.vue
@@ -14,19 +14,37 @@
       width,
     }"
   >
-    <WizHStack px="md" py="xs" justify="between" align="center">
+    <WizHStack px="md" py="xs" justify="between" align="center" nowrap>
       <WizVStack gap="xs" position="relative" width="100%">
         <WizHStack v-if="variant === 'primary'" justify="between" align="start">
-          <WizVStack gap="xs">
-            <WizHStack gap="xl" v-for="(item, i) in tableInfo" :key="i">
-              <WizText :bold="!read" fontSize="xs" color="gray.700">{{
-                item.title
-              }}</WizText>
-              <WizText :bold="!read" fontSize="xs" color="gray.700">{{
-                item.content
-              }}</WizText>
-            </WizHStack>
-          </WizVStack>
+          <WizUnstyledTable>
+            <WizUnstyledTbody>
+              <WizUnstyledTr
+                v-for="(item, i) in tableInfo"
+                :key="`${item.title}_${i}`"
+              >
+                <WizUnstyledTd
+                  align="left"
+                  :style="{
+                    paddingRight: THEME.spacing.xl,
+                    paddingBottom: THEME.spacing.xs,
+                  }"
+                >
+                  <WizText :bold="!read" fontSize="xs" color="gray.700">
+                    {{ item.title }}
+                  </WizText>
+                </WizUnstyledTd>
+                <WizUnstyledTd
+                  align="left"
+                  :style="{ paddingBottom: THEME.spacing.xs }"
+                >
+                  <WizText :bold="!read" fontSize="xs" color="gray.700">
+                    {{ item.content }}
+                  </WizText>
+                </WizUnstyledTd>
+              </WizUnstyledTr>
+            </WizUnstyledTbody>
+          </WizUnstyledTable>
           <WizText color="gray.600" fontSize="xs2">
             {{ displayHowPast }}
           </WizText>
@@ -47,16 +65,20 @@
 </template>
 
 <script setup lang="ts">
-import { ColorKeys, ComponentName } from "@wizleap-inc/wiz-ui-constants";
+import { ColorKeys, ComponentName, THEME } from "@wizleap-inc/wiz-ui-constants";
 import { formatDateToYMDHM, formatHowPast } from "@wizleap-inc/wiz-ui-utils";
-import { computed, ref, PropType } from "vue";
+import { computed, PropType, ref } from "vue";
 
 import {
   WizBox,
   WizHStack,
   WizIcon,
-  WizVStack,
   WizText,
+  WizUnstyledTable,
+  WizUnstyledTbody,
+  WizUnstyledTd,
+  WizUnstyledTr,
+  WizVStack,
 } from "@/components/base";
 import { WizIChevronRight } from "@/components/icons";
 

diff --git a/packages/wiz-ui-react/src/components/custom/notification/components/notification-panel.tsx b/packages/wiz-ui-react/src/components/custom/notification/components/notification-panel.tsx
@@ -1,4 +1,4 @@
-import { ColorKeys, ComponentName } from "@wizleap-inc/wiz-ui-constants";
+import { ColorKeys, ComponentName, THEME } from "@wizleap-inc/wiz-ui-constants";
 import { formatDateToYMDHM, formatHowPast } from "@wizleap-inc/wiz-ui-utils";
 import { FC, useCallback, useEffect, useMemo, useState } from "react";
 
@@ -8,6 +8,10 @@ import {
   WizIChevronRight,
   WizIcon,
   WizText,
+  WizUnstyledTable,
+  WizUnstyledTbody,
+  WizUnstyledTd,
+  WizUnstyledTr,
   WizVStack,
 } from "@/components";
 import { BaseProps } from "@/types";
@@ -86,18 +90,33 @@ const NotificationPanel: FC<Props> = ({
         <WizVStack gap="xs" position="relative" width="100%">
           {variant === "primary" && (
             <WizHStack justify="between" align="start">
-              <WizVStack gap="xs">
-                {tableInfo?.map((item, i) => (
-                  <WizHStack key={i} gap="xl">
-                    <WizText bold={!read} fontSize="xs" color="gray.700">
-                      {item.title}
-                    </WizText>
-                    <WizText bold={!read} fontSize="xs" color="gray.700">
-                      {item.content}
-                    </WizText>
-                  </WizHStack>
-                ))}
-              </WizVStack>
+              <WizUnstyledTable>
+                <WizUnstyledTbody>
+                  {tableInfo?.map((item, i) => (
+                    <WizUnstyledTr key={`${item.title}_${i}`}>
+                      <WizUnstyledTd
+                        align="left"
+                        style={{
+                          paddingRight: THEME.spacing.xl,
+                          paddingBottom: THEME.spacing.xs,
+                        }}
+                      >
+                        <WizText bold={!read} fontSize="xs" color="gray.700">
+                          {item.title}
+                        </WizText>
+                      </WizUnstyledTd>
+                      <WizUnstyledTd
+                        align="left"
+                        style={{ paddingBottom: THEME.spacing.xs }}
+                      >
+                        <WizText bold={!read} fontSize="xs" color="gray.700">
+                          {item.content}
+                        </WizText>
+                      </WizUnstyledTd>
+                    </WizUnstyledTr>
+                  ))}
+                </WizUnstyledTbody>
+              </WizUnstyledTable>
               <WizText color="gray.600" fontSize="xs2">
                 {displayHowPast}
               </WizText>