Skip to content

Commit

Permalink
Merge pull request #4 from KaraniWachira/dev
Browse files Browse the repository at this point in the history
Dev
  • Loading branch information
KaraniWachira authored Jan 7, 2025
2 parents 17875fa + a678652 commit 4054c0a
Show file tree
Hide file tree
Showing 8 changed files with 231 additions and 17 deletions.
37 changes: 25 additions & 12 deletions src/components/FeaturedPosts.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ const FeaturedPosts = () => {
{/*first post*/}
<div className="w-full lg:w-1/2 flex flex-col gap-4">
{/*image*/}
<Image src="NyRebels-m.jpg" className="rounded-3xl object-cover" />
<Image src="NyRebels-m.jpg"
className="rounded-3xl object-cover"
w="895"/>
{/*details*/}
<div className="flex items-center gap-4">
<h1 className="font-semibold lg:text-lg"> 01 </h1>
Expand All @@ -23,9 +25,12 @@ const FeaturedPosts = () => {
<div className="w-full lg:w-1/2 flex flex-col gap-4">
{/*second post*/}
<div className="lg:h-1/3 flex justify-between gap-4 ">
<Image
src="helmet-balls.jpg"
className="rounded-3xl object-cover w-1/3 aspect-video"/>
<div className="w-1/3 aspect-video ">
<Image
src="helmet-balls.jpg"
className="rounded-3xl object-cover w-full h-full"
w="298"/>
</div>
{/*details and title*/}
<div className="w-2/3">
{/*details*/}
Expand All @@ -41,9 +46,12 @@ const FeaturedPosts = () => {
</div>
{/*third post*/}
<div className="lg:h-1/3 flex justify-between gap-4">
<Image
src="baseballs.jpg"
className="rounded-3xl object-cover w-1/3 aspect-video"/>
<div className="w-1/3 aspect-video ">
<Image
src="baseballs.jpg"
className="rounded-3xl object-cover w-full h-full"
w="298"/>
</div>
{/*details and title*/}
<div className="w-2/3">
{/*details*/}
Expand All @@ -53,15 +61,19 @@ const FeaturedPosts = () => {
<span className="text-gray-500 text-sm">1 year ago</span>
</div>
{/*title*/}
<Link to="/test" className="text-base sm:text-lg md:text-2xl lg:text-xl xl:text-2xl font-medium">
<Link to="/test"
className="text-base sm:text-lg md:text-2xl lg:text-xl xl:text-2xl font-medium">
Angels at Bat at the Heart of Baseball's Growth in Africa </Link>
</div>
</div>
{/*fourth post*/}
<div className="lg:h-1/3 flex justify-between gap-4">
<Image
src="ball-with-glove.jpg"
className="rounded-3xl object-cover w-1/3 aspect-video"/>
<div className="w-1/3 aspect-video">
<Image
src="base.jpg"
className="rounded-3xl object-cover w-full h-full"
w="298"/>
</div>
{/*details and title*/}
<div className="w-2/3">
{/*details*/}
Expand All @@ -71,7 +83,8 @@ const FeaturedPosts = () => {
<span className="text-gray-500 text-sm">2 weeks ago</span>
</div>
{/*title*/}
<Link to="/test" className="text-base sm:text-lg md:text-2xl lg:text-xl xl:text-2xl font-medium">
<Link to="/test"
className="text-base sm:text-lg md:text-2xl lg:text-xl xl:text-2xl font-medium">
Mombasa Infernos burn imaginary winners </Link>
</div>
</div>
Expand Down
6 changes: 6 additions & 0 deletions src/components/Image.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,12 @@ const Image = ({src, className, w, h, alt}) => {
alt={alt}
width={w}
height={h}
transformation={[
{
width: w,
height: h,
}
]}
/>
);
};
Expand Down
23 changes: 23 additions & 0 deletions src/components/PostList.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import PostListItem from "./PostListItem";

const PostList = () => {
return (
<div className="flex flex-col gap-12 mb-8">
<PostListItem />
<PostListItem />
<PostListItem />
<PostListItem />
<PostListItem />
<PostListItem />
</div>
)
}

export default PostList;







32 changes: 32 additions & 0 deletions src/components/PostListItem.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import Image from "./Image";
import {Link } from "react-router-dom";

const PostListItem = () => {
return (
<div className="flex flex-col xl:flex-row gap-8">
{/*image*/}
<div className="md:hidden xl:block xl:w-1/3">
<Image src="origin.jpg" className="rounded-2xl object-cover" w="735"/>
</div>
{/*details*/}
<div className="flex flex-col gap-4 xl:w-2/3">
<Link to="/test" className="text-4xl font-semibold">
Baseball5: The New Revolution in Africa
</Link >
<div className="flex items-center gap-2 text-gray-400">
<span>Author</span>
<Link className="text-blue-800">African Seed</Link >
<span>on</span>
<Link className="text-blue-800">Baseball</Link >
<span>13 days ago</span>
</div>
<p>
Baseball5, a new version of baseball that’s more accessible and fast-paced, is making waves across Africa. This article examines its popularity and the potential it holds for expanding baseball’s reach across the continent.
</p>
<Link to="/test" className="underline text-blue-800 text-sm">Read More</Link>
</div>
</div>
);
};

export default PostListItem;
25 changes: 25 additions & 0 deletions src/components/PostMenuActions.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import {CiBookmark} from "react-icons/ci";

import {RiDeleteBin6Line} from "react-icons/ri";

const PostMenuActions = () => {
return (
<div className="">
<h1 className="mt-8 mb-4 text-sm font-medium">Actions</h1>
<div className="flex items-center gap-2 py-2 text-sm cursor-pointer">
<CiBookmark/>
<span>Save this Post</span>
</div>
<div className="flex items-center gap-2 py-2 text-sm cursor-pointer">
{/*icon*/}
<RiDeleteBin6Line />
<span>Delete this Post</span>
</div>
</div>
);
};

export default PostMenuActions;



12 changes: 12 additions & 0 deletions src/components/Search.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import {CiSearch} from "react-icons/ci";

const Search = () => {
return (
<div className="bg-gray-100 p-2 rounded-full flex items-center gap-2">
<CiSearch />
<input type="text" placeholder="search a post..." className="bg-white"/>
</div>
)
}

export default Search;
3 changes: 2 additions & 1 deletion src/routes/Homepage.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {Link} from "react-router-dom";
import MainCategories from "../components/MainCategories";
import FeaturedPosts from "../components/FeaturedPosts";
import PostList from "../components/PostList";

const Homepage = () => {
return (
Expand Down Expand Up @@ -29,7 +30,7 @@ const Homepage = () => {
<h1 className="my-8 text-2xl text-gray-600">
Recent Posts
</h1>

<PostList />
</div>
</div>
)
Expand Down
110 changes: 106 additions & 4 deletions src/routes/SinglePostPage.jsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,112 @@

import Image from "../components/Image";
import {Link} from "react-router-dom";
import PostMenuActions from "../components/PostMenuActions";
import Search from "../components/Search";

const SinglePostPage = () => {
return (
<div className=''> SinglePostPage</div>
)
}
<div className='flex flex-col gap-8'>
{/*details*/}
<div className="flex gap-8 ">
<div className="lg:w-3/5 flex flex-col gap-8">
<h1 className="text-xl md:text-3xl xl:text-4xl 2xl:text-5xl font-semibold">
The Growing Momentum of Baseball and Softball Across Kenya and Africa
</h1>
<div className="flex items-center gap-2 text-gray-400 text-sm">
<span>Author</span>
<Link className="text-blue-800">African Seed</Link>
<span>on</span>
<Link className="text-blue-800">Baseball</Link>
<span>3 day ago</span>
</div>
<p className=" text-gray-500 font-medium">
Exploring the Rise of Baseball, Softball, Baseball5, and Little League in Shaping Africa’s Sporting Future
</p>
</div>
<div className="hidden lg:block w-2/5">
<Image src="ball-with-glove.jpg" w="500" className="rounded-2xl"/>
</div>
</div>
{/*content*/}
<div className="flex flex-col md:flex-row gap-12">
{/*text*/}
<div className="lg:text-lg flex flex-col gap-6 text-justify">
<p>
Baseball in Kenya is experiencing a quiet revolution, with an increasing number of young athletes taking up the sport. Once considered a niche activity, baseball is now capturing the interest of schools, local clubs, and community sports programs. The Kenya Baseball Federation has been instrumental in introducing structured leagues and competitions, allowing players to showcase their skills on a national stage.
Notably, counties like Nairobi, Nyeri, and Kiambu are becoming hubs for baseball activity. The establishment of regional tournaments and partnerships with international organizations has brought resources and exposure to the sport. As Kenya continues to embrace baseball, its potential to produce world-class talent is evident. The passion and commitment of local players, coaches, and fans are setting the stage for a bright future.
</p>
<p>
Softball is transforming the sports landscape across Africa, especially among the youth. Its emphasis on teamwork, strategy, and inclusivity makes it a favorite in schools and community programs. Countries like Uganda, South Africa, and Kenya are leading the charge in developing softball infrastructure and nurturing young talent.
The sport has become a tool for fostering life skills among African youth. Coaches often integrate lessons on discipline, leadership, and resilience into their training sessions. The ease of learning and adaptability of softball has also made it accessible to communities with limited resources. With continued investment and grassroots initiatives, softball is set to become a cornerstone of youth development in Africa.
</p>
<p>
Baseball5, a dynamic and simplified version of baseball, is rapidly gaining traction across Africa. Its minimal equipment requirements and fast-paced nature make it an attractive option for urban and rural communities alike. Countries such as Kenya, Ghana, and Tunisia have already embraced Baseball5, hosting workshops and tournaments to popularize the game.
One of the unique aspects of Baseball5 is its inclusivity. The sport encourages mixed-gender teams, promoting gender equality in sports. Additionally, it can be played in small spaces, making it ideal for schools and densely populated areas. As Baseball5 continues to spread across Africa, it is proving to be a powerful way to introduce baseball culture to new audiences while uniting communities through the love of the game.
</p>
<p>
Baseball5, a dynamic and simplified version of baseball, is rapidly gaining traction across Africa. Its minimal equipment requirements and fast-paced nature make it an attractive option for urban and rural communities alike. Countries such as Kenya, Ghana, and Tunisia have already embraced Baseball5, hosting workshops and tournaments to popularize the game.
One of the unique aspects of Baseball5 is its inclusivity. The sport encourages mixed-gender teams, promoting gender equality in sports. Additionally, it can be played in small spaces, making it ideal for schools and densely populated areas. As Baseball5 continues to spread across Africa, it is proving to be a powerful way to introduce baseball culture to new audiences while uniting communities through the love of the game.
</p>
<p>
Baseball5, a dynamic and simplified version of baseball, is rapidly gaining traction across Africa. Its minimal equipment requirements and fast-paced nature make it an attractive option for urban and rural communities alike. Countries such as Kenya, Ghana, and Tunisia have already embraced Baseball5, hosting workshops and tournaments to popularize the game.
One of the unique aspects of Baseball5 is its inclusivity. The sport encourages mixed-gender teams, promoting gender equality in sports. Additionally, it can be played in small spaces, making it ideal for schools and densely populated areas. As Baseball5 continues to spread across Africa, it is proving to be a powerful way to introduce baseball culture to new audiences while uniting communities through the love of the game.
</p>
<p>
Baseball5, a dynamic and simplified version of baseball, is rapidly gaining traction across Africa. Its minimal equipment requirements and fast-paced nature make it an attractive option for urban and rural communities alike. Countries such as Kenya, Ghana, and Tunisia have already embraced Baseball5, hosting workshops and tournaments to popularize the game.
One of the unique aspects of Baseball5 is its inclusivity. The sport encourages mixed-gender teams, promoting gender equality in sports. Additionally, it can be played in small spaces, making it ideal for schools and densely populated areas. As Baseball5 continues to spread across Africa, it is proving to be a powerful way to introduce baseball culture to new audiences while uniting communities through the love of the game.
</p>


</div>
{/*menu*/}
<div className="px-4 h-max sticky top-8">
<h1 className="mb-4 text-sm font-medium">Author</h1>
<div className="flex flex-col gap-4">
<div className="flex items-center gap-8">
<Image
src="ezra-rebels.jpg"
className="w-12 h-12 rounded-full object-cover"
w="48"
h="48"
/>
<Link className="text-blue-800">African Seed</Link>
</div>
<p className=" text-sm text-gray-500">a dynamic and simplified version of baseball</p>
{/*social icons*/}
<div className="flex gap-2">
<Link>
<Image src="facebook.svg"/>
</Link>
<Link>
<Image src="instagram.svg"/>
</Link>
</div>
</div>

<PostMenuActions/>
<h1 className="mt-8 text-sm font-medium">Categories</h1>
<div className="flex flex-col gap-2 text-sm">
<Link className="underline">All</Link>
<Link className="underline" to="/">
Baseball
</Link>
<Link className="underline" to="/">
Softball
</Link>
<Link className="underline" to="/">
Baseball5
</Link>
<Link className="underline" to="/">
Little League
</Link>
</div>
<h1 className="mt-8 text-sm font-medium">Search</h1>
<Search/>
</div>
</div>
</div>
);
};


export default SinglePostPage

0 comments on commit 4054c0a

Please sign in to comment.