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 '@/styles/globals.css';
import Global from '@/layout/GlobalLayout'; import Global from '@/layout/GlobalLayout';
import AppContext from '@/hooks/AppContext'; import AppContext from '@/hooks/AppContext';
import { Suspense } from 'react';
import Loader from '@/components/base/loader/Loader';
interface LayoutProps { interface LayoutProps {
children: React.ReactNode; children: React.ReactNode;
} }
...@@ -13,11 +15,17 @@ export default function RootLayout({ children }: LayoutProps) { ...@@ -13,11 +15,17 @@ export default function RootLayout({ children }: LayoutProps) {
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</head> </head>
<body> <body>
<Suspense fallback={
<div className="w-full h-full dark:bg-black flex justify-center p-4">
<Loader />
</div>}
>
<AppContext> <AppContext>
<Global> <Global>
{children} {children}
</Global> </Global>
</AppContext> </AppContext>
</Suspense>
</body> </body>
</html> </html>
); );
......
app/page.tsx
import Home from "@/pages/Home"; import Home from "@/pages/Home";
const HomePage = () => { export default async function HomePage() {
return ( return (
<Home /> <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" ...@@ -2,34 +2,36 @@ import React from "react"
import Image from "next/image"; import Image from "next/image";
import { profileCardsItems } from "@/types/blog"; import { profileCardsItems } from "@/types/blog";
import ProfileCard from "../Profile-card/ProfileCard"; import ProfileCard from "../Profile-card/ProfileCard";
import Link from "next/link";
interface blogcardprops extends profileCardsItems{ interface blogcardprops extends profileCardsItems{
img?: string; img?: string;
title?: string; title?: string;
description?: string; description?: string;
id?: number; 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 ( return (
<Link href={`/blog/${id}`}>
<div <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 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" onClick={handleClick}> dark:*:text-white group h-full" >
{ {
img && 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] "> <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} {title}
</h4> </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} {description}
</p> </p>
<ProfileCard {...props} /> <ProfileCard {...props} />
</div> </div>
</div> </div>
</Link>
) )
} }
......
components/Top-Level/blog-card/blogcard.stories.tsx
...@@ -6,9 +6,6 @@ const meta: Meta<typeof BlogCard> = { ...@@ -6,9 +6,6 @@ const meta: Meta<typeof BlogCard> = {
title: 'Top-Level', title: 'Top-Level',
component: BlogCard, component: BlogCard,
argTypes: { argTypes: {
handleClick: {
action:"onClick",
},
} }
} }
export default meta; export default meta;
......
components/Top-Level/blog-page/Blogpage.tsx
...@@ -51,7 +51,7 @@ const BlogPage: React.FC<BlogPageProps> = ({ title, authorDetails, category, rea ...@@ -51,7 +51,7 @@ const BlogPage: React.FC<BlogPageProps> = ({ title, authorDetails, category, rea
</div> </div>
</div> </div>
{banner && ( {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="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]"> <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> { ...@@ -12,11 +12,11 @@ interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
} }
export default function Button({ children, size, disabled, className, loading, href,isPrimary, block, ...props }: ButtonProps) { 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-4 py-2 text-[18px]': size === 'sm',
'px-6 py-2 text-[22px]': size === 'md', 'px-6 py-2 text-[22px]': size === 'md',
'px-4 py-2 text-[15px]':size ==='icon', '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, 'hover:bg-primary hover:text-white ease-in duration-100': !disabled,
'w-full': block, 'w-full': block,
'bg-white dark:bg-[#131617] dark:text-white':!isPrimary, 'bg-white dark:bg-[#131617] dark:text-white':!isPrimary,
......
components/layout/Navigation/Header.stories.tsx
...@@ -18,5 +18,7 @@ export default meta; ...@@ -18,5 +18,7 @@ export default meta;
type Story = StoryObj<typeof meta>; type Story = StoryObj<typeof meta>;
export const Header_: Story = { 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'; ...@@ -10,34 +10,42 @@ import Link from 'next/link';
interface HeaderProps { interface HeaderProps {
onSearch: (search:string) => void; onSearch: (search:string) => void;
onChangeTheme: () => 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); const [isOPen, setisOPen] = useState(false);
return ( return (
<div className="sticky top-0 dark:bg-[#131617] bg-white dark:text-white shadow-md p-4 z-50"> <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"> <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" /> <Image src={Newspaper} height={40} width={40} alt="Newspaper" />
<h1 className="font-semibold text-2xl">NewsBlog</h1> <h1 className="font-semibold text-2xl">NewsBlog</h1>
</Link> </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} /> <SearchBar placeholder="Discover news, articles, and more" className="font-semibold" onSearch={onSearch} />
</div> </div>
}
<div className='ml-auto mr-2 md:m-0'> <div className='ml-auto mr-2 md:m-0'>
<Sun handleClick={onChangeTheme} /> <Sun handleClick={onChangeTheme} />
<Moon handleClick={onChangeTheme} /> <Moon handleClick={onChangeTheme} />
</div> </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} /> <Image src={menu} alt="Menu" className="w-full h-full" width={100} height={100} />
</div> </div>
}
</div> </div>
<div className={cn('h-0 overflow-hidden md:hidden transition-all duration-100 ease-in-out container bg-white dark:bg-[#131617] ', { <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 '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>
</div> </div>
); );
......
layout/GlobalLayout.tsx
'use client'; 'use client';
import { usePathname } from 'next/navigation'
import Navigation from "@/components/layout/Navigation/Navigation"; import Navigation from "@/components/layout/Navigation/Navigation";
import { Context } from "@/hooks/AppContext"; import { Context } from "@/hooks/AppContext";
import React, { useContext, useEffect, useState } from "react";
import React, { useContext } from "react";
interface GlobalLayoutProps{ interface GlobalLayoutProps{
children: React.ReactNode; children: React.ReactNode;
} }
const Global:React.FC<GlobalLayoutProps> = ({children}) => { 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 ( return (
<div className={`${theme}`}> <div className={`${theme}`}>
<div className={`bg-light dark:bg-black min-h-screen`}> <div className={`bg-light dark:bg-black min-h-screen`}>
<Navigation onSearch={handleFilter} <Navigation onSearch={handleFilter}
onChangeTheme={ToggleTheme} /> onChangeTheme={ToggleTheme} isVisible={!isVisible} />
{children} {children}
</div> </div>
</div> </div>
......
pages/Home.tsx
...@@ -4,12 +4,10 @@ import Loader from "@/components/base/loader/Loader"; ...@@ -4,12 +4,10 @@ import Loader from "@/components/base/loader/Loader";
import BlogCard from "@/components/Top-Level/blog-card/BlogCard"; import BlogCard from "@/components/Top-Level/blog-card/BlogCard";
import Pagination from "@/components/Top-Level/pagination/pagination"; import Pagination from "@/components/Top-Level/pagination/pagination";
import { Context } from "@/hooks/AppContext"; import { Context } from "@/hooks/AppContext";
import { useRouter } from "next/navigation";
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
const Home = () => { const Home = () => {
const [isMounted, setisMounted] = useState(false) const [isMounted, setisMounted] = useState(false)
const router = useRouter();
const {data, size, currentPage, start, end, handleChangePage,isLoading } = useContext(Context); const {data, size, currentPage, start, end, handleChangePage,isLoading } = useContext(Context);
useEffect(() => { useEffect(() => {
setisMounted(true); setisMounted(true);
...@@ -40,9 +38,7 @@ const Home = () => { ...@@ -40,9 +38,7 @@ const Home = () => {
date:new Date(data?.authorDetails.date), date:new Date(data?.authorDetails.date),
...data, ...data,
} }
} handleClick={() => { } />
router.push(`/blog/${data.id}`)
}}/>
</div> </div>
))} ))}
</div> </div>
......
pages/blog.tsx
import BlogPage from '@/components/Top-Level/blog-page/Blogpage'; import BlogPage from '@/components/Top-Level/blog-page/Blogpage';
import axios from 'axios'; import axios from 'axios';
interface BlogProps { interface BlogProps {
id: number; id: number;
} }
...@@ -35,13 +37,13 @@ interface BlogData { ...@@ -35,13 +37,13 @@ interface BlogData {
const Blog: React.FC<BlogProps> = async ({ id }) => { const Blog: React.FC<BlogProps> = async ({ id }) => {
const res = await axios.get<BlogData>(`${process.env.NEXT_PUBLIC_API_URL}/api/`); const res = await axios.get<BlogData>(`${process.env.NEXT_PUBLIC_API_URL}/api/`);
const data = res.data.Data; const data = res.data.Data;
console.log(data)
const blogData = data.find(item => item.id === id); const blogData = data.find(item => item.id === id);
if (!blogData) { if (!blogData) {
return <div>Blog post not found.</div>; return <div>Blog post not found.</div>;
} }
return <BlogPage {...blogData} />; return <BlogPage {...blogData} />;
} }
export default Blog; 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