Skip to content

Commit 9deeba4

Browse files
ajay-dhangarajay-dhangar
committed
UI updated
1 parent 4c8ca27 commit 9deeba4

File tree

7 files changed

+234
-227
lines changed

7 files changed

+234
-227
lines changed

‎src/components/Home/Help.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import Link from '@docusaurus/Link';
33
import clsx from 'clsx';
44

5-
export default function HelpSection({ className = '' }) {
5+
export default function Help({ className = '' }) {
66
return (
77
<section className="px-4 pt-16">
88
<div

‎src/pages/faq.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import ReactMarkdown from 'react-markdown';
99

1010
import FAQs from '../faq.js';
1111
import { useEffect } from 'react';
12-
import HelpSection from '@src/components/Home/Help';
12+
import Help from '@src/components/Home/Help';
1313

1414
const tags = FAQs.reduce((allTags, faq) => {
1515
if (!faq.tags) return allTags;
@@ -228,7 +228,7 @@ export default function FAQPage() {
228228
</div>
229229
</section>
230230

231-
<HelpSection className="relative z-10 border-none mb-2" />
231+
<Help className="border-none" />
232232
<Footer />
233233
</Layout>
234234
);

‎src/pages/index.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@ import Layout from "@theme/Layout";
66
import Hero from "@src/components/Home/Hero";
77
import About from "@src/components/Home/About";
88
import WhyLearnJavaScript from "@src/components/Home/WhyLearnJavaScript";
9-
// import Testimonials from "@src/components/Home/Testimonials";
10-
// import Blog from "@src/components/Home/Blog";
11-
// import GetStarted from "@src/components/Home/GetStarted";
129
import Resources from "@src/components/Home/Resources";
1310
import Community from "@src/components/Home/Community";
1411
import Help from "@src/components/Home/Help";
@@ -25,11 +22,10 @@ export default function Home() {
2522
{/* <Testimonials /> */}
2623
{/* <Blog /> */}
2724
{/* <GetStarted /> */}
28-
<div className="z-0">
25+
<div className="z-10">
2926
<Resources />
3027
<Help className="-mb-56" />
3128
</div>
32-
3329
<Community />
3430
</Layout>
3531
);

‎src/theme/BlogListPage/index.tsx

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
import React, { useState, useMemo } from "react";
2+
import Link from "@docusaurus/Link";
3+
import clsx from "clsx";
4+
import { ArrowRightFilled } from "@fluentui/react-icons";
5+
import Layout from "@theme/Layout";
6+
import { Search } from "react-feather";
7+
8+
interface BlogPost {
9+
url: string;
10+
type: string;
11+
title: string;
12+
description: string;
13+
image: string;
14+
tags: string[];
15+
duration: string;
16+
author: string;
17+
}
18+
19+
const BLOG_POSTS: BlogPost[] = [
20+
{
21+
url: "#",
22+
type: "blog",
23+
title: "Understanding JavaScript Basics",
24+
description:
25+
"Dive deep into JavaScript fundamentals and learn how to build strong foundations.",
26+
image:
27+
"https://miro.medium.com/v2/resize:fit:1400/1*LyZcwuLWv2FArOumCxobpA.png",
28+
tags: ["JavaScript", "Basics"],
29+
duration: "4 min",
30+
author: "ajay-dhangar",
31+
},
32+
{
33+
url: "#",
34+
type: "blog",
35+
title: "Mastering Advanced JavaScript",
36+
description:
37+
"Explore closures, prototypal inheritance, and more advanced concepts.",
38+
image:
39+
"https://www.classcentral.com/report/wp-content/uploads/2017/10/js-and-frameworks-banner.png",
40+
tags: ["JavaScript", "Advanced"],
41+
duration: "8 min",
42+
author: "ajay-dhangar",
43+
},
44+
{
45+
url: "#",
46+
type: "video",
47+
title: "Building Your First React App",
48+
description: "A step-by-step guide to creating a React app from scratch.",
49+
image:
50+
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxJ081bn2RHuzj2cCVAfic6YVdPZ7NjyeZfw&s",
51+
tags: ["React", "Tutorial"],
52+
duration: "15 min",
53+
author: "ajay-dhangar",
54+
},
55+
{
56+
url: "#",
57+
type: "course",
58+
title: "JavaScript Complete Guide",
59+
description:
60+
"A comprehensive course that covers all aspects of JavaScript.",
61+
image: "https://i.ytimg.com/vi/zNAm4QCZsBs/maxresdefault.jpg",
62+
tags: ["JavaScript", "Course"],
63+
duration: "20 hours",
64+
author: "ajay-dhangar",
65+
},
66+
];
67+
68+
const Author = ({ username }: { username: string }) => {
69+
return (
70+
<div className="flex items-center gap-2">
71+
<img
72+
src={`https://github.com/${username}.png?size=60`}
73+
alt={`User ${username}`}
74+
loading="lazy"
75+
className="h-6 w-6 rounded-full border-2 border-solid border-white lg:h-12 lg:w-12"
76+
/>
77+
<span>{username}</span>
78+
</div>
79+
);
80+
};
81+
82+
const BlogListPage: React.FC = () => {
83+
const [searchTerm, setSearchTerm] = useState("");
84+
const [selectedTag, setSelectedTag] = useState<string | null>(null);
85+
86+
const allTags = useMemo(() => {
87+
const tags = new Set<string>();
88+
BLOG_POSTS.forEach((post) => {
89+
post.tags.forEach((tag) => tags.add(tag));
90+
});
91+
return Array.from(tags);
92+
}, []);
93+
94+
const filteredPosts = useMemo(() => {
95+
return BLOG_POSTS.filter((post) => {
96+
const matchesTag = selectedTag ? post.tags.includes(selectedTag) : true;
97+
const matchesSearch = post.title
98+
.toLowerCase()
99+
.includes(searchTerm.toLowerCase());
100+
return matchesTag && matchesSearch;
101+
});
102+
}, [selectedTag, searchTerm]);
103+
104+
return (
105+
<Layout
106+
title="Blog"
107+
description="Read the latest blog posts on JavaScript, React, and more."
108+
>
109+
<section className="noise-bg px-6 py-24">
110+
<div className="mx-auto flex max-w-7xl flex-col place-items-center justify-center">
111+
<h1 className="text-4xl font-bold text-center mb-4">Our Blogs</h1>
112+
<p className="text-lg text-center text-gray-600 dark:text-gray-400">
113+
Read the latest blog posts on JavaScript, React, and more.
114+
</p>
115+
<div className="relative flex w-full max-w-md items-center">
116+
<Search className="z-10 h-5 dark:text-gray-800 w-5 translate-x-1.5" />
117+
<input
118+
type="text"
119+
className="-ml-5 h-10 flex-1 rounded-md border border-solid border-gray-800 bg-white px-3 pl-8 text-sm text-gray-700 dark:border-gray-200 dark:bg-secondary-1000 dark:text-gray-800"
120+
placeholder="Search posts..."
121+
value={searchTerm}
122+
onChange={(e) => setSearchTerm(e.target.value)}
123+
/>
124+
</div>
125+
</div>
126+
</section>
127+
<main className="p-4">
128+
<div className="flex flex-wrap gap-2 mb-6">
129+
<button
130+
className={clsx("px-4 py-2 rounded-lg", {
131+
"bg-blue-500 text-white": !selectedTag,
132+
})}
133+
onClick={() => setSelectedTag(null)}
134+
>
135+
All
136+
</button>
137+
{allTags.map((tag) => (
138+
<button
139+
key={tag}
140+
className={clsx("px-4 py-2 rounded-lg", {
141+
"bg-blue-500 text-white": selectedTag === tag,
142+
"bg-gray-200": selectedTag !== tag,
143+
})}
144+
onClick={() => setSelectedTag(tag)}
145+
>
146+
{tag}
147+
</button>
148+
))}
149+
</div>
150+
151+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
152+
<div className="col-span-1 md:col-span-2">
153+
{BLOG_POSTS[0] && (
154+
<div className="bg-white shadow-lg rounded-lg overflow-hidden mb-6 dark:bg-gray-800">
155+
<img
156+
src={BLOG_POSTS[0].image}
157+
alt={BLOG_POSTS[0].title}
158+
className="w-full h-64 object-cover"
159+
/>
160+
<div className="p-4">
161+
<h2 className="text-2xl font-bold">{BLOG_POSTS[0].title}</h2>
162+
<p className="mt-2">{BLOG_POSTS[0].description}</p>
163+
<div className="flex items-center justify-between mt-4 pr-2">
164+
<Author username={BLOG_POSTS[0].author} />
165+
<Link to={BLOG_POSTS[0].url} className="text-blue-500">
166+
Read More <ArrowRightFilled />
167+
</Link>
168+
</div>
169+
</div>
170+
</div>
171+
)}
172+
</div>
173+
174+
<div className="col-span-1 flex flex-col gap-6">
175+
{BLOG_POSTS.slice(1, 3).map((post) => (
176+
<div
177+
key={post.title}
178+
className="bg-white shadow-lg rounded-lg overflow-hidden dark:bg-gray-800"
179+
>
180+
<img
181+
src={post.image}
182+
alt={post.title}
183+
className="w-full h-32 object-cover"
184+
/>
185+
<div className="p-4">
186+
<h3 className="text-lg font-semibold">{post.title}</h3>
187+
<p className="mt-1">{post.description}</p>
188+
<div className="flex items-center justify-between mt-4 pr-2">
189+
<Author username={BLOG_POSTS[0].author} />
190+
<Link to={BLOG_POSTS[0].url} className="text-blue-500">
191+
Read More <ArrowRightFilled />
192+
</Link>
193+
</div>
194+
</div>
195+
</div>
196+
))}
197+
</div>
198+
</div>
199+
200+
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
201+
{filteredPosts.map((post) => (
202+
<div
203+
key={post.title}
204+
className="bg-white shadow-lg rounded-lg overflow-hidden dark:bg-gray-800"
205+
>
206+
<img
207+
src={post.image}
208+
alt={post.title}
209+
className="w-full h-48 object-cover"
210+
/>
211+
<div className="p-4">
212+
<h3 className="text-xl font-semibold">{post.title}</h3>
213+
<p className="text-sm mt-1">{post.description}</p>
214+
<p className="text-gray-500 text-xs mt-1">{post.duration}</p>
215+
<div className="flex items-center justify-between mt-4 pr-2">
216+
<Author username={BLOG_POSTS[0].author} />
217+
<Link to={BLOG_POSTS[0].url} className="text-blue-500">
218+
Read More <ArrowRightFilled />
219+
</Link>
220+
</div>
221+
</div>
222+
</div>
223+
))}
224+
</div>
225+
</main>
226+
</Layout>
227+
);
228+
};
229+
230+
export default BlogListPage;

‎src/theme/ReactLiveScope/Playground/index.d.ts

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)