diff --git a/package-lock.json b/package-lock.json index 43b70a3..e88c90b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,8 @@ "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "cmdk": "^1.0.0", + "embla-carousel-autoplay": "^8.0.0", + "embla-carousel-react": "^8.0.0", "localforage": "^1.10.0", "lucide-react": "^0.350.0", "next": "^14.1.3", @@ -4934,6 +4936,39 @@ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.695.tgz", "integrity": "sha512-eMijZmeqPtm774pCZIOrfUHMs/7ls++W1sLhxwqgu8KQ8E2WmMtzwyqOMt0XXUJ3HTIPfuwlfwF+I5cwnfItBA==" }, + "node_modules/embla-carousel": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.0.0.tgz", + "integrity": "sha512-ecixcyqS6oKD2nh5Nj5MObcgoSILWNI/GtBxkidn5ytFaCCmwVHo2SecksaQZHcARMMpIR2dWOlSIdA1LkZFUA==" + }, + "node_modules/embla-carousel-autoplay": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/embla-carousel-autoplay/-/embla-carousel-autoplay-8.0.0.tgz", + "integrity": "sha512-FWHhZULH5+ydg7fiabwQppCDoTMi8pbMC20lmVytoXn7hH2KAhXHc/8yCUb3yToqMduCN6xPKUONtgzBqz3RZg==", + "peerDependencies": { + "embla-carousel": "8.0.0" + } + }, + "node_modules/embla-carousel-react": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.0.0.tgz", + "integrity": "sha512-qT0dii8ZwoCtEIBE6ogjqU2+5IwnGfdt2teKjCzW88JRErflhlCpz8KjWnW8xoRZOP8g0clRtsMEFoAgS/elfA==", + "dependencies": { + "embla-carousel": "8.0.0", + "embla-carousel-reactive-utils": "8.0.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.1 || ^18.0.0" + } + }, + "node_modules/embla-carousel-reactive-utils": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.0.0.tgz", + "integrity": "sha512-JCw0CqCXI7tbHDRogBb9PoeMLyjEC1vpN0lDOzUjmlfVgtfF+ffLaOK8bVtXVUEbNs/3guGe3NSzA5J5aYzLzw==", + "peerDependencies": { + "embla-carousel": "8.0.0" + } + }, "node_modules/emoji-regex": { "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", diff --git a/package.json b/package.json index 296fd03..d53c2ee 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,8 @@ "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "cmdk": "^1.0.0", + "embla-carousel-autoplay": "^8.0.0", + "embla-carousel-react": "^8.0.0", "localforage": "^1.10.0", "lucide-react": "^0.350.0", "next": "^14.1.3", diff --git a/src/app/clubs/Cesa.js b/src/app/clubs/Cesa.js deleted file mode 100644 index bce8ec4..0000000 --- a/src/app/clubs/Cesa.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react' - -const Cesa = () => { - return ( -
- -
- - - - - - - - -
- - - - - - - - -
- ) -} - -export default Cesa; \ No newline at end of file diff --git a/src/app/clubs/page.js b/src/app/clubs/page.js index 7f0a96c..1e006f5 100644 --- a/src/app/clubs/page.js +++ b/src/app/clubs/page.js @@ -1,137 +1,11 @@ -// import { Club } from "lucide-react"; -import React from "react"; -import Cesalogo from "../images/cesalogo.png"; -import iiclogo from "../images/iiclogo.jpeg"; -import { FaInstagram } from "react-icons/fa6"; -import { FaFacebookF } from "react-icons/fa6"; -import { FaXTwitter } from "react-icons/fa6"; +'use client' -const Clubs = () => { - return ( -
-
-

- Student Clubs -

-

- DISCOVER DIFFERENT TEAMS that will infuse vitality into your college - experience -

-
- -
-
- -

- Computer Engineering Student Association (CESA) -

-
- - - - - -
-
- -
- -

- Computer Society of India(CSI) -

-
- - - -
-
- -
- -

- Computer Engineering Student Association (CESA) -

-
- - - -
-
- -
- -

- Computer Engineering Student Association (CESA) -

-
- - - -
-
+import Clubs from "@/modules/clubs"; -
- -

- Computer Engineering Student Association (CESA) -

-
- - - -
-
- -
- -

