Skip to content

S
swiper-demo
Commit ecb35fe4 by Syed Abdul Rahman
Options

Initial commit

parent 4ddf578b
Showing with 164 additions and 116 deletions
package.json
......@@ -9,19 +9,21 @@
"lint": "next lint"
},
"dependencies": {
"next": "15.3.5",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"next": "15.3.5"
"react-markdown": "^10.1.0",
"swiper": "^11.2.10"
},
"devDependencies": {
"typescript": "^5",
"@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"@tailwindcss/postcss": "^4",
"tailwindcss": "^4",
"eslint": "^9",
"eslint-config-next": "15.3.5",
"@eslint/eslintrc": "^3"
"tailwindcss": "^4",
"typescript": "^5"
}
}
src/app/carousel/page.tsx 0 → 100644
"use client";
import Card from "../../components/Card/Card";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination, Navigation } from "swiper/modules";
import img from "../../../public/images/car-2.jpg";
import img2 from "../../../public/images/car-2.jpg";
const page = () => {
return (
<div className="h-full flex items-center justify-center w-[45%] mx-auto">
<Swiper
className="justify-center border border-black-100 items-center "
slidesPerView={2}
spaceBetween={25}
>
<SwiperSlide>
<Card img={img} />
</SwiperSlide>
<SwiperSlide>
<Card img={img2} />
</SwiperSlide>
<SwiperSlide>
<Card img={img} />
</SwiperSlide>
<SwiperSlide>
<Card img={img2} />
</SwiperSlide>
<SwiperSlide>
<Card img={img2} />
</SwiperSlide>
</Swiper>
</div>
);
};
export default page;
src/app/globals.css
@import "tailwindcss";
@import "swiper/css";
@import "swiper/css/navigation";
@import "swiper/css/pagination";
:root {
--background: #ffffff;
--foreground: #171717;
}
html {
height: 100%;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
body {
background: var(--background);
color: var(--foreground);
height: 100%;
}
@media (prefers-color-scheme: dark) {
......@@ -19,8 +24,15 @@
}
}
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
.swiper-button-prev,
.swiper-button-next {
@apply bg-black text-red-500 p-3 rounded-full z-10;
}
.group:hover .hover-gradient {
background: linear-gradient(
to bottom,
rgba(0, 176, 155, 0.3),
rgba(150, 201, 61, 0.6)
);
}
src/app/layout.tsx
......@@ -24,11 +24,7 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
<body className="h-[100%]">{children}</body>
</html>
);
}
src/app/markdown/page.tsx 0 → 100644
import MarkDown from "@/components/MarkDownRenderer/MarkDown";
const page = () => {
const markdown = `
# Curabitur a viverra risus. Proin posuere luctus convallis. Nunc ex lorem, posuere nec faucibus et, vehicula eu lorem. Sed venenatis mattis lectus, ut luctus risus finibus quis.Curabitur a viverra risus. Proin posuere luctus convallis. Nunc ex lorem, posuere nec faucibus et, vehicula eu lorem. Sed venenatis mattis lectus, ut luctus risus finibus quis.Curabitur a viverra risus. Proin posuere luctus convallis. Nunc ex lorem, posuere nec faucibus et, vehicula eu lorem. Sed venenatis mattis lectus, ut luctus risus finibus quis.Curabitur a viverra risus. Proin posuere luctus convallis. Nunc ex lorem, posuere nec faucibus et, vehicula eu lorem. Sed venenatis mattis lectus, ut luctus risus finibus quis.
Here is an image:
![Car](https://picsum.photos/200/200)
Curabitur a viverra risus. Proin posuere luctus convallis. Nunc ex lorem, posuere nec faucibus et, vehicula eu lorem. Sed venenatis mattis lectus, ut luctus risus finibus quis..Integer hendrerit ex at lorem scelerisque molestie. Fusce fringilla, felis in mattis porttitor, nulla orci pretium leo, eget faucibus justo nunc vitae nunc. Maecenas porta sem at laoreet efficitur. Sed porta augue ac hendrerit convallis. Cras vel dolor a leo commodo pretium id non sem. Nulla sed maximus ex. Nullam luctus malesuada enim eget congue. Aenean mollis, velit accumsan faucibus sollicitudin, velit ligula commodo neque, sit amet tincidunt dolor turpis at ante.Integer hendrerit ex at lorem scelerisque molestie. Fusce fringilla, felis in mattis porttitor, nulla orci pretium leo, eget faucibus justo nunc vitae nunc. Maecenas porta sem at laoreet efficitur. Sed porta augue ac hendrerit convallis. Cras vel dolor a leo commodo pretium id non sem. Nulla sed maximus ex. Nullam luctus malesuada enim eget congue. Aenean mollis, velit accumsan faucibus sollicitudin, velit ligula commodo neque, sit amet tincidunt dolor turpis at ante.
`;
return (
<div>
<MarkDown markdown={markdown} />
</div>
);
};
export default page;
src/app/page.tsx
import Image from "next/image";
"use client";
import { useRouter } from "next/navigation";
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">
src/app/page.tsx
</code>
.
</li>
<li className="tracking-[-.01em]">
Save and see your changes instantly.
</li>
</ol>
const router = useRouter();
<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>
const handleNavigation = (route: string) => {
router.push(route);
};
return (
<div className="h-full flex w-[90%] m-auto gap-10 items-center justify-center cursor-pointer">
<div
className="border border-yellow-500 rounded-md p-4"
onClick={() => handleNavigation("carousel")}
>
<h1>Swiper JS</h1>
</div>
<div
className="border border-yellow-500 rounded-md p-4"
onClick={() => handleNavigation("markdown")}
>
<h1>Markdown</h1>
</div>
<div className="border border-yellow-500 rounded-md p-4">
<h1>Dummy</h1>
</div>
</div>
);
}
src/components/Card/Card.tsx 0 → 100644
const Card = ({ img }: any) => {
return (
<div className="relative w-full h-full cursor-pointer overflow-hidden group">
<img src={img.src} alt="car" className="w-full h-full object-fill z-0" />
<div
className={`
absolute bottom-0 left-0 w-full
h-0 group-hover:h-full
z-10 transition-all duration-500 ease-in-out
hover-gradient
`}
>
<div
className={`
p-4 text-white opacity-0
group-hover:opacity-100
transition-opacity duration-300
`}
>
<h3 className="text-lg font-semibold">Car Title</h3>
<p className="text-sm">Some description about the car.</p>
</div>
</div>
</div>
);
};
export default Card;
src/components/MarkDownRenderer/MarkDown.tsx 0 → 100644
import ReactMarkdown from "react-markdown";
const MarkDown = ({ markdown }: any) => {
return (
<div className="m-10">
<ReactMarkdown
children={markdown}
components={{
img: ({ node, ...props }) => (
<img
{...props}
loading="lazy"
className="w-100 max-w-md mx-auto my-4 rounded-lg "
alt={props.alt || ""}
/>
),
}}
/>
</div>
);
};
export default MarkDown;
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