use slug for course urls & improve design

src/app/globals.css

@@ -26,6 +26,7 @@ a {
 }
 
 .btn {
+	display: inline-block;
 	border-radius: var(--border-radius);
 	padding: 0.75rem 1rem;
 	font-size: 1rem;

src/app/kurslar/[courseSlug]/page.jsx

@@ -1,11 +1,11 @@
-import Link from 'next/link';
 import Container from "@/components/Container";
 import { COURSES } from "@/mockData";
 import { cn, formatPrice } from "@/utils";
+import Link from "next/link";
 import styles from "./page.module.css";
 
 export default function CourseDetailPage({ params }) {
-	const course = COURSES.find((c) => c.id === params.courseId);
+	const course = COURSES.find((c) => c.slug === params.courseSlug);
 
 	return (
 		<main className={styles.root}>
@@ -19,14 +19,18 @@ export default function CourseDetailPage({ params }) {
 					<div>
 						<h1>{course.name}</h1>
 						<div>{course.instructor.name}</div>
-						<button className={cn(styles.buyButton, "btn btn-primary")}>
-							Satın Al: {formatPrice(course.price)}
-						</button>
-						<br/>
-						<br/>
-						<Link href={`/kurslar/${params.courseId}/ogren`} className={cn(styles.startButton, "btn btn-primary")}>
+						{true ? (
+							<Link
+								href={`/kurslar/${params.courseSlug}/ogren`}
+								className={cn(styles.button, "btn btn-primary")}
+							>
 								Eğitime Başla
 							</Link>
+						) : (
+							<button className={cn(styles.button, "btn btn-primary")}>
+								Satın Al: {formatPrice(course.price)}
+							</button>
+						)}
 					</div>
 				</div>
 

src/app/kurslar/[courseSlug]/page.module.css

@@ -24,11 +24,8 @@
 	border-radius: var(--border-radius);
 }
 
-.buyButton {
-	margin-top: 1.5rem;
-}
-.startButton {
-	margin-top: 1rem;
+.button {
+	margin-top: 2rem;
 }
 
 .description {

src/components/CourseGrid.module.css

@@ -1,6 +1,6 @@
 .root {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, 300px);
+	grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
 	justify-content: stretch;
 	gap: 1rem;
 }

src/components/CourseGridItem.jsx

@@ -5,7 +5,7 @@ import styles from "./CourseGridItem.module.css";
 export default function CourseGridItem({ course }) {
 	return (
 		<Link
-			href={`/kurslar/${course.id}`}
+			href={`/kurslar/${course.slug}`}
 			className={cn(styles.root, "pressable")}
 		>
 			<img className={styles.image} src={course.imageUrl} alt="Kurs resmi" />

src/components/Header.jsx

@@ -1,3 +1,4 @@
+import { cn } from "@/utils";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import Link from "next/link";
 import styles from "./Header.module.css";
@@ -5,7 +6,7 @@ import styles from "./Header.module.css";
 export default function Header() {
 	return (
 		<header className={styles.root}>
-			<Link className={styles.brand} href="/">
+			<Link className={cn(styles.brand, "pressable")} href="/">
 				<span>Cub</span>
 				<span className="fg-accent">Learn</span>
 			</Link>

src/components/Header.module.css

@@ -16,23 +16,5 @@
 .nav {
 	display: flex;
 	align-items: center;
-	gap: 2.5rem;
-}
-
-.search {
-	display: flex;
-	align-items: center;
-
-	.search-input {
-		padding: 8px;
-		margin-right: 8px;
-	}
-
-	.search-button {
-		padding: 8px 16px;
-		background-color: #ff0000;
-		color: #fff;
-		border: none;
-		cursor: pointer;
-	}
+	gap: 1.5rem;
 }

src/mockData.js

@@ -8,6 +8,7 @@ export const CATEGORIES = [
 export const COURSES = [
 	{
 		id: "1",
+		slug: "ethereum-ve-solidity",
 		name: "Ethereum ve Solidity",
 		description:
 			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vitae veritatis deserunt quidem hic ea repellendus fugiat ducimus tenetur. Fugit cumque quo saepe possimus rem qui odit vitae dignissimos reprehenderit!",
@@ -20,6 +21,7 @@ export const COURSES = [
 	},
 	{
 		id: "2",
+		slug: "akilli-sozlesme-guvenligi",
 		name: "Akıllı Sözleşme Güvenliği",
 		description:
 			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vitae veritatis deserunt quidem hic ea repellendus fugiat ducimus tenetur. Fugit cumque quo saepe possimus rem qui odit vitae dignissimos reprehenderit!",
@@ -32,6 +34,7 @@ export const COURSES = [
 	},
 	{
 		id: "3",
+		slug: "next-js-ile-onyuz-uygulamalari-gelistirme",
 		name: "Next.js ile Önyüz Uygulamaları Geliştirme",
 		description:
 			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vitae veritatis deserunt quidem hic ea repellendus fugiat ducimus tenetur. Fugit cumque quo saepe possimus rem qui odit vitae dignissimos reprehenderit!",
@@ -44,10 +47,11 @@ export const COURSES = [
 	},
 	{
 		id: "4",
+		slug: "pardus-a-giris",
 		name: "Pardus'a Giriş",
 		description:
 			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vitae veritatis deserunt quidem hic ea repellendus fugiat ducimus tenetur. Fugit cumque quo saepe possimus rem qui odit vitae dignissimos reprehenderit!",
-		price: "0.05",
+		price: "150",
 		imageUrl: "/course-images/pardus.jpg",
 		instructor: {
 			name: "Berk Çiçek",
@@ -56,9 +60,11 @@ export const COURSES = [
 	},
 	{
 		id: "5",
+		slug: "yapay-zekaya-giris",
 		name: "Yapay Zekaya Giriş",
 		description:
 			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vitae veritatis deserunt quidem hic ea repellendus fugiat ducimus tenetur. Fugit cumque quo saepe possimus rem qui odit vitae dignissimos reprehenderit!",
+		price: "250",
 		imageUrl: "/course-images/ai.png",
 		instructor: {
 			name: "Muhammed Akıncı",
@@ -67,6 +73,7 @@ export const COURSES = [
 	},
 	{
 		id: "6",
+		slug: "react-js-temelleri",
 		name: "React.js Temelleri",
 		description:
 			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vitae veritatis deserunt quidem hic ea repellendus fugiat ducimus tenetur. Fugit cumque quo saepe possimus rem qui odit vitae dignissimos reprehenderit!",
@@ -79,6 +86,7 @@ export const COURSES = [
 	},
 	{
 		id: "7",
+		slug: "avalanche-ile-merkeziyetsiz-uygulamalar",
 		name: "Avalanche ile Merkeziyetsiz Uygulamalar",
 		description:
 			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vitae veritatis deserunt quidem hic ea repellendus fugiat ducimus tenetur. Fugit cumque quo saepe possimus rem qui odit vitae dignissimos reprehenderit!",

src/utils.js

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