feat: added more tutorials and fixed code view bug on tutorial

components/tutorial/list.tsx

@@ -57,6 +57,46 @@ const data = [
     lang: "C#",
     langId: "csharp",
   },
+  {
+    id: "tic-tac-toe",
+    img: "/tic-tac-teo-contract.png",
+    title: "Tic-Tac-Toe Contract",
+    description: "Decentralized gamify Contract",
+    level: "Intermediate",
+    levelId: "intermediate",
+    lang: "C#",
+    langId: "csharp",
+  },
+  {
+    id: "expense-tracker",
+    img: "/expense-tracker-contract.png",
+    title: "Expense Tracker Contract",
+    description: "User-friendly interface for recording expenses, categorizing them, and tracking spending habitst",
+    level: "Intermediate",
+    levelId: "intermediate",
+    lang: "C#",
+    langId: "csharp",
+  },
+  {
+    id: "single-pool-staking",
+    img: "/single-pool-staking-contract.png",
+    title: "Single Pool Staking Contract",
+    description: "Allows users to stake their tokens in a single staking pool",
+    level: "Advanced",
+    levelId: "advanced",
+    lang: "C#",
+    langId: "csharp",
+  },
+  {
+    id: "role",
+    img: "/allowance-contract.png",
+    title: "Allowance Contract",
+    description: "Integration of two smart contracts, RoleContract and AllowanceContract, focusing on role-based access and fund management",
+    level: "Advanced",
+    levelId: "advanced",
+    lang: "C#",
+    langId: "csharp",
+  },
 ].filter((i) => (solidityEnabled ? true : i.langId !== "solidity"));
 
 export function TutorialList() {

src/main.tsx

@@ -13,6 +13,11 @@ import HelloWorldSolidity from './tutorials/hello-world-solidity.mdx';
 import LotteryGame from './tutorials/lottery-game.mdx';
 import Todo from './tutorials/todo.mdx';
 import VoteContract from './tutorials/vote-contract.mdx';
+import TicTacToeContract from './tutorials/tic-tac-toe.mdx';
+import ExpenseTracker from './tutorials/expense-tracker.mdx';
+import SinglePoolStaking from './tutorials/single-pool-staking.mdx';
+import RoleContract from './tutorials/role.mdx';
+import AllowanceContract from './tutorials/allowance.mdx';
 import {Component as Tutorial} from './routes/tutorial';
 
 const tutorials = [
@@ -36,6 +41,26 @@ const tutorials = [
     path: 'vote-contract',
     component: VoteContract,
   },
+  {
+    path: 'tic-tac-toe',
+    component: TicTacToeContract,
+  },
+  {
+    path: 'expense-tracker',
+    component: ExpenseTracker,
+  },
+  {
+    path: 'single-pool-staking',
+    component: SinglePoolStaking,
+  },
+  {
+    path: 'role',
+    component: RoleContract,
+  },
+  {
+    path: 'allowance',
+    component: AllowanceContract,
+  },
 ]
 
 const router = createBrowserRouter(createRoutesFromElements(<Route path="/" lazy={() => import('./routes/root')}>

src/routes/tutorial.scss

@@ -22,11 +22,24 @@
   pre {
     overflow-x: auto;
     padding: 1rem 0;
+    background-color: #282A36 !important;
   }
-   
+
   pre [data-line] {
     padding: 0 1rem;
   }
+
+  code {
+    background-color: #f8f8f8;
+    border: 0.1rem solid #ddd;
+    border-radius: 0.4rem;
+    padding-inline: 0.2rem;
+  }
+  pre code {
+    background: #282A36;
+    border: none;
+    border-radius: 0;
+  }
 
   h1 {
     font-size: 2rem;
@@ -55,6 +68,11 @@
     margin-bottom: 1rem;
   }
 
+  ol{
+    list-style: auto;
+    margin-left: 1rem;
+  }
+
   [data-rehype-pretty-code-title] {
     border-top-left-radius: .5rem;
     border-top-right-radius: .5rem;
@@ -138,3 +156,11 @@
   }
 }
 
+.dark {
+  .mdx-content {
+    code {
+      background-color: #ffffff1a;
+      border: 0.1rem solid #ffffff1a;
+    }
+  }
+}