add more course info

src/components/CourseGridItem.jsx

@@ -1,9 +1,14 @@
+import { formatPrice } from "@/utils";
 import styles from "./CourseGridItem.module.css";
 
 export default function CourseGridItem({ course }) {
 	return (
 		<div className={styles.root}>
-			<span>{course.name}</span>
+			<img className={styles.image} src={course.imageUrl} alt="Kurs resmi" />
+			<div className={styles.body}>
+				<span className={styles.name}>{course.name}</span>
+				<span>{formatPrice(course.price)}</span>
+			</div>
 		</div>
 	);
 }

src/components/CourseGridItem.module.css

@@ -1,6 +1,25 @@
 .root {
 	background-color: var(--color-bg1);
 	border-radius: var(--border-radius);
-	padding: 1rem;
+	overflow: hidden;
 	cursor: pointer;
 }
+
+.image {
+	width: 100%;
+	aspect-ratio: 16 / 9;
+	object-fit: cover;
+}
+
+.body {
+	padding: 1rem;
+	padding-top: 0.5rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.name {
+	font-size: 1.2rem;
+	font-weight: 500;
+}

src/mockData.js

@@ -2,13 +2,28 @@ export const COURSES = [
 	{
 		id: "6a3753e8-5f4e-4f4d-a05e-44b84b8f7aed",
 		name: "Ethereum ve Solidity",
+		price: "0.05",
+		imageUrl: "https://osmannyildiz.tk/cublearn/akinci.webp",
+		instructor: {
+			name: "Baturalp Güvenç",
+		},
 	},
 	{
 		id: "c7253736-5756-4a64-a072-917c66afa877",
 		name: "Next.js ile Önyüz Uygulamaları Geliştirme",
+		price: "0.05",
+		imageUrl: "https://osmannyildiz.tk/cublearn/elmacik.webp",
+		instructor: {
+			name: "Furkan Ayvaz",
+		},
 	},
 	{
 		id: "59a8f94b-7358-4ffe-bced-a54cccc93e64",
 		name: "Pardus'a Giriş",
+		price: "0.05",
+		imageUrl: "https://osmannyildiz.tk/cublearn/masalik.webp",
+		instructor: {
+			name: "Berk Çiçek",
+		},
 	},
 ];

src/utils.js

@@ -1,3 +1,5 @@
 export const cn = (...args) => {
 	return args.filter((arg) => typeof arg === "string").join(" ");
 };
+
+export const formatPrice = (price) => `${price} ETH`;