Skip to content

B
blog-task
Commit 427f4bd9 by Sujeeth AV
Options

Initial commit

parent d9e784a5
Showing with 766 additions and 135 deletions
.gitignore
......@@ -39,3 +39,6 @@ yarn-error.log*
# typescript
*.tsbuildinfo
next-env.d.ts
*storybook.log
storybook-static
.storybook/main.js 0 → 100644
/** @type { import('@storybook/nextjs').StorybookConfig } */
const config = {
"stories": [
"../components/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [],
"framework": {
"name": "@storybook/nextjs",
"options": {}
},
"staticDirs": [
"..\\public"
]
};
export default config;
\ No newline at end of file
.storybook/preview.js 0 → 100644
/** @type { import('@storybook/nextjs').Preview } */
import { withThemeFromJSXProvider } from '@storybook/addon-themes';
import { createGlobalStyle, ThemeProvider } from 'styled-components';
const preview = {
// decorators: [
// withThemeFromJSXProvider({
// themes: {
// light: lightTheme,
// dark: darkTheme,
// },
// defaultTheme: 'light',
// Provider: ThemeProvider,
// GlobalStyles,
// }),
// ],
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};
export default preview;
\ No newline at end of file
app/globals.css
@import "tailwindcss";
:root {
--background: #ffffff;
--foreground: #171717;
* {
padding: 0;
margin: 0;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
html,
body {
height: 100%;
width: 100%;
}
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
background-color: #0b0d0e;
min-height: 100vh;
}
app/page.js
import Image from "next/image";
export default function Home() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2 tracking-[-.01em]">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
app/page.js
</code>
.
</li>
<li className="tracking-[-.01em]">
Save and see your changes instantly.
</li>
</ol>
<div className="flex gap-4 items-center flex-col sm:flex-row">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Read our docs
</a>
</div>
</main>
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org →
</a>
</footer>
</div>
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
);
}
components/Base/Form/button/Button.jsx 0 → 100644
import clsx from "clsx";
import PropTypes from "prop-types";
import styles from "./Button.module.css";
export const Button = ({ variant, size, label, loading, ...props }) => {
return (
<button
className={clsx(
styles.button,
styles[variant],
styles[size],
loading && styles.loading
)}
disabled={loading || props.disabled}
{...props}
>
{loading ? "Loading..." : label}
</button>
);
};
Button.propTypes = {
variant: PropTypes.oneOf(["primary", "secondary"]).isRequired,
size: PropTypes.oneOf(["sm", "md", "lg"]),
label: PropTypes.string.isRequired,
loading: PropTypes.bool,
};
Button.defaultProps = {
size: "md",
loading: false,
};
components/Base/Form/button/Button.module.css 0 → 100644
.button {
width: 100%;
}
.button button {
width: 100%;
height: 2rem;
}
.primary {
}
.secondary {
}
.buttoncolumn {
display: flex;
gap: 1rem;
}
.sm {
font-size: 0.7rem;
height: 1.5rem;
border-radius: 1rem;
border: none;
}
.md {
font-size: 1rem;
height: 2rem;
border-radius: 1rem;
border: none;
}
.lg {
font-size: 1.3rem;
height: 2.5rem;
border-radius: 1rem;
border: none;
}
.loading {
cursor: wait;
}
components/Base/Form/button/Button.stories.jsx 0 → 100644
import { Button } from "./Button";
import styles from "./Button.module.css";
export default {
title: "Base/Button",
component: Button,
argTypes: {
onclick: {
action: "clicked",
},
},
};
export const Primary = () => (
<div className={styles.buttoncolumn}>
<Button variant="primary" label="Default" />
<Button variant="primary" label="Loading..." loading="true" />
<Button variant="primary" label="Disabled" disabled />
<Button variant="primary" label="Small" size="sm" />
<Button variant="primary" label="Medium" size="md" />
<Button variant="primary" label="Large" size="lg" />
</div>
);
Primary.parameters = {
backgrounds: { default: "primary-bg" },
};
export const Secondary = () => (
<div className={styles.buttoncolumn}>
<Button variant="secondary" label="Default" />
<Button variant="secondary" label="Loading..." loading="true" />
<Button variant="secondary" label="Disabled" disabled />
<Button variant="secondary" label="Small" size="sm" />
<Button variant="secondary" label="Medium" size="md" />
<Button variant="secondary" label="Large" size="lg" />
</div>
);
Secondary.parameters = {
backgrounds: { default: "secondary-bg" },
};
components/Base/Form/search/Search.jsx 0 → 100644
import React from "react";
import style from "./Search.module.css";
export const Search = ({
placeholder,
onChange,
icon: Icon,
iconClassName,
...props
}) => {
return (
<div className={style.searchContainer}>
{Icon && (
<span className={style.icon}>
<Icon className={`${style.icn} ${iconClassName || ""}`} />
</span>
)}
<input placeholder={placeholder} onChange={onChange} {...props} />
</div>
);
};
components/Base/Form/search/Search.module.css 0 → 100644
.searchContainer {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 10px;
}
.searchContainer input {
width: 100%;
height: 2rem;
}
input:focus {
outline: none;
}
.icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
input {
padding: 3px 7.5px 4.3px 35px;
background-color: #f3f3f3;
border: none;
}
components/Base/Form/search/Search.stories.jsx 0 → 100644
import { Search } from "./Search";
export default {
title: "Form/Search",
component: "Search",
argTypes: {
onChange: { action: "search-item" },
},
};
export const search = {
render:(args) => <Search {...args} />,
args:{
placeholder:"Discover news articles and more",
},
};
components/Base/Icons/Icons.jsx 0 → 100644
import PropTypes from "prop-types";
import cn from "classnames";
import styles from "@/components/Base/Icons/Icons.module.css";
export const Icons = ({ name, size = 20, classes }) => {
const icons = {
search: (
<svg
stroke="currentColor"
fill="currentColor"
strokidth="0"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z" />
</svg>
),
clock: (
<svg
stroke="currentColor"
fill="none"
strokeWidth="2"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="12" cy="12" r="10" />
<polyline points="12 6 12 12 16 14" />
</svg>
),
moon: (
<svg
stroke="currentColor"
fill="none"
strokeWidth="2"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="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>
),
sun: (
<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>
),
close: (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth="3"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
),
newspaper: (
<svg
xmlns="http://www.w3.org/2000/svg"
height="2em"
fill="currentColor"
viewBox="0 0 576 512"
stroke="currentColor"
>
<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>
),
};
const classNames = cn({
[styles[classes]]: classes,
[styles[size]]: size,
});
return <span className={classNames}>{icons[name]}</span>;
};
Icons.propTypes = {
name: PropTypes.oneOf([
"sun",
"moon",
"close",
"search",
"clock",
"newspaper",
]),
};
components/Base/Icons/Icons.module.css 0 → 100644
.small svg {
height: 16px;
width: 16px;
color: var(--font-color-300);
}
.moon svg,
.sun svg {
height: 50px;
width: 50px;
color: var(--font-color-300);
vertical-align: sub;
}
.menu-icon svg {
background: #5a67d8;
color: white;
padding: 0.5rem 0.7rem;
border-radius: 5px;
}
.medium svg {
height: 38px;
width: 38px;
color: #98a3b3;
}
.newspaper-icon svg {
color: #5a67d8;
height: 20px;
width: 20px;
}
components/Base/Icons/Icons.stories.jsx 0 → 100644
import { Icons } from "./Icons";
export default {
title: "Base/Icons",
component: Icons,
parameters: {
layout: "centered",
},
};
const iconList = ["close", "search", "clock", "sun", "moon", "newspaper"];
export const icons = () => {
return (
<div className="icon-container">
{iconList.map((e, i) => (
<div key={i}>{<Icons name={e} size="medium" />}</div>
))}
</div>
);
};
components/Base/Typography/Typo.jsx 0 → 100644
export const Typo = ({ description }) => {
return (
<div>
<p>{description}</p>
</div>
);
};
export const Details = ({ details }) => {
return (
<div>
<h3>{details}</h3>
</div>
);
};
components/Base/Typography/Typo.stories.jsx 0 → 100644
import { faker } from "@faker-js/faker";
import { Typo, Details } from "./Typo";
export default {
title: "Base/Typography",
component: Typo,
parameters: {
layout: "centered",
},
};
export const Fonttype = {
render: (args) => <Typo {...args} />,
args: {
description: faker.lorem.sentence(),
},
};
export const Detailtype = {
render: (args) => <Details {...args} />,
args: {
details: faker.lorem.sentence(),
},
};
components/Card/Header.jsx 0 → 100644
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 0 → 100644
.container {
display: flex;
justify-content: space-around;
}
.icon {
margin-top: 1.rem;
}
components/Card/Header.stories.jsx 0 → 100644
import { Header } from "./Header";
export default {
title: "Card/Header",
component: Header,
};
export const header = {
render: (args) => <Header {...args} />,
args: {
title: "NewsBlog",
},
};
components/Layout/Card/Header.jsx 0 → 100644
import React from "react";
export const Header = ({ title }) => {
return (
<div>
<h1>{title}</h1>
</div>
);
};
components/Layout/Card/Header.stories.jsx 0 → 100644
import { Header } from "./Header";
export default {
title: "Layout/header",
component: Header,
parameters: {
layout: "centered",
},
};
export const Blogheader = {
render: (args) => <Header {...args} />,
args: {
title: "Lifestyle",
},
};
components/Shared/Card/Card.jsx 0 → 100644
import React from "react";
import style from "./Card.module.css";
import { Header } from "@/components/Layout/Card/Header";
import Image from "next/image";
import blog from "@/public/images/blogsingle.jpg";
import { Typo, Details } from "@/components/Base/Typography/Typo";
export const Card = ({
title,
description,
posted,
author,
publish,
time,
details,
extradetails,
extradescription,
moredetails,
moredescription,
data,
heading,
authorname,
}) => {
return (
<>
<div className={style.container}>
<div className={style.block}>
<div className={style.head}>
<Header title={title} />
</div>
<div className={style.publish}>
<span>{posted}</span>
<span>{author}</span>
<span>{publish}</span>
<span>{time}</span>
</div>
</div>
<div className={style.img}>
<Image
src={blog}
alt="Blog-image"
className={style.imgstyle}
style={{ borderRadius: "16px" }}
/>
</div>
<div className={style.description}>
<Details details={details} />
<Typo description={description} />
<div className={style.auth}>
<Details details={heading} />
<Typo description={authorname} />
</div>
<Typo description={data} />
<Details details={extradetails} />
<Typo description={extradescription} />
<Details details={moredetails} />
<Typo description={moredescription} />
</div>
</div>
</>
);
};
components/Shared/Card/Card.module.css 0 → 100644
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.head {
justify-content: flex-start;
align-self: flex-start;
margin-left: 8rem;
}
.publish {
display: flex;
flex-direction: row;
column-gap: 1rem;
justify-content: flex-start;
align-self: flex-start;
margin-left: 5rem;
color: #818182;
}
.img {
position: relative;
box-sizing: border-box;
border-radius: 2rem;
display: flex;
justify-content: center;
overflow: hidden;
margin-top: 2rem;
}
.imgstyle {
object-fit: cover;
max-width: 85vw;
box-sizing: border-box;
border-radius: 2rem;
}
.head {
color: #818182;
font-size: 2rem;
margin-left: 8rem;
}
.description {
padding: 4rem;
margin-top: 0.5rem;
border-radius: 2rem;
color: #eeeeee;
background-color: #818182;
width: 90vw;
max-width: 102rem;
box-sizing: border-box;
}
@media (min-width: 768px) {
.publish {
display: flex;
flex-direction: row;
margin-left: 11rem;
column-gap: 3rem;
}
.block {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-self: flex-start;
}
}
components/Shared/Card/Card.stories.jsx 0 → 100644
import { Card } from "./Card";
export default {
title: "Shared/Card",
component: Card,
argTypes: {
layout: "centered",
},
};
export const Singlecard = {
render: (args) => <Card {...args} />,
args: {
title: "Create an Art that shows the beauty in everyone's ideas of flaws",
posted: "Posted on July 11,2020",
author: "By Charlotte mia",
publish: "Published in Fashion",
time: "1 min read",
details:
"How to create an Art that shows the beauty in everyone's idea of flaws",
description:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
data: " Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
extradetails: "Fusce faucibus ante vitae justo efficitur",
extradescription:
" Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
moredetails: "Quisque sagittis laccus eu lorem sodales",
moredescription:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
heading:
"For dull and lifeless skin, mix apple juice with honey.Apply a thin layer to your face, and leave it fro 5 minutes.",
authorname: "-Kelvin edison",
},
};
components/Top-level/Card/Card.jsx 0 → 100644
import React from "react";
import Image from "next/image";
import img_1 from "../../../public/images/lifestyle1.jpg";
import styles from "./Card.module.css";
export const Card = ({ title, description }) => {
return (
<div className={styles.container}>
<Image
src={img_1}
height={180}
width={320}
alt="Lifestyle image"
className={styles.img}
/>
<div className={styles.block}>
<h4 className={styles.title}>{title}</h4>
<p className={styles.text}>{description}</p>
</div>
</div>
);
};
components/Top-level/Card/Card.module.css 0 → 100644
.container {
width: 100%;
max-width: 20rem;
border: 1px solid gray;
border-radius: 1.5rem;
}
.img {
margin: 0 auto;
border-top-left-radius: 1.5rem;
border-top-right-radius: 1.5rem;
}
.block {
padding: 0.5rem;
}
components/Top-level/Card/Card.stories.jsx 0 → 100644
import { Card } from "./Card";
import { faker } from "@faker-js/faker";
export default {
title: "Top-level/Card",
component: Card,
parameters: {
layout: "centered",
},
};
export const Blogcard = {
render: (args) => <Card {...args} />,
args: {
title: "Great tools to improve your personal blogging experience",
description: faker.lorem.sentence(),
},
};
eslint.config.mjs
// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
import storybook from "eslint-plugin-storybook";
import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
......@@ -9,6 +12,9 @@ const compat = new FlatCompat({
baseDirectory: __dirname,
});
const eslintConfig = [...compat.extends("next/core-web-vitals")];
const eslintConfig = [
...compat.extends("next/core-web-vitals"),
...storybook.configs["flat/recommended"]
];
export default eslintConfig;
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
......@@ -6,18 +6,31 @@
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
"lint": "next lint",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"dependencies": {
"@faker-js/faker": "^9.9.0",
"classnames": "^2.5.1",
"clsx": "^2.1.1",
"next": "15.3.5",
"prop-types": "^15.8.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"next": "15.3.5"
"styled-components": "^6.1.19"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@storybook/addon-themes": "^9.0.16",
"@storybook/nextjs": "^9.0.16",
"@tailwindcss/postcss": "^4",
"tailwindcss": "^4",
"autoprefixer": "^10.4.21",
"eslint": "^9",
"eslint-config-next": "15.3.5",
"@eslint/eslintrc": "^3"
"eslint-plugin-storybook": "^9.0.16",
"postcss": "^8.5.6",
"storybook": "^9.0.16",
"tailwindcss": "^3.4.17"
}
}
postcss.config.js 0 → 100644
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
public/file.svg deleted 100644 → 0
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
\ No newline at end of file
public/globe.svg deleted 100644 → 0
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
public/next.svg deleted 100644 → 0
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
public/vercel.svg deleted 100644 → 0
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
\ No newline at end of file
public/window.svg deleted 100644 → 0
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
\ No newline at end of file
tailwind.config.js 0 → 100644
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
}
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