From c7ce43eee86b82ff58a59e0ced3bc3e2764c4bdf Mon Sep 17 00:00:00 2001 From: osmannyildiz Date: Sun, 17 Dec 2023 00:00:31 +0300 Subject: [PATCH] use slug for course urls & improve design --- src/app/globals.css | 1 + .../ogren/page.jsx | 0 .../ogren/page.module.css | 0 .../{[courseId] => [courseSlug]}/page.jsx | 24 +++++++++++-------- .../page.module.css | 7 ++---- src/components/CourseGrid.module.css | 2 +- src/components/CourseGridItem.jsx | 2 +- src/components/Header.jsx | 3 ++- src/components/Header.module.css | 20 +--------------- src/mockData.js | 10 +++++++- src/utils.js | 2 +- 11 files changed, 32 insertions(+), 39 deletions(-) rename src/app/kurslar/{[courseId] => [courseSlug]}/ogren/page.jsx (100%) rename src/app/kurslar/{[courseId] => [courseSlug]}/ogren/page.module.css (100%) rename src/app/kurslar/{[courseId] => [courseSlug]}/page.jsx (58%) rename src/app/kurslar/{[courseId] => [courseSlug]}/page.module.css (85%) diff --git a/src/app/globals.css b/src/app/globals.css index 480898f..032524b 100644 --- a/src/app/globals.css +++ b/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; diff --git a/src/app/kurslar/[courseId]/ogren/page.jsx b/src/app/kurslar/[courseSlug]/ogren/page.jsx similarity index 100% rename from src/app/kurslar/[courseId]/ogren/page.jsx rename to src/app/kurslar/[courseSlug]/ogren/page.jsx diff --git a/src/app/kurslar/[courseId]/ogren/page.module.css b/src/app/kurslar/[courseSlug]/ogren/page.module.css similarity index 100% rename from src/app/kurslar/[courseId]/ogren/page.module.css rename to src/app/kurslar/[courseSlug]/ogren/page.module.css diff --git a/src/app/kurslar/[courseId]/page.jsx b/src/app/kurslar/[courseSlug]/page.jsx similarity index 58% rename from src/app/kurslar/[courseId]/page.jsx rename to src/app/kurslar/[courseSlug]/page.jsx index 776bba5..10bd7cf 100644 --- a/src/app/kurslar/[courseId]/page.jsx +++ b/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 (
@@ -19,14 +19,18 @@ export default function CourseDetailPage({ params }) {

{course.name}

{course.instructor.name}
- -
-
- - Eğitime Başla - + {true ? ( + + Eğitime Başla + + ) : ( + + )}
diff --git a/src/app/kurslar/[courseId]/page.module.css b/src/app/kurslar/[courseSlug]/page.module.css similarity index 85% rename from src/app/kurslar/[courseId]/page.module.css rename to src/app/kurslar/[courseSlug]/page.module.css index 48284a6..f93fe21 100644 --- a/src/app/kurslar/[courseId]/page.module.css +++ b/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 { diff --git a/src/components/CourseGrid.module.css b/src/components/CourseGrid.module.css index 96498d2..ac23f36 100644 --- a/src/components/CourseGrid.module.css +++ b/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; } diff --git a/src/components/CourseGridItem.jsx b/src/components/CourseGridItem.jsx index b01bf7a..dfce953 100644 --- a/src/components/CourseGridItem.jsx +++ b/src/components/CourseGridItem.jsx @@ -5,7 +5,7 @@ import styles from "./CourseGridItem.module.css"; export default function CourseGridItem({ course }) { return ( Kurs resmi diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 9857a4b..d09f5fe 100644 --- a/src/components/Header.jsx +++ b/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 (
- + Cub Learn diff --git a/src/components/Header.module.css b/src/components/Header.module.css index 7e02638..245842b 100644 --- a/src/components/Header.module.css +++ b/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; } diff --git a/src/mockData.js b/src/mockData.js index 9b83d66..ba372d7 100644 --- a/src/mockData.js +++ b/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!", diff --git a/src/utils.js b/src/utils.js index e6516e4..90f422a 100644 --- a/src/utils.js +++ b/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`;