Skip to content

B
Blog
Commit a2eca5a4 by Sakilesh J
Options

working on the pagination

parents
Showing with 1426 additions and 0 deletions
.czrc 0 → 100644
{
"path": "cz-conventional-changelog"
}
.dockerignore 0 → 100644
/node_modules
/build
/.git
/.next
README.md
Dockerfile
*.log
*.log*
.vscode
.DS_Store
.gitignore
.editorconfig
.env
.env.local
.gitlab-ci.yml
.eslintrc.js
.editorconfig 0 → 100644
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
\ No newline at end of file
.eslintrc.json 0 → 100644
{
"extends": [
"next/core-web-vitals",
"plugin:storybook/recommended"
]
}
.gitignore 0 → 100644
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
# vercel
.vercel
# yarn
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions
.huskyrc 0 → 100644
{
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS --extends @commitlint/config-conventional",
"pre-commit": "pretty-quick --staged"
}
}
.prettierrc 0 → 100644
{
"jsxBracketSameLine": true,
"singleQuote": true,
"jsxSingleQuote": false,
"trailingComma": "none"
}
.storybook/main.ts 0 → 100644
import type { StorybookConfig } from '@storybook/nextjs';
import path from 'path';
const config: StorybookConfig = {
stories: ['../components/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-onboarding',
'@storybook/addon-interactions',
'storybook-tailwind-dark-mode'
],
webpackFinal: async (config) => {
if (config.resolve) {
config.resolve.alias = {
...config.resolve.alias,
'@': path.resolve(__dirname, '../')
};
}
return config;
},
framework: {
name: '@storybook/nextjs',
options: {}
},
docs: {
autodocs: 'tag'
}
};
export default config;
.storybook/preview.ts 0 → 100644
import '@/styles/globals.css';
import type { Preview } from '@storybook/react';
import * as NextImage from 'next/image';
import { ImageProps } from 'next/image';
const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i
}
}
},
globalTypes: {
darkMode: {
defaultValue: false, // Enable dark mode by default on all stories
},
// Optional (Default: 'dark')
className: {
defaultValue: 'dark',// Set your custom dark mode class name
},
},
};
export default preview;
Object.defineProperty(NextImage, 'getImageProps', {
configurable: true,
value: (props: ImageProps) => {
return { props: { ...props, srcSet: props.src } };
}
});
.yarnrc.yml 0 → 100644
nodeLinker: node-modules
README.md 0 → 100644
# Nextjs Starter Template
## Tools Configured
- Next.js
- React Storybook
- Typescript
- Tailwind CSS
- pnpm
- Commitizen
- Editorconfig
- Eslint
- Prettier
- Husky (to lint commit messages)
## Important Notes
- Enable nodejs corepack `corepack enable`
- Install pnpm using `corepack prepare pnpm@latest --activate`
- Install dependencies using `pnpm install`
- Install commitizen globally `npm install -g commitizen`
- Then, use `git cz` or `cz` to commit changes
- Commit messages must follow [angular conventional commit
standards](https://github.com/conventional-changelog/commitlint)
- Install prettier extension in editor. Enable "Format on save" option.
- Install editorconfig extension in editor.
- All files will be formatted using prettier before commit
### Development Server
```bash
pnpm dev
```
### Build Task
```bash
pnpm build
```
### Production Server
```bash
pnpm start
```
### Run Storybook
```bash
pnpm storybook
```
### Build Static Storybook
```bash
pnpm build-storybook
```
app/another/page.tsx 0 → 100644
import Button from '@/components/button';
const AnotherPage = () => {
return (
<div className="container m-auto">
<center className="p-10">
<h3 className="text-3xl text-gray-600 font-semibold mb-5 px-5">
You&lsquo;ve landed on another page
</h3>
<Button href="/" size="lg">
Navigate home page
</Button>
</center>
</div>
);
};
export default AnotherPage;
app/layout.tsx 0 → 100644
import '@/styles/globals.css';
interface LayoutProps {
children: React.ReactNode;
}
export default function RootLayout({ children }: LayoutProps) {
return (
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="icon" href="/favicon.ico" />
</head>
<body>{children}</body>
</html>
);
}
app/not-found.tsx 0 → 100644
import PageNotFound from '@/components/layout/page-not-found';
export default PageNotFound;
app/page.tsx 0 → 100644
import Button from '@/components/button';
import Image from 'next/image';
const HomePage = () => {
return (
<center className="py-10">
<Image
src="/img/nextjs.svg"
alt="Next.js"
width={512}
height={103}
className="w-60 mb-4"
/>
<h3 className="text-3xl text-gray-600 font-semibold mb-5 px-5">
Welcome to Next.js starter template
</h3>
<div className="bg-gray-100 p-5 mb-10">
<p className="mb-3 text-gray-400 font-semibold">
This template is built with
</p>
<div className="flex justify-center gap-5">
<Image
src="/img/tailwind.svg"
alt="Tailwind CSS"
width={512}
height={63}
className="w-40"
/>
<Image
src="/img/typescript.svg"
alt="TypeScript"
width={284}
height={70}
className="w-24"
/>
</div>
</div>
<Button href="/another" size="lg">
Navigate to another page
</Button>
</center>
);
};
export default HomePage;
components/Top-Level/Profile-card/ProfileCard.tsx 0 → 100644
import Image from "next/image";
import Clock from '@/public/Icons/icons8-clock.svg'
import { profileCardsItems } from "@/types/blog";
interface ProfileCardProps extends profileCardsItems{
}
const ProfileCard:React.FC<ProfileCardProps> = ({authorImg,author,date}) => {
return (
<div className="flex gap-[10px] mt-auto flex-shrink-0">
<Image src={authorImg} width={50} height={50} alt="" className="rounded-full max-w-[50px] max-h-[50px] size-15 aspect-square object-cover overflow-hidden" />
<div>
<h5 className="font-sans font-semibold text-[15px] sm:text-[18px] capitalize text-black dark:text-white">{author}</h5>
<p className="font-sans text-subHeadColor font-semibold text-[12px] sm:text-[14px]">{`${date.toLocaleString('default', { month: 'short' })} ${date.getDate()}, ${date.getFullYear()}.`}
<span className="ml-2 *:inline *:text-[14px] font-semibold ">
<Image src={Clock} alt="" width={0} height={0} className="mb-[3px] mr-1 w-[15px] h-[15px]" />
<p>
{/* {date.getHours()} hrs */}
{date.getMinutes()} mins</p>
</span>
</p>
</div>
</div> );
}
export default ProfileCard;
\ No newline at end of file
components/Top-Level/Searchbar/SearchBar.tsx 0 → 100644
import Image from 'next/image'
import React, { useRef, useState } from 'react'
import cn from 'classnames'
import {Search,Close} from '@/utils/icons'
interface SearchBarProps extends React.InputHTMLAttributes<HTMLInputElement>{
onSearch: (name: string) => void;
}
const SearchBar: React.FC<SearchBarProps> = ({ onSearch, className, ...props }) => {
const [input, setinput] = useState('')
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setinput(e.target.value)
onSearch(e.target.value)
}
const onClose = () => {
setinput('');
onSearch('');
}
return (
<div className='min-w-full flex gap-1 items-center px-[20px] py-[10px] dark:bg-[#0b0d0e] dark:border-[#3c3d3e] dark:border-2 bg-[#f4f4f4] rounded-md'>
<Search />
<input {...props} type='text' className={cn('w-full dark:text-white dark:bg-[#0b0d0e] bg-[#f4f4f4] focus:outline-none text-textColor text-[17px]', className)} onChange={handleChange} value={input} />
{
input !='' &&
<Close handleClick={onClose} />
}
</div>
)
}
export default SearchBar
\ No newline at end of file
components/Top-Level/Searchbar/searchbar.stories.tsx 0 → 100644
import type { Meta, StoryObj } from '@storybook/react';
import SearchBar from './SearchBar';
const meta: Meta<typeof SearchBar> = {
title: 'Top-Level/Search',
component: SearchBar,
argTypes: {
onSearch: {
action: 'onSearch',
}
}
}
export default meta;
type Story = StoryObj<typeof meta>;
export const Search_: Story = {
args: {
placeholder:'Discover,news,articles and more'
}
}
\ No newline at end of file
components/Top-Level/blog-card/BlogCard.tsx 0 → 100644
import React from "react"
import Image from "next/image";
import Link from "next/navigation";
import { profileCardsItems } from "@/types/blog";
import ProfileCard from "../Profile-card/ProfileCard";
interface blogcardprops extends profileCardsItems{
img?: string;
title?: string;
description?: string;
id?: number;
}
const BlogCard:React.FC<blogcardprops> = ({img,title,description,id,...props}) => {
return (
<div className="sm:max-w-sm w-full shadow-sm 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">
{
img &&
<Image src={img} width={100} height={100} alt="" className="w-full h-[220px] rounded-t-lg object-cover" />
}
<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]">
{title}
</h4>
<p className="text-subHeadColor my-[5px] text-sm sm:text-[17px] mb-[1em] leading-[1.4em] dark:text-gray-400">
{description}
</p>
<ProfileCard {...props} />
</div>
</div>
)
}
export default BlogCard
\ No newline at end of file
components/Top-Level/blog-card/blogcard.stories.tsx 0 → 100644
import type { Meta, StoryObj } from '@storybook/react';
import BlogCard from './BlogCard';
import { blog_data } from '@/utils/Blog_data';
const meta: Meta<typeof BlogCard> = {
title: 'Top-Level',
component: BlogCard,
}
export default meta;
type Story = StoryObj<typeof meta>;
export const blog_: Story = {
args: {
img:'https://images.unsplash.com/photo-1556208144-ad3c8e2642ef?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fHNreXNjcmFwZXJ8ZW58MHx8MHx8fDA%3D',
title: 'malesuada fames ac turpis egestas tristique',
description: 'at auctor urna nunc id cursus metus aliquam eleifend mi',
author: 'idris',
authorImg: "https://images.pexels.com/photos/8993561/pexels-photo-8993561.jpeg?auto=compress&cs=tinysrgb&w=600",
date:new Date('2014-03-15')
}
}
export const blog_List__: Story = {
render: () => {
return (
<div className="flex flex-wrap gap-4 w-full dark:bg-black p-2">
{blog_data.map((data, i) => (
<div key={i} className="flex-grow sm:flex-grow-0 sm:w-[calc(50%-1rem)] lg:w-[calc(33.33%-1rem)] xl:w-[calc(25%-1rem)] *:sm:max-w-md *:h-full">
<BlogCard {...data} />
</div>
))}
</div>
)
}
}
\ No newline at end of file
components/Top-Level/blog-page/Blogpage.tsx 0 → 100644
import { profileCardsItems } from "@/types/blog";
import Image from "next/image";
import React from "react";
import Markdown from "react-markdown";
interface BlogPageProps{
blogTitle: string;
authorDetails: Omit<profileCardsItems, 'authorImg'>;
categories: string[];
banner: {
img: string;
width: number;
height: number;
};
readingTime: number;
content: string;
category: string;
}
const BlogPage: React.FC<BlogPageProps> = ({ blogTitle, authorDetails,category,readingTime,banner,content,categories }) => {
const { date,author } = authorDetails;
return (
<div className="max-w-[1200px] mx-auto">
<div className="lg:px-20">
<h3 className="text-[1.4em] sm:text-4xl md:text-5xl font-libre font-bold sm:font-semibold ">{blogTitle}</h3>
<div className="my-5 *:text-textColor flex gap-4 flex-wrap items-center *:text-sm *:sm:text-md">
<p className="font-semibold capitalize dark:text-white">posted on <span className="font-bold text-gray-400 dark:text-white">{date?.toLocaleString('default', { month: 'short' })} {date.getDate()}, {date.getFullYear()}</span>
</p>
<p className="font-semibold capitalize dark:text-white"> by <span className="font-bold text-gray-400 dark:text-white">{author}</span>
</p>
<p className="font-semibold capitalize dark:text-white"> Published In <span className="font-bold text-gray-400 dark:text-white">{category}</span>
</p>
<p className="font-bold text-gray-300 dark:text-white">
{readingTime} min read
</p>
</div>
</div>
<Image src={banner.img} alt="*img" width={banner.width}
height={banner.height} className="rounded-xl w-full object-cover sm:h-[400px]"
/>
<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-3xl prose-h2: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: prose-h4:text-[1.5em] dark:prose-li:text-gray-400 prose-li:text-[17px]">
<Markdown>
{content}
</Markdown>
</div>
<ul className="dark:text-gray-400 prose-li:list-none mt-10 flex gap-3 items-center flex-wrap">
<li className="text-lg">Tags:</li>
{
categories.map((item: string) => (<li className="px-4 hover:bg-primary hover:text-white dark:hover:bg-primary cursor-pointer text-lg py-1 list-none dark:bg-[#2a2a2a] bg-secondary text-textColor dark:text-white w-min rounded-3xl">
{item}
</li>))
}
</ul>
</div>
</div>
);
}
export default BlogPage;
\ No newline at end of file
components/Top-Level/blog-page/blog-page.stories.tsx 0 → 100644
import type { Meta, StoryObj } from '@storybook/react';
import BlogPage from './Blogpage';
const meta: Meta<typeof BlogPage> = {
title: 'Top-Level',
component: BlogPage,
}
export default meta;
type Story = StoryObj<typeof meta>;
export const Blog_page: Story = {
args: {
blogTitle: "Create an Art that shows the beauty in everyone’s ideas of flaws.",
authorDetails: {
author: "Charlotte mia",
date: new Date('2015-1-01'),
},
category: 'fashion',
readingTime: 1,
content: "\n ## How to create an Art that shows the beauty in everyone ideas of flaws.\n\n Fusce faucibus ante vitae justo efficitur elementum. Donec et ipsum faucibus arcu ipsum elementum, luctus justo. ac purus semper. Fusce faucibus ante vitae justo efficitur sed et elementum. Donec ipsum faucibus arcu elementum, luctus justo. ac purus semper. Fusce faucibus ante vitae justo efficitur elementum. Donec ipsum faucibus arcu vitae justo efficitur elementum.\n\n Fusce faucibus ante vitae justo efficitur elementum. Donec ipsum faucibus arcu elementum, luctus justo. ac purus semper. Fusce faucibus ante vitae justo efficitur elementum. Donec ipsum faucibus arcu elementum, luctus justo. ac purus semper.\"\n\n \n> #### For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes. \n> \n> — Kelvin Edison\n\n Lorem faucibus fusce ante vitae justo efficitur elementum. Donec ipsum faucibus arcu elementum, luctus justo. ac purus semper. Fusce faucibus ante vitae justo efficitur elementum. Donec ipsum faucibus. Donec ipsum faucibus arcu elementum..\n\n ## Fusce faucibus ante vitae justo efficitur\n\n Lorem faucibus fusce ante vitae justo efficitur elementum. Donec ipsum faucibus arcu elementum, luctus justo. ac purus semper. Fusce faucibus ante vitae justo efficitur elementum. Donec ipsum faucibus. Donec ipsum faucibus arcu Donec ipsum faucibus arcu elementum, luctus justo. ac purus semper.\n\n 1. Quisque sagittis lacus eu lorem sodalesd enean adipiscing.\n 2. Donec ipsum faucibus arcu elementum, luctus justo.\n 3. Nam libero tempore, cum soluta nobis est eligendi optio.\n 4. Sed ut perspiciatis unde omnis natus\n\n ## Quisque sagittis lacus eu lorem sodales\n\n Lorem faucibus fusce ante vitae justo efficitur elementum. Donec ipsum faucibus arcu elementum, luctus justo. ac purus semper. Fusce faucibus ante vitae justo efficitur elementum. Donec ipsum faucibus. Donec ipsum faucibus arcu.\n\n Fusce faucibus arcu faucibus ante vitae justo efficitur elementum. Donec ipsum faucibus. Donec ipsum faucibus arcu.",
categories:[
"Fashion",
"Beauty"
],
banner: {
"img": "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_640.jpg",
"width": 1920,
"height": 500
}
},
render: (args) => (
<div className='dark:bg-black dark:text-white px-2 py-4'>
<BlogPage {...args} />
</div>
)
}
\ No newline at end of file
components/Top-Level/pagination/pagination.stories.tsx 0 → 100644
import type { Meta, StoryObj } from '@storybook/react';
import Pagination from './pagination';
const meta: Meta<typeof Pagination> = {
title: 'Top-Level',
component: Pagination,
argTypes: {
onChange:{action:"onChange"}
}
}
export default meta;
type Story = StoryObj<typeof meta>;
export const pagination: Story = {
args: {
size: 7,
currentIndex:0,
},
render: (args) => (
<div className='dark:bg-black min-h-full p-2'>
<Pagination {...args} />
</div>
)
}
\ No newline at end of file
components/Top-Level/pagination/pagination.tsx 0 → 100644
import Button from "@/components/base/Button/index";
import classNames from "classnames";
import React, { useState } from "react";
interface Paginationprops{
size: number;
currentIndex: number;
onChange: (index: number) => void;
}
const Pagination: React.FC<Paginationprops> = ({ size, currentIndex, onChange }) => {
const [isshow, setisshow] = useState(false)
const count = 2;
return (
<div className="flex gap-2 flex-wrap ">
{
!(currentIndex <0) &&
<>
{
currentIndex !== 0 && !(currentIndex >= size) && <Button size="sm" onClick={() => onChange(currentIndex - 1)}>
Back
</Button>
}
{
!(currentIndex >= size)&& Array.from({ length: (currentIndex >=size-count+1) || isshow ? size-currentIndex : count}).map((_, index) => {
return (
<Button
key={index}
onClick={() => onChange(index + currentIndex)}
size="icon"
isPrimary={currentIndex+index===currentIndex}
>
{currentIndex +index + 1}
</Button>
);
})
}
{
(!isshow && size-currentIndex > 2 )&& (
<React.Fragment>
<Button size="icon" onClick={()=>setisshow(!isshow)}>
...
</Button>
<Button size="icon" onClick={() => onChange(size - 1)}>
{size}
</Button>
</React.Fragment>
)
}
{
currentIndex !==size-1 && !(currentIndex >= size) && <Button size="sm" onClick={() => onChange(1 + currentIndex)}>
Next
{/* <Image src={Right_Arrow} alt="arrow" className="w-[16px] h-[16px] mt-[1px]" /> */}
</Button>
}
</>
}
</div>
);
}
export default Pagination;
\ No newline at end of file
components/base/Button/Button.stories.tsx 0 → 100644
import type { Meta, StoryObj } from '@storybook/react';
import cn from 'classnames';
import Button from './Button';
import React from 'react';
const meta: Meta<typeof Button> = {
title: 'Basic/Button',
component: Button,
tags: ['autodocs']
};
export default meta;
type Story = StoryObj<typeof meta>;
const Template = () => {
return (
<div className={cn('w-full min-h-full px-2 ',
'dark:bg-black dark:*:text-white')}>
<h6 className="mb-2 font-semibold">Size</h6>
<div className="flex gap-5 mb-4 flex-wrap items-center">
<Button size="sm">
Small button
</Button>
<Button size='md'>Medium button</Button>
<Button href="/" size="sm">
Small Anchor
</Button>
<Button href="/" size='md'>
Medium Anchor
</Button>
</div>
<h6 className="mb-2 font-semibold">Loading</h6>
<div className="flex gap-5 mb-4 flex-wrap items-center">
<Button size="sm" loading>
Small button
</Button>
<Button size='md' loading>
Medium button
</Button>
<Button href="/" size="sm" loading>
Small Anchor
</Button>
<Button size="md" href="/" loading>
Medium Anchor
</Button>
</div>
<h6 className="mb-2 font-semibold">Disabled</h6>
<div className="flex gap-5 mb-4 flex-wrap items-center">
<Button size="sm" disabled>
Small button
</Button>
<Button size='md' disabled>
Medium button
</Button>
</div>
<h6 className="mb-2 font-semibold">Disabled & Loading</h6>
<div className="flex gap-5 mb-4 flex-wrap items-center">
<Button size="sm" loading disabled>
Small button
</Button>
<Button size='md' loading disabled>
Medium button
</Button>
</div>
<h6 className="mb-2 font-semibold">Multiline</h6>
<div className="flex gap-5 mb-4 flex-wrap items-center">
<Button size="sm">
Lorem ipsum dolor sit <br /> amet consectetur adipisicing elit. <br />{' '}
Quas exercitationem unde voluptate iure dolore laudantium.
</Button>
<Button size='md'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br /> Quas
exercitationem unde voluptate iure dolore laudantium.
</Button>
</div>
<br />
<div className="flex gap-5 mb-4 flex-wrap items-center">
<Button size="sm" loading>
Lorem ipsum dolor sit <br /> amet consectetur adipisicing elit. <br />{' '}
Quas exercitationem unde voluptate iure dolore laudantium.
</Button>
<Button size='md' loading>
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br /> Quas
exercitationem unde voluptate iure dolore laudantium.
</Button>
</div>
<h6 className="mb-2 font-semibold">Block</h6>
<div className="flex flex-col gap-5">
<Button size="sm" block>
Small button
</Button>
<Button size='md' block>
Medium button
</Button>
<Button size="sm" block loading>
Small button
</Button>
<Button size="md" block loading>
Medium button
</Button>
<Button size="sm" block loading disabled>
Small button
</Button>
<Button size='md' block loading disabled>
Medium button
</Button>
</div>
</div>
);
};
export const Button_: Story = {
render: () => <Template />
};
components/base/Button/Button.tsx 0 → 100644
import cn from 'classnames';
import Link from 'next/link';
interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
children: React.ReactNode;
size: 'sm' | 'md' | 'icon';
disabled?: boolean;
href?: string;
loading?: boolean;
block?: boolean
isPrimary?: boolean;
}
export default function Button({ children, size, disabled, className, loading, href,isPrimary, block, ...props }: ButtonProps) {
console.log(isPrimary)
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', {
'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 dark:hover:bg-none': disabled,
'hover:bg-primary hover:text-white ease-in duration-100': !disabled,
'w-full': block,
'bg-white dark:bg-[#131617] dark:text-white':!isPrimary,
'bg-primary text-white': isPrimary
},className)
return typeof href === 'string' ? (
<Link href={href} className={classes} {...props}>
{children}
{loading && <Loader />}
</Link>
) : (
<button disabled={disabled} className={classes} {...props}>
{children}
{loading && <Loader />}
</button>
);
}
function Loader() {
return (
<span className="rounded-full h-5 w-5 border-2 border-b-transparent border-current dark:bg-[] animate-spin ms-2" />
);
}
components/base/Button/index.ts 0 → 100644
export { default } from './Button';
components/base/Heading/Heading.tsx 0 → 100644
const Heading = () => {
return (<div>
<h3 className="font-libre font-medium text-[45px] text-titleColor mb-2">
LifeStyle
</h3>
<p className="text-textColor text-xl ">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo, sunt.</p>
</div>);
}
export default Heading;
\ No newline at end of file
components/base/typography.stories.tsx 0 → 100644
export default {
title: 'Basic/Typography'
};
export const TitleAndParagraph = () => (
<div className="container">
<div className="flex flex-col gap-4 mb-5">
<div className="text-9xl font-bold uppercase font-libre">Heading</div>
<div className="text-8xl font-bold uppercase font-libre">Heading</div>
<div className="text-7xl font-bold uppercase font-libre">Heading</div>
<div className="text-6xl font-bold uppercase font-libre">Heading</div>
<div className="text-5xl font-bold uppercase font-libre">Heading</div>
<div className="text-4xl font-bold uppercase font-libre">Heading</div>
<div className="text-3xl font-bold uppercase font-libre">Heading</div>
<div className="text-2xl font-bold uppercase font-libre">Heading</div>
<div className="text-xl font-bold uppercase font-libre">Heading</div>
</div>
<p className="font-sans">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo et quae
consequuntur voluptatum quibusdam, autem velit quidem laborum, dignissimos
doloremque ullam eos fugit repellendus maiores eveniet repellat dolor eius
perspiciatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<p>
Quasi aliquam impedit magnam tempora doloribus voluptatibus, at ea dolores
facilis et quod hic, cumque repellendus quidem expedita explicabo
architecto, possimus minima!
</p>
</div>
);
components/layout/Navigation/Header.stories.tsx 0 → 100644
import type { Meta, StoryObj } from '@storybook/react';
import Navigation from './Navigation';
const meta: Meta<typeof Navigation> = {
title: 'Layout/Header',
component: Navigation,
argTypes: {
onSearch: {
action: 'onSearch',
},
onChangeTheme: {
action:'changeTheme',
}
}
}
export default meta;
type Story = StoryObj<typeof meta>;
export const Header_: Story = {
args: { },
}
\ No newline at end of file
components/layout/Navigation/Navigation.tsx 0 → 100644
import Image from 'next/image';
import React, { useEffect, useRef, useState } from 'react';
import cn from 'classnames';
import SearchBar from '@/components/Top-Level/Searchbar/SearchBar';
import Newspaper from '@/public/Icons/icons-newspaper.svg'
import {Moon,Sun} from "@/utils/icons";
import menu from "@/public/Icons/icons-menu.svg"
interface HeaderProps {
onSearch: (name: string) => void;
onChangeTheme: () => string;
}
const Navigation: React.FC<HeaderProps> = ({ onSearch,onChangeTheme }) => {
const [isOPen, setisOPen] = useState(false);
return (
<React.Fragment>
<div className="w-full justify-between flex items-center shadow-md p-4 sticky dark:bg-[black] dark:*:text-white">
<div className='flex gap-2 items-center'>
<Image src={Newspaper} height={40} width={40} alt="Newspaper" />
<h1 className='font-semibold text-2xl'>NewsBlog</h1>
</div>
<div className="hidden md:block min-w-[400px]">
<SearchBar placeholder='Discover news, articles, and more' className={'font-semibold'} onSearch={onSearch} />
</div>
<div className='hidden md:block'>
<Sun handleClick={onChangeTheme}/>
<Moon handleClick={onChangeTheme}/>
</div>
<div className='block md:hidden w-[40px] h-[40px] rounded-md p-2 bg-primary cursor-pointer' onClick={()=>setisOPen(!isOPen)}>
<Image src={menu} alt='' className='w-full h-full'/>
</div>
</div>
<div className={cn('h-0 overflow-hidden md:hidden transition-all duration-100 ease-in-out container bg-white ', {
'h-[auto] py-2 min-w-full':isOPen
})} >
<SearchBar placeholder='Discover news, articles, and more' className={'font-semibold'} onSearch={onSearch} />
</div>
</React.Fragment>
);
}
export default Navigation;
\ No newline at end of file
components/layout/PageNotFound/PageNotFound.stories.tsx 0 → 100644
import type { Meta, StoryObj } from '@storybook/react';
import PageNotFoundComponent from './PageNotFound';
const meta: Meta<typeof PageNotFoundComponent> = {
title: 'Layout/Page Not Found',
component: PageNotFoundComponent,
parameters: {
layout: 'centered'
}
};
export default meta;
type Story = StoryObj<typeof meta>;
export const PageNotFound: Story = {};
components/layout/PageNotFound/PageNotFound.tsx 0 → 100644
import Image from 'next/image';
import Button from '@/components/base/Button';
import FourOhFour from './img/404.png';
export default function PageNotFound() {
return (
<div className="flex flex-col justify-center items-center">
<Image src={FourOhFour} alt="404, Page Not Found!" />
<Button href="/">Back to Home</Button>
</div>
);
}
components/layout/PageNotFound/index.ts 0 → 100644
export { default } from './PageNotFound';
components/layout/PageNotFound/styles.module.scss 0 → 100644
@use '@styles/vars.scss';
.notFound {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10vh 1em;
box-sizing: border-box;
h2 {
font-size: 10em;
font-weight: 100;
line-height: 0.8;
margin: 0;
color: #1ea7fd;
}
a {
margin-top: 2em;
}
}
@include vars.mQuery(xl) {
.notFound {
font-size: 0.9em;
}
}
components/types.d.ts 0 → 100644
/** Commonly used types that are not
* associated with specific component */
export interface ILink {
label: string;
url: string;
}
export interface ISocialLink {
icon: string;
url: string;
label?: string;
}
next-env.d.ts 0 → 100644
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
next.config.js 0 → 100644
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 's3-ap-southeast-1.amazonaws.com'
}
],
imageSizes: [64, 128, 256, 576, 768, 992, 1200, 1600, 1920, 2048, 3840]
},
webpack: (config, { isServer }) => {
if (process.env.ANALYZE && !isServer) {
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
config.plugins.push(
new BundleAnalyzerPlugin({
analyzerMode: 'server',
analyzerPort: 8888,
openAnalyzer: true
})
);
}
return config;
},
async rewrites() {
return [
{
source: '/api/:path*',
destination: `${process.env.NEXT_PUBLIC_API_URL}/:path*`
}
];
},
poweredByHeader: false,
compress: false
};
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"name": "nextjs-starter-template",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"analyze": "cross-env ANALYZE=true next build"
},
"dependencies": {
"@tailwindcss/typography": "^0.5.13",
"@types/node": "^20.11.5",
"@types/react": "^18.2.48",
"autoprefixer": "^10.4.17",
"classnames": "^2.5.1",
"next": "^14.1.0",
"postcss": "^8.4.33",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-markdown": "^9.0.1",
"sharp": "^0.33.2",
"tailwindcss": "^3.4.1",
"typescript": "^5.3.3"
},
"devDependencies": {
"@commitlint/cli": "^18.4.4",
"@commitlint/config-conventional": "^18.4.4",
"@storybook/addon-essentials": "^7.6.10",
"@storybook/addon-interactions": "7.6.10",
"@storybook/addon-links": "^7.6.10",
"@storybook/addon-onboarding": "1.0.10",
"@storybook/blocks": "7.6.10",
"@storybook/nextjs": "^7.6.10",
"@storybook/react": "7.6.10",
"@storybook/test": "7.6.10",
"@types/eslint": "^8.56.2",
"cross-env": "^7.0.3",
"cz-conventional-changelog": "^3.3.0",
"eslint": "^8.56.0",
"eslint-config-next": "^14.1.0",
"eslint-plugin-storybook": "^0.6.15",
"husky": "^8.0.3",
"prettier": "^3.2.4",
"pretty-quick": "^4.0.0",
"storybook": "^7.6.10",
"storybook-dark-mode": "^4.0.2",
"storybook-tailwind-dark-mode": "^1.0.22",
"webpack-bundle-analyzer": "^4.10.1"
}
}
pnpm-lock.yaml 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
postcss.config.js 0 → 100644
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
public/Font/OFL.txt 0 → 100644
Copyright (c) 2014, Indian Type Foundry (info@indiantypefoundry.com).
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://openfontlicense.org
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
public/Icons/close-svg.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 72 72" fill="#718096">
<path d="M 19 15 C 17.977 15 16.951875 15.390875 16.171875 16.171875 C 14.609875 17.733875 14.609875 20.266125 16.171875 21.828125 L 30.34375 36 L 16.171875 50.171875 C 14.609875 51.733875 14.609875 54.266125 16.171875 55.828125 C 16.951875 56.608125 17.977 57 19 57 C 20.023 57 21.048125 56.609125 21.828125 55.828125 L 36 41.65625 L 50.171875 55.828125 C 51.731875 57.390125 54.267125 57.390125 55.828125 55.828125 C 57.391125 54.265125 57.391125 51.734875 55.828125 50.171875 L 41.65625 36 L 55.828125 21.828125 C 57.390125 20.266125 57.390125 17.733875 55.828125 16.171875 C 54.268125 14.610875 51.731875 14.609875 50.171875 16.171875 L 36 30.34375 L 21.828125 16.171875 C 21.048125 15.391875 20.023 15 19 15 z"></path>
</svg>
\ No newline at end of file
public/Icons/icon-next.svg 0 → 100644
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <rect width="48" height="48" fill="white" fill-opacity="0.01"></rect> <path d="M12 12L24 24L12 36" stroke="#8995a7" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M24 12L36 24L24 36" stroke="#8995a7" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
\ No newline at end of file
public/Icons/icons-menu.svg 0 → 100644
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M4 6H20M4 12H20M4 18H20" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
\ No newline at end of file
public/Icons/icons-moon.svg 0 → 100644
<svg
stroke="#98a3b3"
fill="white"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
</svg>
public/Icons/icons-newspaper.svg 0 → 100644
<svg
xmlns="http://www.w3.org/2000/svg"
height="2em"
fill="#5a67d8"
viewBox="0 0 576 512"
stoke="#5a67d8"
>
<path d="M552 64H112c-20.858 0-38.643 13.377-45.248 32H24c-13.255 0-24 10.745-24 24v272c0 30.928 25.072 56 56 56h496c13.255 0 24-10.745 24-24V88c0-13.255-10.745-24-24-24zM48 392V144h16v248c0 4.411-3.589 8-8 8s-8-3.589-8-8zm480 8H111.422c.374-2.614.578-5.283.578-8V112h416v288zM172 280h136c6.627 0 12-5.373 12-12v-96c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v96c0 6.627 5.373 12 12 12zm28-80h80v40h-80v-40zm-40 140v-24c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H172c-6.627 0-12-5.373-12-12zm192 0v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0-144v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0 72v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12z" />
</svg>
public/Icons/icons-prev.svg 0 → 100644
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <rect width="48" height="48" fill="white" fill-opacity="0.01"></rect> <path d="M24 36L12 24L24 12" stroke="#768499" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M36 36L24 24L36 12" stroke="#768499" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
\ No newline at end of file
public/Icons/icons-sun.svg 0 → 100644
<svg
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122 1.415 1.414-2.12 2.122zM16.24 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.342 7.759 4.22 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z" />
</svg>
public/Icons/icons8-clock.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px" fill="#90939e" ><path d="M 12 2 C 6.4889971 2 2 6.4889971 2 12 C 2 17.511003 6.4889971 22 12 22 C 17.511003 22 22 17.511003 22 12 C 22 6.4889971 17.511003 2 12 2 z M 12 4 C 16.430123 4 20 7.5698774 20 12 C 20 16.430123 16.430123 20 12 20 C 7.5698774 20 4 16.430123 4 12 C 4 7.5698774 7.5698774 4 12 4 z M 11 6 L 11 12.414062 L 15.292969 16.707031 L 16.707031 15.292969 L 13 11.585938 L 13 6 L 11 6 z" /></svg>
\ No newline at end of file
public/Icons/icons8-search.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,256,256" width="64px" height="64px"><g fill="#718096" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(3.55556,3.55556)"><path d="M31,11c-11.027,0 -20,8.973 -20,20c0,11.027 8.973,20 20,20c3.97417,0 7.67238,-1.17843 10.78906,-3.18555l12.9375,12.9375c1.664,1.664 4.36239,1.664 6.02539,0c1.664,-1.664 1.664,-4.36139 0,-6.02539l-12.9375,-12.9375c2.00712,-3.11668 3.18555,-6.8149 3.18555,-10.78906c0,-11.027 -8.973,-20 -20,-20zM31,19c6.616,0 12,5.384 12,12c0,6.616 -5.384,12 -12,12c-6.616,0 -12,-5.384 -12,-12c0,-6.616 5.384,-12 12,-12z"></path></g></g></svg>
\ No newline at end of file
public/img/nextjs.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 103.22"><path d="M340.36.04h89.18V16.5h-35.38v86.6h-17.69V16.5h-36.11V.04zM503.8 70.86c-.19-1.82-1.03-3.25-2.49-4.27-1.48-1.03-3.38-1.54-5.72-1.54-1.64 0-3.05.25-4.23.74-1.17.49-2.08 1.15-2.71 1.99-.62.84-.93 1.8-.96 2.87 0 .9.22 1.68.64 2.33.42.66.98 1.22 1.71 1.67.72.46 1.52.83 2.4 1.14.89.31 1.77.57 2.66.78l4.09 1c1.64.38 3.23.89 4.76 1.54 1.52.64 2.9 1.45 4.11 2.43 1.21.98 2.17 2.16 2.87 3.54.71 1.39 1.07 3.01 1.07 4.87 0 2.52-.65 4.73-1.95 6.64-1.31 1.9-3.19 3.39-5.66 4.46-2.46 1.07-5.43 1.61-8.93 1.61-3.38 0-6.33-.52-8.81-1.56-2.49-1.03-4.44-2.54-5.84-4.52-1.4-1.99-2.15-4.41-2.26-7.26h7.76c.11 1.49.59 2.73 1.41 3.74.82.99 1.9 1.72 3.22 2.22 1.33.48 2.82.73 4.46.73 1.71 0 3.22-.26 4.53-.77 1.29-.51 2.31-1.21 3.04-2.14.75-.9 1.12-1.98 1.13-3.21-.01-1.12-.35-2.05-.99-2.79-.66-.73-1.57-1.34-2.74-1.84-1.17-.49-2.54-.94-4.1-1.33l-4.96-1.25c-3.58-.91-6.42-2.3-8.5-4.15-2.08-1.86-3.11-4.31-3.11-7.39 0-2.53.69-4.75 2.1-6.65 1.39-1.9 3.29-3.38 5.7-4.43 2.42-1.06 5.15-1.58 8.2-1.58 3.09 0 5.8.52 8.14 1.58 2.33 1.05 4.17 2.51 5.5 4.38s2.02 4 2.06 6.42h-7.6zm-40.09-11.8h7.84v30.19c-.01 2.78-.61 5.15-1.79 7.15-1.18 2-2.83 3.52-4.93 4.59-2.1 1.07-4.56 1.61-7.35 1.61-2.55 0-4.84-.46-6.88-1.36-2.04-.9-3.66-2.24-4.84-4.01-1.2-1.78-1.79-3.98-1.79-6.63h7.85c.01 1.16.28 2.16.78 3 .5.84 1.2 1.48 2.08 1.93.9.45 1.94.67 3.1.67 1.26 0 2.33-.26 3.21-.79.87-.52 1.55-1.3 2.01-2.34.46-1.03.7-2.3.71-3.82V59.06zm-30.19 43.41c-1.3 0-2.4-.45-3.32-1.35-.92-.89-1.38-1.98-1.37-3.27-.01-1.25.45-2.32 1.37-3.22.92-.9 2.02-1.35 3.32-1.35 1.25 0 2.34.45 3.26 1.35.93.9 1.4 1.97 1.41 3.22-.01.85-.22 1.63-.66 2.33-.44.71-1 1.26-1.71 1.67-.7.41-1.46.62-2.3.62zm-329-.14L22.11 0H0v103.06h17.69V22.03l65.22 81.07h110.78V86.64H122.2v-27.2h57.49V42.98H122.2V16.5h71.49V.04h-89.18V16.5h.01v85.83zM261.98 73.7l-11.6-14.42-35.37 43.94h23.21l23.76-29.52zM238.22.09h-23.15l82.92 103.05h23.21l-41.46-51.49L321.14.16 297.99.2l-29.84 37.06L238.22.09z"/></svg>
public/img/tailwind.svg 0 → 100644
<svg width="512" height="63.478" viewBox="0 0 512 63.478" xmlns="http://www.w3.org/2000/svg"><path d="M52.898 0C38.792 0 29.976 7.053 26.45 21.16c5.29-7.054 11.462-9.699 18.515-7.935 4.024 1.005 6.9 3.926 10.084 7.157 5.186 5.264 11.189 11.357 24.3 11.357 14.106 0 22.922-7.053 26.449-21.16-5.29 7.054-11.462 9.699-18.515 7.935-4.024-1.005-6.9-3.926-10.084-7.157C72.012 6.093 66.01 0 52.898 0zM26.45 31.739c-14.106 0-22.922 7.053-26.449 21.16 5.29-7.054 11.461-9.699 18.514-7.935 4.025 1.007 6.9 3.926 10.084 7.157 5.186 5.264 11.19 11.357 24.3 11.357 14.107 0 22.923-7.053 26.45-21.16-5.29 7.054-11.462 9.699-18.515 7.935-4.024-1.005-6.9-3.926-10.084-7.156-5.186-5.265-11.189-11.358-24.3-11.358z" fill="#38bdf8"/><path d="M158.687 26.747h-9.231v17.868c0 4.765 3.126 4.69 9.231 4.392v7.222c-12.358 1.489-17.272-1.936-17.272-11.614V26.747h-6.85v-7.743h6.85v-10l8.04-2.382v12.382h9.232zm35.192-7.743h8.04V56.23h-8.04v-5.36c-2.83 3.945-7.222 6.328-13.03 6.328-10.124 0-18.537-8.562-18.537-19.58 0-11.093 8.413-19.58 18.538-19.58 5.807 0 10.2 2.382 13.029 6.253zM182.115 49.53c6.7 0 11.764-4.989 11.764-11.912s-5.063-11.912-11.764-11.912-11.763 4.988-11.763 11.912 5.063 11.912 11.763 11.912zm33.205-36.11c-2.83 0-5.137-2.383-5.137-5.138a5.147 5.147 0 0 1 5.137-5.137 5.147 5.147 0 0 1 5.137 5.137c0 2.755-2.308 5.138-5.137 5.138zm-4.02 42.808V19.004h8.04V56.23zm17.346 0V1.881h8.041v54.348zm60.23-37.225h8.487L285.675 56.23h-7.892l-7.743-25.09-7.817 25.09h-7.891l-11.689-37.225h8.487l7.222 25.685 7.817-25.685h7.668l7.743 25.685zm18.464-5.583c-2.83 0-5.137-2.383-5.137-5.138a5.147 5.147 0 0 1 5.137-5.137 5.147 5.147 0 0 1 5.137 5.137c0 2.755-2.308 5.138-5.137 5.138zm-4.02 42.808V19.004h8.04V56.23zm36.926-38.193c8.339 0 14.295 5.659 14.295 15.337v22.856h-8.04V34.192c0-5.658-3.277-8.636-8.34-8.636-5.285 0-9.454 3.127-9.454 10.72V56.23h-8.04V19.004h8.04v4.765c2.457-3.871 6.477-5.733 11.54-5.733zM392.66 4.114h8.04V56.23h-8.04v-5.36c-2.83 3.945-7.222 6.328-13.029 6.328-10.125 0-18.538-8.562-18.538-19.58 0-11.093 8.413-19.58 18.538-19.58 5.807 0 10.2 2.382 13.029 6.253zM380.896 49.53c6.7 0 11.763-4.989 11.763-11.912s-5.063-11.912-11.763-11.912-11.763 4.988-11.763 11.912 5.062 11.912 11.763 11.912zm46.754 7.668c-11.242 0-19.654-8.562-19.654-19.58 0-11.093 8.412-19.58 19.654-19.58 7.296 0 13.625 3.796 16.603 9.603l-6.924 4.02c-1.638-3.498-5.286-5.732-9.753-5.732-6.552 0-11.54 4.988-11.54 11.689s4.988 11.688 11.54 11.688c4.467 0 8.115-2.308 9.902-5.732l6.923 3.945c-3.126 5.882-9.455 9.679-16.75 9.679zm30.003-27.919c0 6.775 20.027 2.68 20.027 16.454 0 7.445-6.477 11.465-14.517 11.465-7.445 0-12.806-3.35-15.188-8.71l6.924-4.021c1.191 3.35 4.169 5.36 8.264 5.36 3.573 0 6.328-1.19 6.328-4.169 0-6.626-20.027-2.903-20.027-16.23 0-6.998 6.03-11.39 13.624-11.39 6.105 0 11.168 2.828 13.773 7.742l-6.774 3.797c-1.34-2.903-3.946-4.244-6.999-4.244-2.903 0-5.435 1.266-5.435 3.946zm34.322 0c0 6.775 20.027 2.68 20.027 16.454 0 7.445-6.477 11.465-14.518 11.465-7.445 0-12.805-3.35-15.188-8.71l6.924-4.021c1.191 3.35 4.17 5.36 8.264 5.36 3.574 0 6.328-1.19 6.328-4.169 0-6.626-20.027-2.903-20.027-16.23 0-6.998 6.03-11.39 13.625-11.39 6.104 0 11.167 2.828 13.773 7.742l-6.775 3.797c-1.34-2.903-3.946-4.244-6.998-4.244-2.904 0-5.435 1.266-5.435 3.946z" fill="#0f172a"/></svg>
public/img/typescript.svg 0 → 100644
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="logo-typescript" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.09 69.57">
<g fill="#007ACC">
<path d="M34.98 7.56H20.43v45.07h-5.91V7.56H0V2.21h34.98V7.56z"/>
<path d="M57.94 16.63L41.38 58.39c-2.95 7.45-7.1 11.18-12.45 11.18 -1.5 0-2.75-0.15-3.76-0.46v-5.17c1.24 0.42 2.38 0.63 3.41 0.63 2.91 0 5.09-1.73 6.54-5.2l2.88-6.82L23.94 16.63h6.4l9.74 27.7c0.12 0.35 0.36 1.27 0.74 2.74h0.21c0.12-0.56 0.35-1.45 0.7-2.67l10.23-27.77H57.94z"/>
<path d="M67.37 47.43h-0.14v21.76h-5.77V16.63h5.77v6.33h0.14c2.84-4.78 6.98-7.17 12.45-7.17 4.64 0 8.26 1.61 10.86 4.83 2.6 3.22 3.9 7.54 3.9 12.96 0 6.02-1.46 10.85-4.39 14.47 -2.93 3.62-6.94 5.43-12.02 5.43C73.5 53.47 69.9 51.46 67.37 47.43zM67.23 32.91v5.03c0 2.98 0.97 5.5 2.9 7.58s4.39 3.11 7.37 3.11c3.49 0 6.23-1.34 8.21-4.01 1.98-2.67 2.97-6.39 2.97-11.14 0-4.01-0.93-7.15-2.78-9.42 -1.85-2.27-4.36-3.41-7.52-3.41 -3.35 0-6.05 1.17-8.09 3.5C68.25 26.47 67.23 29.39 67.23 32.91z"/>
<path d="M129.56 36.07h-25.42c0.09 4.01 1.17 7.1 3.23 9.28 2.06 2.18 4.9 3.27 8.51 3.27 4.05 0 7.78-1.34 11.18-4.01v5.41c-3.16 2.3-7.35 3.45-12.55 3.45 -5.09 0-9.08-1.63-11.99-4.9 -2.91-3.27-4.36-7.87-4.36-13.8 0-5.6 1.59-10.17 4.76-13.69 3.18-3.53 7.12-5.29 11.83-5.29s8.35 1.52 10.93 4.57c2.58 3.05 3.87 7.28 3.87 12.69V36.07zM123.65 31.18c-0.02-3.33-0.83-5.92-2.41-7.77 -1.58-1.85-3.78-2.78-6.59-2.78 -2.72 0-5.03 0.97-6.93 2.92 -1.9 1.95-3.07 4.49-3.52 7.63H123.65z"/>
<path d="M134.6 50.59v-6.96c0.73 0.7 1.6 1.34 2.62 1.9 1.02 0.56 2.09 1.04 3.22 1.42s2.26 0.69 3.39 0.9c1.14 0.21 2.19 0.32 3.15 0.32 3.32 0 5.81-0.67 7.45-2.02 1.64-1.35 2.46-3.29 2.46-5.82 0-1.36-0.27-2.54-0.82-3.55 -0.55-1.01-1.3-1.93-2.27-2.76s-2.11-1.63-3.43-2.39c-1.32-0.76-2.74-1.56-4.26-2.41 -1.61-0.89-3.11-1.79-4.5-2.71 -1.39-0.91-2.61-1.92-3.63-3.02 -1.03-1.1-1.84-2.35-2.43-3.74 -0.59-1.39-0.88-3.03-0.88-4.9 0-2.3 0.46-4.29 1.38-5.99 0.92-1.7 2.13-3.1 3.64-4.2 1.5-1.1 3.21-1.92 5.13-2.46 1.92-0.54 3.88-0.81 5.87-0.81 4.55 0 7.86 0.6 9.94 1.79v6.64c-2.72-2.06-6.22-3.09-10.49-3.09 -1.18 0-2.36 0.14-3.54 0.4 -1.18 0.27-2.23 0.71-3.15 1.32 -0.92 0.61-1.67 1.39-2.25 2.36 -0.58 0.96-0.87 2.13-0.87 3.52 0 1.29 0.22 2.4 0.66 3.34 0.44 0.94 1.09 1.79 1.95 2.57 0.86 0.77 1.9 1.52 3.14 2.25 1.23 0.73 2.65 1.52 4.26 2.39 1.65 0.89 3.22 1.83 4.7 2.81s2.78 2.07 3.89 3.27c1.11 1.2 2 2.52 2.65 3.97 0.65 1.45 0.98 3.12 0.98 4.99 0 2.48-0.45 4.59-1.33 6.31 -0.89 1.72-2.09 3.12-3.6 4.2 -1.51 1.08-3.25 1.86-5.23 2.34 -1.97 0.48-4.05 0.72-6.24 0.72 -0.73 0-1.63-0.06-2.7-0.19s-2.17-0.32-3.28-0.56c-1.12-0.25-2.17-0.55-3.17-0.91C136 51.44 135.21 51.03 134.6 50.59z"/>
<path d="M193.25 50.98c-2.77 1.66-6.05 2.5-9.84 2.5 -5.13 0-9.28-1.67-12.43-5.01s-4.73-7.67-4.73-12.99c0-5.93 1.7-10.69 5.1-14.29 3.4-3.6 7.93-5.4 13.61-5.4 3.16 0 5.95 0.59 8.37 1.76v5.91c-2.67-1.88-5.53-2.81-8.58-2.81 -3.68 0-6.7 1.32-9.05 3.96s-3.53 6.1-3.53 10.39c0 4.22 1.11 7.55 3.32 9.98s5.19 3.66 8.91 3.66c3.14 0 6.09-1.04 8.86-3.13V50.98z"/>
<path d="M215.56 22.46c-1.01-0.77-2.46-1.16-4.36-1.16 -2.46 0-4.52 1.16-6.17 3.48s-2.48 5.48-2.48 9.49v18.35h-5.77v-36h5.77v7.42h0.14c0.82-2.53 2.07-4.51 3.76-5.92 1.69-1.42 3.57-2.13 5.66-2.13 1.5 0 2.65 0.16 3.45 0.49V22.46z"/>
<path d="M222.18 7.49c-1.03 0-1.91-0.35-2.64-1.05s-1.09-1.59-1.09-2.67c0-1.08 0.36-1.97 1.09-2.69 0.73-0.71 1.61-1.07 2.64-1.07 1.05 0 1.95 0.36 2.69 1.07 0.74 0.72 1.11 1.61 1.11 2.69 0 1.03-0.37 1.91-1.11 2.64C224.13 7.12 223.23 7.49 222.18 7.49zM224.99 52.63h-5.77v-36h5.77V52.63z"/>
<path d="M234.29 47.43h-0.14v21.76h-5.77V16.63h5.77v6.33h0.14c2.84-4.78 6.98-7.17 12.45-7.17 4.64 0 8.26 1.61 10.86 4.83 2.6 3.22 3.9 7.54 3.9 12.96 0 6.02-1.46 10.85-4.39 14.47s-6.94 5.43-12.02 5.43C240.42 53.47 236.82 51.46 234.29 47.43zM234.15 32.91v5.03c0 2.98 0.97 5.5 2.9 7.58s4.39 3.11 7.37 3.11c3.49 0 6.23-1.34 8.21-4.01s2.97-6.39 2.97-11.14c0-4.01-0.93-7.15-2.78-9.42 -1.85-2.27-4.36-3.41-7.52-3.41 -3.35 0-6.05 1.17-8.09 3.5C235.17 26.47 234.15 29.39 234.15 32.91z"/>
<path d="M283.09 52.28c-1.36 0.75-3.15 1.12-5.38 1.12 -6.3 0-9.46-3.52-9.46-10.55v-21.3h-6.19v-4.92h6.19V7.84l5.77-1.86v10.65h9.07v4.92h-9.07v20.28c0 2.41 0.41 4.14 1.23 5.17s2.18 1.55 4.08 1.55c1.45 0 2.71-0.4 3.76-1.2V52.28z"/>
</g>
</svg>
styles/globals.css 0 → 100644
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: hind;
src: url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap');
}
@font-face {
font-family: libre;
src: url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
}
\ No newline at end of file
tailwind.config.ts 0 → 100644
import type { Config } from "tailwindcss";
const config: Config = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./utils/**/*.{js,ts,jsx,tsx,mdx}'
],
darkMode: 'class', // Using 'class' instead of 'selector' for dark mode
theme: {
extend: {
colors: {
primary: '#5a67d8',
secondary: {
DEFAULT: '#f8f9fa',
light: '#f8f9fa',
dark: '#131617'
},
textColor: '#718096',
titleColor: '#2d3748',
subHeadColor: '#77859a',
light: '#f4f4f4',
dark: '#222222'
},
fontFamily: {
hind: ['Hind', 'sans-serif'],
libre: ['Libre', 'serif'],
},
}
},
plugins: [
require('@tailwindcss/typography'),
],
};
export default config;
tsconfig.json 0 → 100644
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
types/blog.ts 0 → 100644
export interface profileCardsItems{
author: string;
authorImg: string;
date: Date;
}
\ No newline at end of file
utils/Blog_data.ts 0 → 100644
export const blog_data = [
{
img: "https://cdn.pixabay.com/photo/2024/03/24/17/10/background-8653526_960_720.jpg",
title: "How to get perfect start for beginning runners",
description: "A deep dive into closures and how they work in JavaScript.",
author: "Jane Doe",
authorImg: "https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-01-15")
},
{
img:'https://cdn.pixabay.com/photo/2023/08/15/15/48/swan-8192196_640.jpg',
title: "Great tools to improve your personal blogging experience",
description: "An introductory guide to Python programming for beginners.",
author: "John Smith",
authorImg: "https://images.pexels.com/photos/1704488/pexels-photo-1704488.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-02-10")
},
{
img: "https://cdn.pixabay.com/photo/2024/05/18/08/16/cat-8769861_640.jpg",
title: "Great tools to improve your personal blogging experience",
description: "A deep dive into closures and how they work in JavaScript.",
author: "Alice Johnson",
authorImg: "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-03-05")
},
{
img: "https://cdn.pixabay.com/photo/2023/08/08/10/50/hot-wheels-8177051_640.jpg",
title: "The technical setup when starting a personal blog",
description:"A deep dive into closures and how they work in JavaScript.",
author: "Bob Brown",
authorImg: "https://images.pexels.com/photos/1310522/pexels-photo-1310522.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2022-04-20")
},
{
img:'https://cdn.pixabay.com/photo/2020/04/22/12/06/adventure-5077760_960_720.jpg',
title: "The technical setup when starting a personal blog",
description: "A deep dive into closures and how they work in JavaScript.",
author: "Cathy Green",
authorImg: "https://images.pexels.com/photos/1542085/pexels-photo-1542085.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-05-18")
},
{
img: "https://cdn.pixabay.com/photo/2013/03/12/17/54/hurricane-92968_640.jpg",
title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe",
description: "A deep dive into closures and how they work in JavaScript.",
author: "David Wilson",
authorImg: "https://images.pexels.com/photos/1310474/pexels-photo-1310474.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-06-15")
},
{
img: "https://cdn.pixabay.com/photo/2024/05/26/15/27/anime-8788959_640.jpg",
title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe",
description:'lorem ipsum dolor sit amet, consectetur adipiscing elit.Quisque consequ velit',
author: "Eva Davis",
authorImg: "https://images.pexels.com/photos/678783/pexels-photo-678783.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-07-22")
},
{
img:'https://cdn.pixabay.com/photo/2023/08/01/08/21/waterfall-8162449_640.jpg',
title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe",
description: "A practical guide to creating RESTful APIs with Node.js.",
author: "Frank Martin",
authorImg: "https://images.pexels.com/photos/1499327/pexels-photo-1499327.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-08-30")
},
{
img: "https://cdn.pixabay.com/photo/2014/12/07/09/30/milky-way-559641_640.jpg",
title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe",
description: "An introductory guide to Docker and containerization.",
author: "Grace Lee",
authorImg: "https://images.pexels.com/photos/1674752/pexels-photo-1674752.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-09-25")
},
{
img:'https://cdn.pixabay.com/photo/2024/05/24/17/14/travel-8785493_640.jpg',
title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe",
description: "A deep dive into closures and how they work in JavaScript.",
author: "Henry White",
authorImg: "https://images.pexels.com/photos/1898555/pexels-photo-1898555.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-10-10")
}
];
utils/icons.tsx 0 → 100644
interface SVGProps{
handleClick:()=>void
}
export const Search= () =>
(<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor" className="w-[20px] stroke-[#718096] dark:stroke-white mr-2" >
<path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
)
export const Moon:React.FC<SVGProps> = ({handleClick}) => (<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.8} stroke="currentColor" className="w-[30px] block dark:hidden stroke-[#718096] cursor-pointer" onClick={handleClick}>
<path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
</svg>
)
export const Sun:React.FC<SVGProps>=({handleClick})=>(<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-[30px] hidden dark:block stroke-white cursor-pointer" onClick={handleClick}>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
</svg>
)
export const Close:React.FC<SVGProps> = ({handleClick}) => (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor" className="w-[20px] cursor-pointer stroke-[#718096] dark:stroke-white" onClick={handleClick} >
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
)
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