From 2edd07bc571362d0e97d74e3662851443355cc38 Mon Sep 17 00:00:00 2001
From: Krittin SETDHAVANICH <krittin.set@ku.th>
Date: Wed, 28 Jun 2023 14:43:36 +0700
Subject: [PATCH] added Jodes

---
 src/App.jsx  |  14 +++----
 src/Card.jsx | 109 +++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 114 insertions(+), 9 deletions(-)
 create mode 100644 src/Card.jsx

diff --git a/src/App.jsx b/src/App.jsx
index a609ee1..2a6131e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -14,6 +14,7 @@ import Typography from '@mui/material/Typography';
 import Container from '@mui/material/Container';
 import Link from '@mui/material/Link';
 import {createTheme, ThemeProvider} from '@mui/material/styles';
+import cards from './Card';
 
 function Copyright() {
     return (
@@ -28,8 +29,6 @@ function Copyright() {
     );
 }
 
-const cards = [1, 2, 3, 4, 5, 6, 7, 8, 9];
-
 const defaultTheme = createTheme();
 
 export default function App() {
@@ -107,7 +106,7 @@ export default function App() {
 
                         {/*# TODO:Edit the Jode here */}
                         {cards.map((card) => (
-                            <Grid item key={card} xs={12} sm={6} md={4}>
+                            <Grid item xs={12} sm={6} md={4}>
                                 <Card
                                     sx={{
                                         height: '100%',
@@ -127,17 +126,14 @@ export default function App() {
                                     <CardContent sx={{flexGrow: 1}}>
                                         <Typography gutterBottom variant="h5" component="h2"
                                                     color="#7DD6F6">
-                                            Jode1
+                                            {card.title}
                                         </Typography>
                                         <Typography color="aliceblue">
-                                            This is a media card. You can use this section to
-                                            describe the
-                                            content.
+                                            {card.describe}
                                         </Typography>
                                     </CardContent>
                                     <CardActions>
-                                        <Button size="small" sx={{color: "#69ACCD"}}>View</Button>
-                                        <Button size="small">Edit</Button>
+                                        <Button size="small" sx={{color: "#69ACCD"}}><a href={card.link}>View</a></Button>
                                     </CardActions>
                                 </Card>
                             </Grid>
diff --git a/src/Card.jsx b/src/Card.jsx
new file mode 100644
index 0000000..3acda22
--- /dev/null
+++ b/src/Card.jsx
@@ -0,0 +1,109 @@
+const cards = [
+    {
+        'title': 'Syntax',
+        'describe': 'Mai tum leaw',
+        'link': 'https://elabsheet.org/elab/taskpads/show/jr070sqaqp/'
+    },
+    {
+        'title': 'Variables',
+        'describe': 'Mai tum leaw',
+        'link': 'https://elabsheet.org/elab/taskpads/change/jr070sqaqp/yqxiczozva/'
+    },
+    {
+        'title': 'Data Type 01',
+        'describe': 'Mai tum leaw',
+        'link': 'www.'
+    },
+    {
+        'title': 'Data Type 02',
+        'describe': 'Mai tum leaw',
+        'link': 'www.'
+    },
+    {
+        'title': 'Data Type 03',
+        'describe': 'Mai tum leaw',
+        'link': 'www.'
+    },
+    {
+        'title': 'Numbers, Casting, String',
+        'describe': 'Mai tum leaw',
+        'link': 'www.'
+    },
+    {
+        'title': 'Strings',
+        'describe': 'Mai tum leaw',
+        'link': 'https://elabsheet.org/elab/taskpads/change/4k422fwoou/v49ajp3qgh/'
+    },
+    {
+        'title': 'Boolean 01',
+        'describe': 'Mai tum leaw',
+        'link': 'www.'
+    },
+    {
+        'title': 'Boolean 02',
+        'describe': 'Mai tum leaw',
+        'link': 'www.'
+    },
+    {
+        'title': 'Operators 01',
+        'describe': 'Mai tum leaw',
+        'link': 'www.'
+    },
+    {
+        'title': 'Operators 02',
+        'describe': 'Mai tum leaw',
+        'link': 'www.'
+    },
+    {
+        'title': 'Lists',
+        'describe': 'Mai tum leaw',
+        'link': 'www.'
+    },
+    {
+        'title': 'Tuples',
+        'describe': 'Mai tum leaw',
+        'link': 'www.'
+    },
+    {
+        'title': 'Sets',
+        'describe': 'Mai tum leaw',
+        'link': 'www.'
+    },
+    {
+        'title': 'Dictionaries',
+        'describe': 'Mai tum leaw',
+        'link': 'www.'
+    },
+    {
+        'title': 'If Else 01',
+        'describe': 'Mai tum leaw',
+        'link': 'www.'
+    },
+    {
+        'title': 'If Else 02',
+        'describe': 'Mai tum leaw',
+        'link': 'www.'
+    },
+    {
+        'title': 'If Else 03',
+        'describe': 'Mai tum leaw',
+        'link': 'www.'
+    },
+    {
+        'title': 'While Loops',
+        'describe': 'Mai tum leaw',
+        'link': 'www.'
+    },
+    {
+        'title': 'For Loops',
+        'describe': 'Mai tum leaw',
+        'link': 'www.'
+    },
+    {
+        'title': 'Functions',
+        'describe': 'Mai tum leaw',
+        'link': 'www.'
+    }
+]
+
+export default cards;
\ No newline at end of file