Merge branch 'tax-guide-for-uk-based-nris'

package.json

@@ -42,8 +42,10 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-ga": "3.3.1",
+        "react-markdown": "^9.0.1",
         "react-share": "5.1.0",
         "react-social-icons": "6.16.0",
+        "react-ts-tradingview-widgets": "^1.2.5",
         "rehype-autolink-headings": "7.1.0",
         "rehype-citation": "^2.0.0",
         "rehype-slug": "6.0.0",

src/components/ComparisonTable.tsx

@@ -11,6 +11,7 @@ import {
     Divider,
     Box
 } from '@mui/material'
+import Markdown from 'react-markdown'
 
 interface CellContent {
     content: string | React.ReactNode
@@ -50,17 +51,17 @@ const tableCellSx = {
     }
 }
 
-const TableHeaderCell: React.FC<{ name: string; description?: string }> = ({
-    name,
-    description
-}) => {
+const TableHeaderCell: React.FC<{
+    name: string
+    description?: string
+}> = ({ name, description }) => {
     return (
         <TableCell sx={tableCellSx}>
             <Typography
                 variant="subtitle1"
                 sx={{ fontWeight: 'bold', textAlign: 'center' }}
             >
-                {name}
+                <Markdown>{name}</Markdown>
             </Typography>
             {description && (
                 <Typography
@@ -73,7 +74,7 @@ const TableHeaderCell: React.FC<{ name: string; description?: string }> = ({
                         margin: 'auto'
                     }}
                 >
-                    {description}
+                    <Markdown>{description}</Markdown>
                 </Typography>
             )}
         </TableCell>
@@ -140,9 +141,9 @@ export const ComparisonTable: React.FC<TableProps> = ({
                         Summary:
                     </Typography>
                     <Typography variant="body1">{summary}</Typography>
+                    <Divider sx={{ marginTop: 2, marginBottom: 4 }} />
                 </>
             )}
-            <Divider sx={{ marginTop: 2, marginBottom: 4 }} />
         </Box>
     )
 }

src/components/Iframe.tsx

@@ -1,32 +1,40 @@
 import * as React from 'react'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import Figure from './Figure'
 
 interface IframeProps {
     src: string
+    staticSrc: string
 }
 
-export const Iframe: React.FC<IframeProps> = ({
-    src
-}) => (
-    <div
-        style={{
-            position: 'relative',
-            overflow: 'hidden',
-            width: '100%',
-            paddingTop: '56.25%'
-        }}
-    >
-        <iframe
+export const Iframe: React.FC<IframeProps> = ({ src, staticSrc }) => {
+    const isMobile = useMediaQuery('(max-width:600px)')
+
+    return isMobile && staticSrc ? (
+        <Figure src={staticSrc} size="l" />
+    ) : (
+        <div
             style={{
-                border: 0,
-                position: 'absolute',
-                top: '0',
-                bottom: '0',
-                left: '0',
-                right: '0',
+                position: 'relative',
+                overflow: 'hidden',
                 width: '100%',
-                height: '100%'
+                paddingTop: '56.25%',
+                minWidth: '300px'
             }}
-            src={src}
-        ></iframe>
-    </div>
-)
+        >
+            <iframe
+                style={{
+                    border: 0,
+                    position: 'absolute',
+                    top: '0',
+                    bottom: '0',
+                    left: '0',
+                    right: '0',
+                    width: '100%',
+                    height: '100%'
+                }}
+                src={src}
+            ></iframe>
+        </div>
+    )
+}

src/components/SymbolOverviewWidget.tsx

@@ -0,0 +1,15 @@
+import dynamic from 'next/dynamic'
+import { Box } from '@mui/material'
+
+const SymbolOverview = dynamic(
+    () => import('react-ts-tradingview-widgets').then((w) => w.SymbolOverview),
+    {
+        ssr: false
+    }
+)
+
+export const SymbolOverviewWidget = (props) => (
+    <Box sx={{ marginTop: 2, marginBottom: 5, height: '400px' }}>
+        <SymbolOverview widgetFontColor="#000000" {...props} />
+    </Box>
+)