Skip to content

B
Blog
Commit d83ad450 by Sakilesh J
Options

fix the changes

parent c0269b0e
Showing with 52 additions and 34 deletions
app/layout.tsx
import '@/styles/globals.css';
import Global from '@/layout/GlobalLayout';
import AppContext from '@/hooks/AppContext';
import { Suspense } from 'react';
import Loader from '@/components/base/loader/Loader';
interface LayoutProps {
children: React.ReactNode;
}
......@@ -13,11 +15,17 @@ export default function RootLayout({ children }: LayoutProps) {
<link rel="icon" href="/favicon.ico" />
</head>
<body>
<Suspense fallback={
<div className="w-full h-full dark:bg-black flex justify-center p-4">
<Loader />
</div>}
>
<AppContext>
<Global>
{children}
</Global>
</AppContext>
</Suspense>
</body>
</html>
);
......
app/page.tsx
import Home from "@/pages/Home";
const HomePage = () => {
export default async function HomePage() {
return (
<Home />
);
};
export default HomePage;
\ No newline at end of file
components/Top-Level/blog-card/BlogCard.tsx
......@@ -2,34 +2,36 @@ import React from "react"
import Image from "next/image";
import { profileCardsItems } from "@/types/blog";
import ProfileCard from "../Profile-card/ProfileCard";
import Link from "next/link";
interface blogcardprops extends profileCardsItems{
img?: string;
title?: string;
description?: string;
id?: number;
handleClick:()=>void;
}
const BlogCard: React.FC<blogcardprops> = ({ img, title, description, id,handleClick, ...props }) => {
const BlogCard: React.FC<blogcardprops> = ({ img, title, description, id, ...props }) => {
return (
<Link href={`/blog/${id}`}>
<div
className="sm:max-w-sm w-full shadow-md rounded-md cursor-pointer hover:shadow-xl hover:translate-y-[-2px] transition-all duration-300 ease-in-out overflow-hidden
dark:*:text-white group h-full" onClick={handleClick}>
className="sm:min-w-sm w-full shadow-md rounded-md cursor-pointer hover:shadow-xl transition-all duration-300 hover:scale-[1.01] ease-in-out overflow-hidden
dark:*:text-white group h-full" >
{
img &&
<Image src={img} width={900} height={900} alt="" className="w-full h-[220px] rounded-t-lg object-cover" loading="lazy" />
<Image src={img} width={540} height={400} alt="" className="w-full h-[220px] rounded-t-lg object-cover" loading="lazy" />
}
<div className="h-[calc(100%-220px)] p-[1em] sm:p-[1.5em] bg-white flex flex-col dark:bg-[#131617] ">
<h4 className="text-sans font-[700] group-hover:text-primary text-sm sm:text-[18px] my-[.3em] leading-[1.4em] md:line-clamp-2">
<h4 className="text-sans font-[700] group-hover:text-primary text-sm sm:text-[18px] my-[.3em] leading-[1.4em] sm:line-clamp-2">
{title}
</h4>
<p className="text-subHeadColor my-[5px] text-sm sm:text-[17px] mb-[1em] leading-[1.4em] dark:text-gray-400 md:line-clamp-2">
<p className="text-subHeadColor my-[5px] text-sm sm:text-[17px] mb-[1em] leading-[1.4em] dark:text-gray-400 sm:line-clamp-2">
{description}
</p>
<ProfileCard {...props} />
</div>
</div>
</Link>
)
}
......
components/Top-Level/blog-card/blogcard.stories.tsx
......@@ -6,9 +6,6 @@ const meta: Meta<typeof BlogCard> = {
title: 'Top-Level',
component: BlogCard,
argTypes: {
handleClick: {
action:"onClick",
},
}
}
export default meta;
......
components/Top-Level/blog-page/Blogpage.tsx
......@@ -51,7 +51,7 @@ const BlogPage: React.FC<BlogPageProps> = ({ title, authorDetails, category, rea
</div>
</div>
{banner && (
<Image src={banner.img} alt="banner" width={banner.width} height={banner.height} className="rounded-xl w-full object-cover sm:h-[400px]" />
<Image src={banner.img} alt="banner" width={banner.width} height={banner.height} className="rounded-xl w-full object-cover h-[250px] sm:h-[350px]" />
)}
<div className="w-full mt-12 dark:bg-[#131617] rounded-md px-4 py-6 sm:px-8">
<div className="prose-xl prose-h2:font-libre prose-h2:font-bold prose-h2:text-2xl sm:prose-h2:text-[1.4em] prose-p:text-[14px] prose-p:leading-6 sm:prose-p:text-lg dark:text-white rounded-lg prose-li:list-decimal dark:prose-p:text-gray-400 leading-snug prose-blockquote:px-[30px] prose-h4:m-0 prose-blockquote:py-[15px] prose-blockquote:border-l-2 prose-blockquote:border-primary prose-h4:font-libre prose-h4:text-[1.5em] dark:prose-li:text-gray-400 prose-li:text-[17px]">
......
components/base/Button/Button.tsx
......@@ -12,11 +12,11 @@ interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
}
export default function Button({ children, size, disabled, className, loading, href,isPrimary, block, ...props }: ButtonProps) {
const classes = cn('inline-flex items-center justify-center gap-1 font-sans font-[700] text-textColor leading-2 rounded-xl border-[1px] h-auto dark dark:border-none dark:hover:bg-primary', {
const classes = cn('inline-flex items-center justify-center gap-1 font-sans font-[700] text-textColor leading-2 rounded-xl border-[1px] h-auto dark dark:border-none ', {
'px-4 py-2 text-[18px]': size === 'sm',
'px-6 py-2 text-[22px]': size === 'md',
'px-4 py-2 text-[15px]':size ==='icon',
'bg-secondary hover:bg-none hover:dark:bg-black dark:bg-black': disabled,
'bg-secondary hover:bg-none hover:dark:bg-none opacity-50': disabled,
'hover:bg-primary hover:text-white ease-in duration-100': !disabled,
'w-full': block,
'bg-white dark:bg-[#131617] dark:text-white':!isPrimary,
......
components/layout/Navigation/Header.stories.tsx
......@@ -18,5 +18,7 @@ export default meta;
type Story = StoryObj<typeof meta>;
export const Header_: Story = {
args: { },
args: {
isVisible:true,
},
}
\ No newline at end of file
components/layout/Navigation/Navigation.tsx
......@@ -10,34 +10,42 @@ import Link from 'next/link';
interface HeaderProps {
onSearch: (search:string) => void;
onChangeTheme: () => void;
isVisible?: boolean;
}
const Navigation: React.FC<HeaderProps> = ({ onSearch,onChangeTheme }) => {
const Navigation: React.FC<HeaderProps> = ({ onSearch,onChangeTheme,isVisible }) => {
const [isOPen, setisOPen] = useState(false);
return (
<div className="sticky top-0 dark:bg-[#131617] bg-white dark:text-white shadow-md p-4 z-50">
<div className="w-full justify-between flex items-center max-w-[1100px] mx-auto">
<Link className="flex gap-2 items-center" href="/">
<Link className="flex gap-2 items-center py-[10px]" href="/">
<Image src={Newspaper} height={40} width={40} alt="Newspaper" />
<h1 className="font-semibold text-2xl">NewsBlog</h1>
</Link>
<div className="hidden md:block min-w-[400px]">
{
isVisible &&
<div className={"hidden md:block min-w-[400px]"}>
<SearchBar placeholder="Discover news, articles, and more" className="font-semibold" onSearch={onSearch} />
</div>
}
<div className='ml-auto mr-2 md:m-0'>
<Sun handleClick={onChangeTheme} />
<Moon handleClick={onChangeTheme} />
</div>
<div className="block md:hidden w-[40px] h-[40px] rounded-md p-2 bg-primary cursor-pointer *:mr-2" onClick={() => setisOPen(!isOPen)}>
{
isVisible &&
<div className="block md:hidden w-[40px] h-[40px] rounded-md p-2 bg-primary cursor-pointer *:mr-2" onClick={() => setisOPen(!isOPen)}>
<Image src={menu} alt="Menu" className="w-full h-full" width={100} height={100} />
</div>
}
</div>
<div className={cn('h-0 overflow-hidden md:hidden transition-all duration-100 ease-in-out container bg-white dark:bg-[#131617] ', {
'h-auto py-2 min-w-full mt-2': isOPen
})}>
<SearchBar placeholder="Discover news, articles, and more" className="font-semibold" onSearch={onSearch} />
<SearchBar placeholder="Discover news, articles, and more" className="font-semibold" onSearch={onSearch} />
</div>
</div>
);
......
layout/GlobalLayout.tsx
'use client';
import { usePathname } from 'next/navigation'
import Navigation from "@/components/layout/Navigation/Navigation";
import { Context } from "@/hooks/AppContext";
import React, { useContext } from "react";
import React, { useContext, useEffect, useState } from "react";
interface GlobalLayoutProps{
children: React.ReactNode;
}
const Global:React.FC<GlobalLayoutProps> = ({children}) => {
const {theme,ToggleTheme,handleFilter} = useContext(Context);
const { theme, ToggleTheme, handleFilter } = useContext(Context);
const pathname = usePathname();
const [isVisible, setisVisible] = useState<boolean | undefined>(false);
useEffect(() => {
setisVisible(pathname?.includes('blog'));
},[pathname])
return (
<div className={`${theme}`}>
<div className={`bg-light dark:bg-black min-h-screen`}>
<Navigation onSearch={handleFilter}
onChangeTheme={ToggleTheme} />
onChangeTheme={ToggleTheme} isVisible={!isVisible} />
{children}
</div>
</div>
......
pages/Home.tsx
......@@ -4,12 +4,10 @@ import Loader from "@/components/base/loader/Loader";
import BlogCard from "@/components/Top-Level/blog-card/BlogCard";
import Pagination from "@/components/Top-Level/pagination/pagination";
import { Context } from "@/hooks/AppContext";
import { useRouter } from "next/navigation";
import { useContext, useEffect, useState } from "react";
const Home = () => {
const [isMounted, setisMounted] = useState(false)
const router = useRouter();
const {data, size, currentPage, start, end, handleChangePage,isLoading } = useContext(Context);
useEffect(() => {
setisMounted(true);
......@@ -40,9 +38,7 @@ const Home = () => {
date:new Date(data?.authorDetails.date),
...data,
}
} handleClick={() => {
router.push(`/blog/${data.id}`)
}}/>
} />
</div>
))}
</div>
......
pages/blog.tsx
import BlogPage from '@/components/Top-Level/blog-page/Blogpage';
import axios from 'axios';
interface BlogProps {
id: number;
}
......@@ -35,13 +37,13 @@ interface BlogData {
const Blog: React.FC<BlogProps> = async ({ id }) => {
const res = await axios.get<BlogData>(`${process.env.NEXT_PUBLIC_API_URL}/api/`);
const data = res.data.Data;
console.log(data)
const blogData = data.find(item => item.id === id);
if (!blogData) {
return <div>Blog post not found.</div>;
}
return <BlogPage {...blogData} />;
}
export default Blog;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment