From 8f8cebcd6f0c5fecf6ff1b7a46b8f84ab9a21efb Mon Sep 17 00:00:00 2001
From: chefmomota <momota@pancakeswap.com>
Date: Tue, 9 Jul 2024 18:12:38 +0800
Subject: [PATCH] feat: Add preview markdown

---
 .../components/EditTemplate.tsx                 | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/apps/gamification/views/DashboardQuestEdit/components/EditTemplate.tsx b/apps/gamification/views/DashboardQuestEdit/components/EditTemplate.tsx
index 975ec009e2c46..6fac820ab6491 100644
--- a/apps/gamification/views/DashboardQuestEdit/components/EditTemplate.tsx
+++ b/apps/gamification/views/DashboardQuestEdit/components/EditTemplate.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from '@pancakeswap/localization'
-import { Box, Flex, FlexGap, Input, Text } from '@pancakeswap/uikit'
+import { Box, Card, CardBody, CardHeader, Flex, FlexGap, Heading, Input, ReactMarkdown, Text } from '@pancakeswap/uikit'
 import { DatePicker, DatePickerPortal, TimePicker } from 'components/DatePicker'
 import dynamic from 'next/dynamic'
 import React from 'react'
@@ -122,6 +122,21 @@ export const EditTemplate: React.FC<React.PropsWithChildren<EditTemplateProps>>
           onTextChange={(value) => updateValue('description', value)}
         />
       </Box>
+
+      {description && (
+        <Box mb="24px">
+          <Card>
+            <CardHeader>
+              <Heading as="h3" scale="md">
+                {t('Preview')}
+              </Heading>
+            </CardHeader>
+            <CardBody p="0" px="24px">
+              <ReactMarkdown>{description}</ReactMarkdown>
+            </CardBody>
+          </Card>
+        </Box>
+      )}
     </FlexGap>
   )
 }