diff --git a/components/Contributors.tsx b/components/Contributors.tsx index fe10c35..3ba8804 100644 --- a/components/Contributors.tsx +++ b/components/Contributors.tsx @@ -3,52 +3,52 @@ import Link from "next/link"; import { useEffect, useState } from "react"; const Contributors = () => { - const [contributors, setContributors] = useState([]); - const contributorAPI = - "https://api.github.com/repos/CodeNight-Ethiopia/codenight-frontend/contributors"; - useEffect(() => { - fetch(contributorAPI) - .then((response) => { - if (!response.ok) { - throw new Error(`API error: ${response.status}`); - } - return response.json(); - }) - .then((data) => { - setContributors(data); - }) - .catch((error) => { - console.error(error); - }); - }, []); - return ( - <> -

- Our Contributors -

- {/* Contributors section */} -
- {contributors.map((contributor, idx) => { - return ( - - {contributor.login} - - ); - })} -
- {/* spacing */} -
- - ); + const [contributors, setContributors] = useState([]); + const contributorAPI = + "https://api.github.com/repos/CodeNight-Ethiopia/codenight-frontend/contributors"; + useEffect(() => { + fetch(contributorAPI) + .then((response) => { + if (!response.ok) { + throw new Error(`API error: ${response.status}`); + } + return response.json(); + }) + .then((data) => { + setContributors(data); + }) + .catch((error) => { + console.error(error); + }); + }, []); + return ( + <> +

+ Our Contributors +

+ {/* Contributors section */} +
+ {contributors.map((contributor, idx) => { + return ( + + {contributor.login} + + ); + })} +
+ {/* spacing */} +
+ + ); }; export default Contributors; diff --git a/components/FAQSingleCard.tsx b/components/FAQSingleCard.tsx index 346c0ae..e192b71 100644 --- a/components/FAQSingleCard.tsx +++ b/components/FAQSingleCard.tsx @@ -2,29 +2,33 @@ import { Disclosure } from "@headlessui/react"; import { ChevronRightIcon } from "@heroicons/react/20/solid"; interface FAQSingleCardProps { - title: string; - desc: string; + title: string; + desc: string; } -const FAQSingleCard = ({title, desc}: FAQSingleCardProps) => { - return ( -
- - {({ open }) => ( - /* Use the `open` state to conditionally change the direction of an icon. */ - <> - - {title} - - - {desc} - - )} - -
- ); +const FAQSingleCard = ({ title, desc }: FAQSingleCardProps) => { + return ( +
+ + {({ open }) => ( + /* Use the `open` state to conditionally change the direction of an icon. */ + <> + + {title} + + + + {desc} + + + )} + +
+ ); }; export default FAQSingleCard; diff --git a/components/Meta/Meta.tsx b/components/Meta/Meta.tsx index f8b4c6e..7748b1a 100644 --- a/components/Meta/Meta.tsx +++ b/components/Meta/Meta.tsx @@ -13,9 +13,21 @@ interface MetaTypes { edited_date?: string; } -const Meta: React.FC = ({ title, desc, image, robots, url, tags, author, published_date, edited_date, type = "Website", }) => { +const Meta: React.FC = ({ + title, + desc, + image, + robots, + url, + tags, + author, + published_date, + edited_date, + type = "Website", +}) => { const commonTitle = title ? `${title} || CodeNight` : "CodeNight"; - const commonDesc = desc ?? "Community of 🇪🇹 developers to showcase their projects"; + const commonDesc = + desc ?? "Community of 🇪🇹 developers to showcase their projects"; return ( @@ -28,19 +40,29 @@ const Meta: React.FC = ({ title, desc, image, robots, url, tags, auth - + {/* Article tags */} - {published_date ? () : null} - {edited_date ? () : null} + {published_date ? ( + + ) : null} + {edited_date ? ( + + ) : null} {author ? : null} {tags ? : null} {/* Twitter tags */} - + diff --git a/components/PageHead.tsx b/components/PageHead.tsx index 97006fc..1c63c2f 100644 --- a/components/PageHead.tsx +++ b/components/PageHead.tsx @@ -1,16 +1,16 @@ import Head from "next/head"; const PageHead = () => { - return ( - - CodeNight - - - - ); + return ( + + CodeNight + + + + ); }; export default PageHead; diff --git a/components/StickyBottomBanner.tsx b/components/StickyBottomBanner.tsx index f8f1624..9fa7a57 100644 --- a/components/StickyBottomBanner.tsx +++ b/components/StickyBottomBanner.tsx @@ -1,39 +1,39 @@ import Logo from "@/assets/Logo"; const StickyBottomBanner = () => { - return ( -
-
-
-
-
- - - -

- - Join the community on telegram + return ( +

+
+
+
+
+ + -

-
-
- - Join Now - +

+ + Join the community on telegram + +

+
+
-
- ); -} + ); +}; -export default StickyBottomBanner; \ No newline at end of file +export default StickyBottomBanner; diff --git a/components/button/ThemeButton.tsx b/components/button/ThemeButton.tsx index 96d6d23..2e43388 100644 --- a/components/button/ThemeButton.tsx +++ b/components/button/ThemeButton.tsx @@ -15,8 +15,10 @@ const ThemeButton = () => { const currentTheme = theme === "system" ? systemTheme : theme; if (!mounted) return null; - return ( - setTheme(currentTheme === "dark" ? "light" : "dark")}> + return ( + setTheme(currentTheme === "dark" ? "light" : "dark")} + > {currentTheme === "dark" ? : } ); diff --git a/components/nav/Nav.tsx b/components/nav/Nav.tsx index e1fd689..5afcd32 100644 --- a/components/nav/Nav.tsx +++ b/components/nav/Nav.tsx @@ -2,112 +2,119 @@ import Link from "next/link"; import { useEffect, useState } from "react"; import Logo from "../../assets/Logo"; import { - Bars3Icon as Menu, - XMarkIcon as Close, + Bars3Icon as Menu, + XMarkIcon as Close, } from "@heroicons/react/20/solid"; import NavItem from "./NavItem"; import { NavigationMenuData } from "@/data"; const Nav = () => { - const [toggle, setToggle] = useState(false); - const [fix, setFixed] = useState(false); + const [toggle, setToggle] = useState(false); + const [fix, setFixed] = useState(false); - const setNavFixed = () => { - if (window.scrollY >= 170) { - setFixed(true); - } else { - setFixed(false); - } - }; - useEffect(() => { - window.addEventListener("scroll", setNavFixed); - }, [fix]); + const setNavFixed = () => { + if (window.scrollY >= 170) { + setFixed(true); + } else { + setFixed(false); + } + }; + useEffect(() => { + window.addEventListener("scroll", setNavFixed); + return () => { + window.removeEventListener("scroll", setNavFixed); + }; + }, [fix]); - return ( -
-
-
- -
- -
- -
    - {NavigationMenuData.map((menu, idx) => { - return ( - - {menu.name} - - ); - })} -
  • - - - -
    • -
-
- {!toggle ? ( - setToggle((prev) => !prev)} - /> - ) : ( - setToggle((prev) => !prev)} - /> - )} -
-
    - {NavigationMenuData.map((menu, idx) => { - return ( - - {menu.name} - - ); - })} -
  • - - - -
    • -
-
-
-
-
-
- ); + return ( + + ); }; export default Nav; diff --git a/components/nav/NavItem.tsx b/components/nav/NavItem.tsx index ee81316..e63bf57 100644 --- a/components/nav/NavItem.tsx +++ b/components/nav/NavItem.tsx @@ -2,24 +2,24 @@ import Link from "next/link"; import { ReactNode } from "react"; interface NavItemProps { - children: ReactNode; - primary?: boolean; - link: string; + children: ReactNode; + primary?: boolean; + link: string; } const NavItem = ({ primary, children, link }: NavItemProps) => { - return ( -
  • - - {children} - -
    • - ); + return ( +
  • + + {children} + +
    • + ); }; export default NavItem; diff --git a/data/index.ts b/data/index.ts index 77bc71c..5e2e3ba 100644 --- a/data/index.ts +++ b/data/index.ts @@ -1,46 +1,46 @@ export const NavigationMenuData = [ - { - name: "Home", - link: "/", - }, - { - name: "About Us", - link: "/about-us", - }, - { - name: "Read", - link: "/read", - }, - { - name: "FAQ's", - link: "/faq", - }, - { - name: "Contact Us", - link: "/contact-us", - }, + { + name: "Home", + link: "/", + }, + { + name: "About Us", + link: "/about-us", + }, + { + name: "Read", + link: "/read", + }, + { + name: "FAQ's", + link: "/faq", + }, + { + name: "Contact Us", + link: "/contact-us", + }, ]; export const FAQData = [ - { - title: "What is codenight?", - desc: "Code-night is a developer community based in Ethiopia that aims to connect, support, and empower developers to build innovative solutions and grow their skills.", - }, - { - title: "Who can join Codenight?", - desc: "Anyone who is interested in programming and software development can join Codenight. The community is open to developers of all levels, from beginners to experienced professionals.", - }, - { - title: - "What programming languages and technologies does Codenight focus on", - desc: "Codenight is an inclusive community that welcomes developers of all backgrounds and skill levels. While the community doesn't focus on any particular language or technology, members are encouraged to share their knowledge and expertise with others.", - }, - { - title: "How can I stay up-to-date with Codenight activities", - desc: "To stay up-to-date with Codenight activities, you can follow the community's social media accounts, or check our website for the latest updates. You can also engage with other members of the community to stay informed about upcoming events and opportunities.", - }, - { - title: "How can I suggest ideas for Codenight activities or events?", - desc: "If you have ideas for Codenight activities or events, you can share them with the community through their social media groups or by reaching out to the organizers directly. The community is always open to new ideas and welcomes input from its members.", - }, + { + title: "What is codenight?", + desc: "Code-night is a developer community based in Ethiopia that aims to connect, support, and empower developers to build innovative solutions and grow their skills.", + }, + { + title: "Who can join Codenight?", + desc: "Anyone who is interested in programming and software development can join Codenight. The community is open to developers of all levels, from beginners to experienced professionals.", + }, + { + title: + "What programming languages and technologies does Codenight focus on", + desc: "Codenight is an inclusive community that welcomes developers of all backgrounds and skill levels. While the community doesn't focus on any particular language or technology, members are encouraged to share their knowledge and expertise with others.", + }, + { + title: "How can I stay up-to-date with Codenight activities", + desc: "To stay up-to-date with Codenight activities, you can follow the community's social media accounts, or check our website for the latest updates. You can also engage with other members of the community to stay informed about upcoming events and opportunities.", + }, + { + title: "How can I suggest ideas for Codenight activities or events?", + desc: "If you have ideas for Codenight activities or events, you can share them with the community through their social media groups or by reaching out to the organizers directly. The community is always open to new ideas and welcomes input from its members.", + }, ]; diff --git a/next.config.js b/next.config.js index 2c00212..3766389 100644 --- a/next.config.js +++ b/next.config.js @@ -2,8 +2,8 @@ const nextConfig = { reactStrictMode: true, images: { - domains: ['avatars.githubusercontent.com'] - } + domains: ["avatars.githubusercontent.com"], + }, }; module.exports = nextConfig; diff --git a/pages/404.tsx b/pages/404.tsx index c6ab524..282bf5d 100644 --- a/pages/404.tsx +++ b/pages/404.tsx @@ -6,41 +6,41 @@ import Nav from "@/components/nav/Nav"; import Link from "next/link"; const PageHead = () => ( - - Coming Soon | CodeNight - - - + + Coming Soon | CodeNight + + + ); const HeroSection = () => ( -
    -
    -
    - - - -
    -

    - Coming Soon -

    -

    - Stay tuned for more updates -

    -
    -
    +
    +
    +
    + + + +
    +

    + Coming Soon +

    +

    + Stay tuned for more updates +

    +
    +
    ); export default function ComingSoon() { - return ( - <> - -
    - -
    - - ); + return ( + <> + +
    + +
    + + ); } diff --git a/pages/faq.tsx b/pages/faq.tsx index 12740e5..6e57909 100644 --- a/pages/faq.tsx +++ b/pages/faq.tsx @@ -5,35 +5,35 @@ import Nav from "@/components/nav/Nav"; import { FAQData } from "@/data"; const FAQPage = () => { - return ( - <> - -