feat(known-issue): add detailed info

vtexdocs · Jan 24, 2024 · 04b9437 · 04b9437
1 parent 42f4679
commit 04b9437
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/src/pages/known-issues/[slug].tsx b/src/pages/known-issues/[slug].tsx
@@ -39,6 +39,7 @@ import { useIntl } from 'react-intl'
 import { remarkReadingTime } from 'utils/remark_plugins/remarkReadingTime'
 import { getDocsPaths as getKnownIssuesPaths } from 'utils/getDocsPaths'
 import { getMessages } from 'utils/get-messages'
+import Tag from 'components/tag'
 
 const docsPathsGLOBAL = await getKnownIssuesPaths('known-issues')
 
@@ -108,9 +109,20 @@ const KnownIssuePage: NextPage<Props> = ({
                   <Text sx={styles.documentationTitle} className="title">
                     {serialized.frontmatter?.title}
                   </Text>
-                  <Text sx={styles.documentationExcerpt}>
-                    {serialized.frontmatter?.excerpt}
-                  </Text>
+                  <Box sx={styles.divider}></Box>
+                  <Flex sx={styles.detailedInfo}>
+                    <Flex sx={styles.id}>
+                      <Text>ID: {serialized.frontmatter?.id}</Text>
+                      <Tag>{serialized.frontmatter?.kiStatus}</Tag>
+                    </Flex>
+                    <Text sx={styles.dates}>
+                      <em>Criado em </em>
+                      {serialized.frontmatter?.createdAt}
+                      {' • '}
+                      <em>Atualizado em </em>
+                      {serialized.frontmatter?.updatedAt}
+                    </Text>
+                  </Flex>
                 </header>
                 <MarkdownRenderer serialized={serialized} />
               </article>

diff --git a/src/styles/documentation-page.ts b/src/styles/documentation-page.ts
@@ -126,6 +126,26 @@ const flexContainer: SxStyleProp = {
   columnGap: '16px',
 }
 
+const detailedInfo: SxStyleProp = {
+  justifyContent: 'space-between',
+  flexDirection: 'column',
+  py: '16px',
+  gap: '8px',
+}
+
+const dates: SxStyleProp = {
+  color: '#A1A8B3',
+
+  em: {
+    fontWeight: '600',
+    fontStyle: 'normal',
+  },
+}
+
+const id: SxStyleProp = {
+  justifyContent: 'space-between',
+}
+
 export default {
   container,
   mainContainer,
@@ -141,4 +161,7 @@ export default {
   divider,
   readingTime,
   flexContainer,
+  detailedInfo,
+  dates,
+  id,
 }