- Computer Engineering Student Association (CESA) -

-
- - - -
-
- -
- -

- Computer Engineering Student Association (CESA) -

-
- - - -
-
- -
- -

- Computer Engineering Student Association (CESA) -

-
- - - -
-
- -
- -

- Computer Engineering Student Association (CESA)sa -

-
- - - -
-
-
-
+const Page = () => { + return ( + ); }; -export default Clubs; +export default Page; diff --git a/src/app/events/page.js b/src/app/events/page.js index 94b139f..a48b6a5 100644 --- a/src/app/events/page.js +++ b/src/app/events/page.js @@ -1,7 +1,9 @@ +'use client' +import Events from "@/modules/events"; import React from "react"; -const Events = () => { - return
Events
; +const Page = () => { + return ; }; -export default Events; +export default Page; diff --git a/src/app/zephyr/page.js b/src/app/zephyr/page.js index 365cdea..371303f 100644 --- a/src/app/zephyr/page.js +++ b/src/app/zephyr/page.js @@ -1,7 +1,9 @@ +'use client' +import Zephyr from "@/modules/zephyr"; import React from "react"; -const Zephyr = () => { - return
Zephyr
; +const Page = () => { + return ; }; -export default Zephyr; +export default Page; diff --git a/src/assets/1.jpg b/src/assets/1.jpg new file mode 100644 index 0000000..4bf901c Binary files /dev/null and b/src/assets/1.jpg differ diff --git a/src/assets/2.jpg b/src/assets/2.jpg new file mode 100644 index 0000000..eb7b648 Binary files /dev/null and b/src/assets/2.jpg differ diff --git a/src/assets/3.jpg b/src/assets/3.jpg new file mode 100644 index 0000000..3a29623 Binary files /dev/null and b/src/assets/3.jpg differ diff --git a/src/components/carousel.js b/src/components/carousel.js new file mode 100644 index 0000000..561f655 --- /dev/null +++ b/src/components/carousel.js @@ -0,0 +1,32 @@ +import React, { useRef, useState } from "react" + +import { Card, CardContent } from "@/components/ui/card" +import { + Carousel, + CarouselContent, + CarouselItem, +} from "@/components/ui/carousel" +import Autoplay from 'embla-carousel-autoplay'; +import Image from "next/image"; + +export function CarouselDemo({ imgArray }) { + const plugin = useRef(Autoplay({ delay: 2000, stopOnInteraction: true })); + + return ( + + + {Array.from({ length: 3 }).map((_, index) => ( + +
+ + + + + +
+ + ))} + + + ) +} diff --git a/src/components/ui/card.jsx b/src/components/ui/card.jsx new file mode 100644 index 0000000..dd79b51 --- /dev/null +++ b/src/components/ui/card.jsx @@ -0,0 +1,50 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +const Card = React.forwardRef(({ className, ...props }, ref) => ( +
+)) +Card.displayName = "Card" + +const CardHeader = React.forwardRef(({ className, ...props }, ref) => ( +
+)) +CardHeader.displayName = "CardHeader" + +const CardTitle = React.forwardRef(({ className, ...props }, ref) => ( +

+)) +CardTitle.displayName = "CardTitle" + +const CardDescription = React.forwardRef(({ className, ...props }, ref) => ( +

+)) +CardDescription.displayName = "CardDescription" + +const CardContent = React.forwardRef(({ className, ...props }, ref) => ( +

+)) +CardContent.displayName = "CardContent" + +const CardFooter = React.forwardRef(({ className, ...props }, ref) => ( +
+)) +CardFooter.displayName = "CardFooter" + +export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } diff --git a/src/components/ui/carousel.jsx b/src/components/ui/carousel.jsx new file mode 100644 index 0000000..a6bfc71 --- /dev/null +++ b/src/components/ui/carousel.jsx @@ -0,0 +1,194 @@ +"use client"; +import * as React from "react" +import useEmblaCarousel from "embla-carousel-react"; +import { ArrowLeft, ArrowRight } from "lucide-react" + +import { cn } from "@/lib/utils" +import { Button } from "@/components/ui/button" + +const CarouselContext = React.createContext(null) + +function useCarousel() { + const context = React.useContext(CarouselContext) + + if (!context) { + throw new Error("useCarousel must be used within a ") + } + + return context +} + +const Carousel = React.forwardRef(( + { + orientation = "horizontal", + opts, + setApi, + plugins, + className, + children, + ...props + }, + ref +) => { + const [carouselRef, api] = useEmblaCarousel({ + ...opts, + axis: orientation === "horizontal" ? "x" : "y", + }, plugins) + const [canScrollPrev, setCanScrollPrev] = React.useState(false) + const [canScrollNext, setCanScrollNext] = React.useState(false) + + const onSelect = React.useCallback((api) => { + if (!api) { + return + } + + setCanScrollPrev(api.canScrollPrev()) + setCanScrollNext(api.canScrollNext()) + }, []) + + const scrollPrev = React.useCallback(() => { + api?.scrollPrev() + }, [api]) + + const scrollNext = React.useCallback(() => { + api?.scrollNext() + }, [api]) + + const handleKeyDown = React.useCallback((event) => { + if (event.key === "ArrowLeft") { + event.preventDefault() + scrollPrev() + } else if (event.key === "ArrowRight") { + event.preventDefault() + scrollNext() + } + }, [scrollPrev, scrollNext]) + + React.useEffect(() => { + if (!api || !setApi) { + return + } + + setApi(api) + }, [api, setApi]) + + React.useEffect(() => { + if (!api) { + return + } + + onSelect(api) + api.on("reInit", onSelect) + api.on("select", onSelect) + + return () => { + api?.off("select", onSelect) + }; + }, [api, onSelect]) + + return ( + ( +
+ {children} +
+ ) + ); +}) +Carousel.displayName = "Carousel" + +const CarouselContent = React.forwardRef(({ className, ...props }, ref) => { + const { carouselRef, orientation } = useCarousel() + + return ( + (
+
+
) + ); +}) +CarouselContent.displayName = "CarouselContent" + +const CarouselItem = React.forwardRef(({ className, ...props }, ref) => { + const { orientation } = useCarousel() + + return ( + (
) + ); +}) +CarouselItem.displayName = "CarouselItem" + +const CarouselPrevious = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => { + const { orientation, scrollPrev, canScrollPrev } = useCarousel() + + return ( + () + ); +}) +CarouselPrevious.displayName = "CarouselPrevious" + +const CarouselNext = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => { + const { orientation, scrollNext, canScrollNext } = useCarousel() + + return ( + () + ); +}) +CarouselNext.displayName = "CarouselNext" + +export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }; diff --git a/src/modules/clubs/index.js b/src/modules/clubs/index.js new file mode 100644 index 0000000..14b099c --- /dev/null +++ b/src/modules/clubs/index.js @@ -0,0 +1,21 @@ + +import { CarouselDemo } from '@/components/carousel' +import React from 'react' +import img1 from '@/assets/1.jpg' +import img2 from '@/assets/2.jpg' +import img3 from '@/assets/3.jpg' + + + +const Clubs = () => { + const imgArray = [img1, img2, img3] + return ( +
+
+
+ +
+ ) +} + +export default Clubs \ No newline at end of file diff --git a/src/modules/events/index.js b/src/modules/events/index.js new file mode 100644 index 0000000..b309e2b --- /dev/null +++ b/src/modules/events/index.js @@ -0,0 +1,21 @@ + +import { CarouselDemo } from '@/components/carousel' +import React from 'react' +import img1 from '@/assets/1.jpg' +import img2 from '@/assets/2.jpg' +import img3 from '@/assets/3.jpg' + + + +const Events = () => { + const imgArray = [img1, img2, img3] + return ( +
+
+
+ +
+ ) +} + +export default Events \ No newline at end of file diff --git a/src/modules/zephyr/index.js b/src/modules/zephyr/index.js new file mode 100644 index 0000000..f7b6071 --- /dev/null +++ b/src/modules/zephyr/index.js @@ -0,0 +1,21 @@ + +import { CarouselDemo } from '@/components/carousel' +import React from 'react' +import img1 from '@/assets/1.jpg' +import img2 from '@/assets/2.jpg' +import img3 from '@/assets/3.jpg' + + + +const Zephyr = () => { + const imgArray = [img1, img2, img3] + return ( +
+
+
+ +
+ ) +} + +export default Zephyr \ No newline at end of file