osmannyildiz
/
CubLearn-Frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Frontend kısmında iyileştirmeler yapıldı. Fixlendi

This commit is contained in:
Muhammed Akıncı 2023-12-16 15:17:07 +03:00
parent 5fe6d25933
commit 711eeef127
8 changed files with 207 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/app/kategoriler / [categorySlug]/page.module.css Normal file
View File

@ -0,0 +1,33 @@
@media screen and (max-width: 900px) {
.root {
text-align: center;
}
}
.columns {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
@media screen and (max-width: 900px) {
.columns {
flex-direction: column;
align-items: center;
}
}
.image {
width: 50%;
max-width: 1280px;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--border-radius);
}
.buyButton {
margin-top: 1.5rem;
}
.description {
margin-top: 1.5rem;
}

42
src/app/kategoriler /page.jsx Normal file
View File

@ -0,0 +1,42 @@
import Container from "@/components/Container";
import styles from "./page.module.css";
import { COURSES } from "@/mockData";
import { formatPrice } from "@/utils";
import CourseGrid from "@/components/CourseGrid";
export default function CategoryPage({ params }) {
// Seçilen kategoriye göre kursları filtrele
const filteredCourses = COURSES.filter(
(course) => course.category.slug === params.categorySlug
);
// Eğer filtrelenen kurslar boşsa, isteğe bağlı bir mesaj gösterebilirsiniz
if (filteredCourses.length === 0) {
return (
<main className={styles.root}>
<Container>
<section>
<div>
<h1 className={styles.sectionTitle}>Bu kategoriye ait kurs bulunamadı.</h1>
</div>
</section>
</Container>
</main>
);
}
// Filtrelenen kurslar varsa, her bir kurs için ayrı bir blok oluşturun
return (
<main className={styles.root}>
<Container>
<section>
<div>
<h1 className={styles.sectionTitle}>{params.categorySlug}</h1>
<h2 className={styles.sectionTitle}>Çok Satanlar</h2>
<CourseGrid courses={filteredCourses} />
</div>
</section>
</Container>
</main>
);
}

3
src/app/kurslar/[courseId]/page.jsx
View File

@ -21,6 +21,9 @@ export default function CourseDetailPage({ params }) {
<button className={cn(styles.buyButton, "btn btn-primary")}>
Satın Al: {formatPrice(course.price)}
</button>
<button className={cn(styles.buyButton, "btn btn-primary")}>
Eğitime Başla
</button>
</div>
</div>

14
src/app/page.jsx
View File

@ -1,12 +1,24 @@
import Link from "next/link";
import Container from "@/components/Container";
import CourseGrid from "@/components/CourseGrid";
import { COURSES } from "@/mockData";
import { CATEGORIES, COURSES } from "@/mockData";
import styles from "./page.module.css";
export default function HomePage() {
return (
<main className={styles.root}>
<Container>
{/* Kategorilerin buton gibi yan yana dizilmiş hali */}
<div className={styles.categories}>
{CATEGORIES.map((category) => (
<Link key={category.slug} href={`/kategoriler/${category.slug}`}>
<div className={styles.categoryButton}>
<span>{category.name}</span>
</div>
</Link>
))}
</div>
<section>
<h1 className={styles.sectionTitle}>Çok Satanlar</h1>
<CourseGrid courses={COURSES} />

14
src/app/page.module.css
View File

@ -7,3 +7,17 @@
font-weight: 300;
margin-bottom: 1rem;
}
.categories {
display: flex;
gap: 8px;
margin-bottom: 16px;
}
.categoryButton {
padding: 8px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
}

9
src/components/Header.jsx
View File

@ -1,3 +1,4 @@
// Header.js
import { ConnectButton } from "@rainbow-me/rainbowkit";
import Link from "next/link";
import styles from "./Header.module.css";
@ -11,6 +12,14 @@ export default function Header() {
</Link>
<div className={styles.nav}>
{/* Arama butonu ekleniyor */}
<div className={styles.search}>
<input className={styles["search-input"]} type="text" placeholder="Ara..." />
<button className={styles["search-button"]} type="button">
Ara
</button>
</div>
<Link href="/hesabim" className="btn btn-flat">
Hesabım
</Link>

20
src/components/Header.module.css
View File

@ -18,3 +18,23 @@
align-items: center;
gap: 2.5rem;
}
.search {
display: flex;
align-items: center;
/* input yerine .search-input class'ını kullan */
.search-input {
padding: 8px;
margin-right: 8px;
}
/* button yerine .search-button class'ını kullan */
.search-button {
padding: 8px 16px;
background-color: #ff0000;
color: #fff;
border: none;
cursor: pointer;
}
}

44
src/mockData.js
View File

@ -1,14 +1,38 @@
export const COURSES = [
// categories
export const CATEGORIES = [
{ slug: "blokzincir", name: "Blokzincir" },
{ slug: "ön-yüz", name: "Frontend" },
{ slug: "linux", name: "Linux" },
{ slug: "yapay-zeka", name: "Yapay Zeka" },
];
// courses
export const COURSES = [
{
id: "6a3753e8-5f4e-4f4d-a05e-44b84b8f7aed",
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!",
price: "0.05",
start: "",
imageUrl: "https://osmannyildiz.tk/cublearn/akinci.webp",
instructor: {
name: "Baturalp Güvenç",
},
category: CATEGORIES.find((category) => category.slug === "blokzincir"),
},
{
id: "6a3753e8-5f4e-4f4d-a05e-44b84b8f7aed",
name: "Audit",
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",
start: "",
imageUrl: "https://osmannyildiz.tk/cublearn/akinci.webp",
instructor: {
name: "Mehmet Hayırlı",
},
category: CATEGORIES.find((category) => category.slug === "blokzincir"),
},
{
id: "c7253736-5756-4a64-a072-917c66afa877",
@ -16,10 +40,12 @@ export const COURSES = [
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",
start: "",
imageUrl: "https://osmannyildiz.tk/cublearn/elmacik.webp",
instructor: {
name: "Furkan Ayvaz",
},
category: CATEGORIES.find((category) => category.slug === "ön-yüz"),
},
{
id: "59a8f94b-7358-4ffe-bced-a54cccc93e64",
@ -27,9 +53,23 @@ export const COURSES = [
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",
start: "",
imageUrl: "https://osmannyildiz.tk/cublearn/masalik.webp",
instructor: {
name: "Berk Çiçek",
},
category: CATEGORIES.find((category) => category.slug === "linux"),
},
];
{
id: "6a375fae8-5f4e-4244d-a05e-44b84b8adaf7aed",
name: "Yapay Zekaya Giriş",
description: "Hosta La Vista!",
price: "0.05",
imageUrl: "https://osmannyildiz.tk/cublearn/akinci.webp",
instructor: {
name: "Muhammed Akıncı",
},
category: CATEGORIES.find((category) => category.slug === "yapay-zeka"),
},
];