From 9c6d9146dc5baf778908ab45f20f9c9a02ff97e8 Mon Sep 17 00:00:00 2001
From: Sonatai <gebauerjenny@yahoo.de>
Date: Mon, 8 Jan 2024 12:11:41 +0100
Subject: [PATCH] #99 code tag styling

---
 src/App.tsx                                               | 3 +++
 src/components/shared/CodeTag/CodeTag.tsx                 | 8 ++++++++
 src/components/shared/CodeTag/styles.css                  | 5 +++++
 .../shared/MarkdownRenderer/MarkdownRenderer.tsx          | 5 ++---
 4 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 src/components/shared/CodeTag/CodeTag.tsx
 create mode 100644 src/components/shared/CodeTag/styles.css

diff --git a/src/App.tsx b/src/App.tsx
index 7a369b3..dceea8d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,6 +21,7 @@ import gswGroovyGrape from './pages/GettingStarted/GettingStartedWithGroovyGrape
 import gswJitpack from './pages/GettingStarted/GettingStartedWithJitpack.md';
 import { NeuralNetworksQuickstart } from './pages/GettingStarted/NeuralNetworksQuickstart/NeuralNetworksQuickstart';
 import { Home } from './pages/Home/Home';
+import { CodeTag } from './components/shared/CodeTag/CodeTag';
 
 export const App = (): JSX.Element => {
     const { data: summary, isLoading, isError } = useGetSummary();
@@ -91,6 +92,8 @@ export const App = (): JSX.Element => {
                                     <MarkdownRenderer>
                                         {example.narrative}
                                     </MarkdownRenderer>
+                                    <br />
+                                    <CodeTag>Code Tag</CodeTag>
                                 </CustomPage>
                             }
                         />
diff --git a/src/components/shared/CodeTag/CodeTag.tsx b/src/components/shared/CodeTag/CodeTag.tsx
new file mode 100644
index 0000000..8108ffa
--- /dev/null
+++ b/src/components/shared/CodeTag/CodeTag.tsx
@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import './styles.css';
+
+export const CodeTag = (props: PropsWithChildren<unknown>) => {
+    const { children } = props;
+
+    return <code className="code-tag">{children}</code>;
+};
diff --git a/src/components/shared/CodeTag/styles.css b/src/components/shared/CodeTag/styles.css
new file mode 100644
index 0000000..5d276da
--- /dev/null
+++ b/src/components/shared/CodeTag/styles.css
@@ -0,0 +1,5 @@
+.code-tag {
+    @apply bg-[#61052A];
+    @apply rounded-md;
+    @apply p-1;
+}
diff --git a/src/components/shared/MarkdownRenderer/MarkdownRenderer.tsx b/src/components/shared/MarkdownRenderer/MarkdownRenderer.tsx
index 9961101..3528259 100644
--- a/src/components/shared/MarkdownRenderer/MarkdownRenderer.tsx
+++ b/src/components/shared/MarkdownRenderer/MarkdownRenderer.tsx
@@ -12,6 +12,7 @@ import {
     MdTableRow,
     SyntaxHighlighter,
 } from '../..';
+import { CodeTag } from '../CodeTag/CodeTag';
 
 export const MarkdownRenderer = (props: IMarkdownRenderer) => {
     const { children: content } = props;
@@ -27,9 +28,7 @@ export const MarkdownRenderer = (props: IMarkdownRenderer) => {
                             language={match[1]}
                         />
                     ) : (
-                        <code {...props} className={className}>
-                            {children}
-                        </code>
+                        <CodeTag {...props}>{children}</CodeTag>
                     );
                 },
                 hr: () => {