Skip to content

B
blog-task
Commit ed5fe251 by Sujeeth AV
Options

Fix clock icon bug and update Card component layout

parent 427f4bd9
Showing with 322 additions and 57 deletions
components/Base/Form/button/Button.module.css
......@@ -7,12 +7,6 @@
height: 2rem;
}
.primary {
}
.secondary {
}
.buttoncolumn {
display: flex;
gap: 1rem;
......
components/Card/Header.jsx deleted 100644 → 0
import React from "react";
import style from "./Header.module.css";
export const Header = ({ color, title, Icon, ...props }) => {
return (
<div className={style.container}>
<div className={style.head}>
<h2 style={{ color }} {...props}>
{title}
</h2>
</div>
<div className={style.icon}>{Icon && <Icon />}</div>
</div>
);
};
components/Card/Header.module.css deleted 100644 → 0
.container {
display: flex;
justify-content: space-around;
}
.icon {
margin-top: 1.rem;
}
components/Shared/Card/Card.jsx
......@@ -35,14 +35,8 @@ export const Card = ({
</div>
</div>
<div className={style.img}>
<Image
src={blog}
alt="Blog-image"
className={style.imgstyle}
style={{ borderRadius: "16px" }}
/>
<Image src={blog} alt="Blog-image" className={style.imgstyle} />
</div>
<div className={style.description}>
<Details details={details} />
<Typo description={description} />
......
components/Shared/Card/Card.module.css
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
:root {
--gray: #818182;
--white: #eeeeee;
--black: #000;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 100%;
max-width: 85rem;
margin: 0 auto;
}
.head {
justify-content: flex-start;
......@@ -19,7 +28,7 @@
justify-content: flex-start;
align-self: flex-start;
margin-left: 5rem;
color: #818182;
color: var(--gray);
}
.img {
position: relative;
......@@ -37,17 +46,17 @@
border-radius: 2rem;
}
.head {
color: #818182;
font-size: 2rem;
margin-left: 8rem;
color: var(--gray);
font-size: 1.6rem;
margin-left: 0;
}
.description {
padding: 4rem;
margin-top: 0.5rem;
border-radius: 2rem;
color: #eeeeee;
background-color: #818182;
width: 90vw;
color: var(--white);
background-color: var(--gray);
width: 85vw;
max-width: 102rem;
box-sizing: border-box;
}
......@@ -56,7 +65,7 @@
.publish {
display: flex;
flex-direction: row;
margin-left: 11rem;
margin-left: 0;
column-gap: 3rem;
}
.block {
......
components/Shared/SearchHeader/SearchHeader.jsx 0 → 100644
import React from "react";
import styles from "./SearchHeader.module.css";
import { Header } from "@/components/Layout/Card/Header";
import { Search } from "@/components/Base/Form/search/Search";
import { Icons } from "@/components/Base/Icons/Icons";
export const SearchHeader = ({ title, placeholder }) => {
return (
<div className={styles.container}>
<span className={styles.newspaper}>
<Icons name="newspaper" />
</span>
<span>
<Header title={title} />
</span>
<span className={styles.input}>
<Search placeholder={placeholder} />
</span>
<span>
<Icons name="moon" size="90" />
</span>
</div>
);
};
components/Shared/SearchHeader/SearchHeader.module.css 0 → 100644
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
.container {
display: flex;
/* column-gap: 12rem; */
box-shadow: 1px 1px 1px 1px #000;
padding-left: 2rem;
font-family: "Ubuntu", sans-serif;
}
.input {
margin-top: 1.59rem;
width: 100%;
max-width: 28%;
margin-left: 19rem;
}
.newspaper {
margin-top: 1.5rem;
color: #8d78dd;
}
components/Card/Header.stories.jsx → components/Shared/SearchHeader/SearchHeader.stories.jsx
import { Header } from "./Header";
import { SearchHeader } from "./SearchHeader";
export default {
title: "Card/Header",
component: Header,
title: "Shared/Search-header",
description: SearchHeader,
};
export const header = {
render: (args) => <Header {...args} />,
export const Searchheader = {
render: (args) => <SearchHeader {...args} />,
args: {
title: "NewsBlog",
placeholder: "Discover news, articles and more",
},
};
components/Top-level/Blog-Lisiting/Blog.stories.jsx 0 → 100644
import { BlogList } from "./BlogList";
import img1 from "@/public/images/lifestyle1.jpg";
import img2 from "@/public/images/lifestyle2.jpg";
import img3 from "@/public/images/lifestyle3.jpg";
import img4 from "@/public/images/lifestyle4.jpg";
import img5 from "@/public/images/lifestyle5.jpg";
import img6 from "@/public/images/lifestyle6.jpg";
import a1 from "@/public/images/a1.jpg";
import a2 from "@/public/images/a2.jpg";
import a3 from "@/public/images/a3.jpg";
export default {
title: "Top-level/blogList",
component: BlogList,
parameters: {
layout: "centered",
},
};
const sampleBlogs = [
{
title: "How to get perfect stars for beginnng runners",
description:
"Lore ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit ",
image: img1,
chip: "Isabella ava",
img: "/images/a1.jpg",
},
{
title: "Great tools to improve your personal blogging experience",
description:
"Lore ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit ",
image: img2,
chip: "Charlotte mia",
img: "/images/a2.jpg",
},
{
title: "Blog Guide:How to Start a Personal Blog on Wordpress",
description:
"Lore ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit ",
image: img3,
chip: "Elizabeth",
img: a3,
},
{
title: "The technical setup when starting a personal blog",
description:
"Lore ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit ",
image: img4,
chip: "Charlotte mia",
img: a2,
},
{
title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe ",
description:
"Lore ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit ",
image: img5,
chip: "Elizabeth",
img: a3,
},
{
title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe",
description:
"Lore ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit ",
image: img6,
chip: "Isabella ava",
img: a1,
},
];
export const BlogListing = {
render: (args) => <BlogList {...args} />,
args: {
blogs: sampleBlogs,
},
};
components/Top-level/Blog-Lisiting/BlogList.jsx 0 → 100644
import React from "react";
import { Card } from "@/components/Top-level/Card/Card";
import style from "./BlogList.module.css";
export const BlogList = ({ blogs }) => {
if (!blogs || blogs.length === 0) return <h2>No Blogs available</h2>;
return (
<div className={style.blogcontainer}>
{blogs.map((blog, index) => (
<Card
key={index}
title={blog.title}
description={blog.description}
image={blog.image}
img={blog.img}
chip={blog.chip}
/>
))}
</div>
);
};
components/Top-level/Blog-Lisiting/BlogList.module.css 0 → 100644
.blogcontainer {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
components/Top-level/Card/Card.jsx
import React from "react";
import Image from "next/image";
import img_1 from "../../../public/images/lifestyle1.jpg";
import a1 from "../../../public/images/a1.jpg";
import styles from "./Card.module.css";
export const Card = ({ title, description }) => {
import { Icons } from "@/components/Base/Icons/Icons";
export const Card = ({ title, description, image, chip, img, date, time }) => {
return (
<div className={styles.container}>
<Image
src={img_1}
src={image || img_1}
height={180}
width={320}
alt="Lifestyle image"
......@@ -14,7 +16,22 @@ export const Card = ({ title, description }) => {
/>
<div className={styles.block}>
<h4 className={styles.title}>{title}</h4>
<p className={styles.text}>{description}</p>
<p className={styles.text}>{description}</p>{" "}
</div>
<div className={styles.chip}>
<Image
src={img || a1}
alt="Person"
height={36}
width={36}
style={{ borderRadius: "50%" }}
/>
<h5 className={styles.inpt}>{chip}</h5>
<p>
{date}
<Icons name="clock" />
{time}
</p>
</div>
</div>
);
......
components/Top-level/Card/Card.module.css
.container {
width: 100%;
max-width: 20rem;
max-width: 18rem;
box-shadow: 1px 1px 1px 1px #3333;
border: 1px solid gray;
border-radius: 1.5rem;
border-radius: 0.9rem;
}
.img {
margin: 0 auto;
border-top-left-radius: 1.5rem;
border-top-right-radius: 1.5rem;
border-top-left-radius: 0.9rem;
border-top-right-radius: 0.9rem;
max-width: 18rem;
}
.block {
padding: 0.5rem;
}
.chip {
display: flex;
}
.inpt {
margin-top: 0.7rem;
margin-left: 0.3rem;
}
components/Top-level/Pagination/Pagination.jsx 0 → 100644
import React from "react";
import style from "./Pagination.module.css";
export const Pagination = ({ currentPage, totalPage, onPageChange }) => {
const getPageNumbers = () => {
const pages = [];
if (totalPage <= 6) {
// Show all pages if <= 6
for (let i = 1; i <= totalPage; i++) {
pages.push(i);
}
} else {
if (currentPage <= 3) {
pages.push(1, 2, 3, "...", totalPage);
} else if (currentPage >= totalPage - 2) {
pages.push(1, "...", totalPage - 2, totalPage - 1, totalPage);
} else {
pages.push(1, "...", currentPage, "...", totalPage);
}
}
return pages;
};
const pageNumbers = getPageNumbers();
return (
<div className={style.paginationContainer}>
{pageNumbers.map((number, index) =>
number === "..." ? (
<span key={index} className={style.paginationEllipsis}>
{number}
</span>
) : (
<button
key={number}
onClick={() => onPageChange(number)}
className={`${style.paginationButton} ${
currentPage === number ? style.active : ""
}`}
>
{number}
</button>
)
)}
<button
onClick={() => onPageChange(currentPage + 1)}
disabled={currentPage === totalPage}
className={style.paginationNext}
>
Next
</button>
</div>
);
};
components/Top-level/Pagination/Pagination.module.css 0 → 100644
.paginationContainer {
display: flex;
align-items: center;
justify-content: center;
}
.paginationButton {
margin: 0 5px;
height: 3rem;
width: 2.5rem;
border: none;
border-radius: 0.9rem;
background-color: #f3f4f6;
color: #374151;
cursor: pointer;
font-size: 14px;
text-align: center;
}
.paginationNext {
margin: 0 5px;
height: 3rem;
width: 3.5rem;
border: none;
border-radius: 11px;
background-color: #f3f4f6;
color: #374151;
}
.paginationButton:hover {
background-color: #e5e7eb;
}
.paginationNext:hover {
background-color: #e5e7eb;
}
.paginationButton.active {
font-weight: bold;
background-color: #6366f1;
color: white;
}
.paginationButton:disabled {
opacity: 0.5;
cursor: not-allowed;
}
components/Top-level/Pagination/Pagination.stories.jsx 0 → 100644
import { Pagination } from "./Pagination";
export default {
title: "Top-level/pagination",
component: Pagination,
argTypes: {
currentPage: { control: "number" },
totalPages: { control: "number" },
},
parameters: {
layout: "centered",
},
};
export const BlogPagination = {
render:(args) => <Pagination {...args} />,
args:{
currentPage:1,
totalPage:7,
},
};
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