Skip to content

imporve mobile nav style #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
atinafabebe1 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

imporve mobile nav style #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 46 additions & 46 deletions components/Contributors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
<h1 className="text-3xl font-extrabold text-center my-10">
Our Contributors
</h1>
{/* Contributors section */}
<section className="max-w-2xl flex flex-wrap gap-4 justify-center mx-auto px-10">
{contributors.map((contributor, idx) => {
return (
<Link
href={contributor.html_url}
key={idx}
className="relative rounded-full overflow-hidden h-12 w-12 cursor-pointer"
>
<Image
src={contributor.avatar_url}
alt={contributor.login}
height={50}
width={50}
/>
</Link>
);
})}
</section>
{/* spacing */}
<div className="py-16" />
</>
);
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 (
<>
<h1 className="text-3xl font-extrabold text-center my-10">
Our Contributors
</h1>
{/* Contributors section */}
<section className="max-w-2xl flex flex-wrap gap-4 justify-center mx-auto px-10">
{contributors.map((contributor, idx) => {
return (
<Link
href={contributor.html_url}
key={idx}
className="relative rounded-full overflow-hidden h-12 w-12 cursor-pointer"
>
<Image
src={contributor.avatar_url}
alt={contributor.login}
height={50}
width={50}
/>
</Link>
);
})}
</section>
{/* spacing */}
<div className="py-16" />
</>
);
};

export default Contributors;
46 changes: 25 additions & 21 deletions components/FAQSingleCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div className="border-b border-gray-200 py-5 max-w-3xl flex flex-col w-full gap-2">
<Disclosure>
{({ open }) => (
/* Use the `open` state to conditionally change the direction of an icon. */
<>
<Disclosure.Button className="w-full flex justify-between font-bold tracking-wide text-gray-700">
{title}
<ChevronRightIcon
className={`w-6 h-6 text-gray-500 ${open && "rotate-90 transform"}`}
/>
</Disclosure.Button>
<Disclosure.Panel className="text-gray-600">{desc}</Disclosure.Panel>
</>
)}
</Disclosure>
</div>
);
const FAQSingleCard = ({ title, desc }: FAQSingleCardProps) => {
return (
<div className="border-b border-gray-200 py-5 max-w-3xl flex flex-col w-full gap-2">
<Disclosure>
{({ open }) => (
/* Use the `open` state to conditionally change the direction of an icon. */
<>
<Disclosure.Button className="w-full flex justify-between font-bold tracking-wide text-gray-700">
{title}
<ChevronRightIcon
className={`w-6 h-6 text-gray-500 ${
open && "rotate-90 transform"
}`}
/>
</Disclosure.Button>
<Disclosure.Panel className="text-gray-600">
{desc}
</Disclosure.Panel>
</>
)}
</Disclosure>
</div>
);
};

export default FAQSingleCard;
34 changes: 28 additions & 6 deletions components/Meta/Meta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,21 @@ interface MetaTypes {
edited_date?: string;
}

const Meta: React.FC<MetaTypes> = ({ title, desc, image, robots, url, tags, author, published_date, edited_date, type = "Website", }) => {
const Meta: React.FC<MetaTypes> = ({
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 (
<Head>
Expand All @@ -28,19 +40,29 @@ const Meta: React.FC<MetaTypes> = ({ title, desc, image, robots, url, tags, auth
<meta property="og:description" content={commonDesc} />
<meta property="og:url" content={`${url ?? "https://codenight.et/"}`} />
<meta property="og:site_name" content="CodeNight" />
<meta property="og:image" content={`${image ?? "https://codenight.et/big-banner.png"}`} />
<meta
property="og:image"
content={`${image ?? "https://codenight.et/big-banner.png"}`}
/>
<meta property="og:type" content={type} />

{/* Article tags */}
{published_date ? (<meta property="article:published_time" content={published_date} />) : null}
{edited_date ? (<meta property="article:modified_time" content={edited_date} />) : null}
{published_date ? (
<meta property="article:published_time" content={published_date} />
) : null}
{edited_date ? (
<meta property="article:modified_time" content={edited_date} />
) : null}
{author ? <meta property="article:author" content={author} /> : null}
{tags ? <meta property="article:tag" content={tags} /> : null}

{/* Twitter tags */}
<meta name="twitter:title" content={commonTitle} />
<meta name="twitter:description" content={commonDesc} />
<meta name="twitter:image" content={`${image ?? "https://codenight.et/big-banner.png"}`} />
<meta
name="twitter:image"
content={`${image ?? "https://codenight.et/big-banner.png"}`}
/>
<meta name="twitter:card" content="summary_large_image" />
<link rel="canonical" href={`${url ?? "https://codenight.et"}`} />

Expand Down
20 changes: 10 additions & 10 deletions components/PageHead.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import Head from "next/head";

const PageHead = () => {
return (
<Head>
<title>CodeNight</title>
<meta
name="description"
content="Community of 🇪🇹 developers to showcase their projects"
/>
<link rel="icon" href="/favicon.ico" />
</Head>
);
return (
<Head>
<title>CodeNight</title>
<meta
name="description"
content="Community of 🇪🇹 developers to showcase their projects"
/>
<link rel="icon" href="/favicon.ico" />
</Head>
);
};

export default PageHead;
60 changes: 30 additions & 30 deletions components/StickyBottomBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,39 @@
import Logo from "@/assets/Logo";

const StickyBottomBanner = () => {
return (
<div className="fixed inset-x-0 bottom-0 z-50">
<div className="bg-indigo-600">
<div className="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
<div className="flex items-center justify-between flex-wrap">
<div className="w-0 flex-1 flex items-center">
<span className="flex p-2 rounded-lg bg-indigo-800">
<div
className="h-6 w-6 flex justify-center items-center text-white"
aria-hidden="true"
>
<Logo />
</div>
</span>
<p className="ml-3 font-medium text-white truncate">
<span className="hidden md:inline">
Join the community on telegram
return (
<div className="fixed inset-x-0 bottom-0 z-50">
<div className="bg-indigo-600">
<div className="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
<div className="flex items-center justify-between flex-wrap">
<div className="w-0 flex-1 flex items-center">
<span className="flex p-2 rounded-lg bg-indigo-800">
<div
className="h-6 w-6 flex justify-center items-center text-white"
aria-hidden="true"
>
<Logo />
</div>
</span>
</p>
</div>
<div className="order-3 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
<a
href="https://t.me/codenight"
className="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-indigo-600 bg-white hover:bg-indigo-50"
>
Join Now
</a>
<p className="ml-3 font-medium text-white truncate">
<span className="hidden md:inline">
Join the community on telegram
</span>
</p>
</div>
<div className="order-3 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
<a
href="https://t.me/codenight"
className="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-indigo-600 bg-white hover:bg-indigo-50"
>
Join Now
</a>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
);
};

export default StickyBottomBanner;
export default StickyBottomBanner;
6 changes: 4 additions & 2 deletions components/button/ThemeButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,10 @@ const ThemeButton = () => {
const currentTheme = theme === "system" ? systemTheme : theme;
if (!mounted) return null;

return (
<IconButton onClick={() => setTheme(currentTheme === "dark" ? "light" : "dark")}>
return (
<IconButton
onClick={() => setTheme(currentTheme === "dark" ? "light" : "dark")}
>
{currentTheme === "dark" ? <SunIcon /> : <MoonIcon />}
</IconButton>
);
Expand Down
Loading