Skip to content

Solved the sorting dropdown problem and the home page background problem #83

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

Merged
merged 3 commits into from
Oct 17, 2022
Merged

Solved the sorting dropdown problem and the home page background problem #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
590661d
solved header problem and sorting dropdown
Tejash429 Oct 15, 2022
bf33f9a
solved the home page background color problem and changed the search …
Tejash429 Oct 15, 2022
35ae24c
Added 404 page and fixed the pagination buttons
Tejash429 Oct 16, 2022
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
2 changes: 1 addition & 1 deletion components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const Header = () => {
const router = useRouter();

return (
<div className="justify-between px-2 mt-2 mb-2 ml-2 mr-2 shadow-lg navbar bg-accent rounded-box">
<div className="justify-between px-2 mt-2 mb-2 ml-1.5 w-[99.2%] shadow-lg navbar bg-accent rounded-box">
<Link href="/">
<a>
<div className="flex-none">
Expand Down
2 changes: 1 addition & 1 deletion components/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const Hero = () => {
backgroundSize: '80%'
}}
>
<div className="hero-overlay bg-opacity-60"></div>
<div className="hero-overlay w-0 bg-opacity-60"></div>
<div className="text-center hero-content">
<div className="max-w-md">
<h1 className="mb-5 text-5xl font-bold">Select your language</h1>
Expand Down
19 changes: 10 additions & 9 deletions components/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const MAX_PER_PAGE = 21;
const Pagination = ({ page, totalCount }: Props) => {
const router = useRouter();
return (
<div className="items-center justify-center my-6 btn-group">
<div className="items-center flex justify-evenly my-6 btn-group">
{page > 1 && (
<Link href={{ query: { ...router.query, p: page - 1 } }}>
<a className="btn btn-outline btn-wide">
Expand All @@ -21,14 +21,15 @@ const Pagination = ({ page, totalCount }: Props) => {
</a>
</Link>
)}
{totalCount >= MAX_PER_PAGE && page < Math.ceil(totalCount / MAX_PER_PAGE) && (
<Link href={{ query: { ...router.query, p: page + 1 } }}>
<a className="btn btn-outline btn-wide">
<span className="mr-2">Next Page</span>
<BsArrowRight />
</a>
</Link>
)}
{totalCount >= MAX_PER_PAGE &&
page < Math.ceil(totalCount / MAX_PER_PAGE) && (
<Link href={{ query: { ...router.query, p: page + 1 } }}>
<a className="btn btn-outline btn-wide">
<span className="mr-2">Next Page</span>
<BsArrowRight />
</a>
</Link>
)}
</div>
);
};
Expand Down
138 changes: 73 additions & 65 deletions components/Sort.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,11 @@ import { useRouter } from 'next/router';
import Link from 'next/link';
import { motion } from 'framer-motion';
import languages from 'assets/languages.json';
import{ FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import{ faCode } from '@fortawesome/free-solid-svg-icons'
import {faArrowUpAZ } from '@fortawesome/free-solid-svg-icons'

const { main1: mainLanguages} = languages;
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCode } from '@fortawesome/free-solid-svg-icons';
import { faArrowUpAZ } from '@fortawesome/free-solid-svg-icons';

const { main1: mainLanguages } = languages;

enum SortTypes {
BestMatch = 'Best match',
Expand All @@ -19,11 +18,10 @@ enum SortTypes {
RecentlyUpdated = 'Recently updated',
LeastRecentlyUpdated = 'Least recently updated'
}
enum sorttype{
enum sorttype {
language = 'language'
}


export default function Sort() {
const router = useRouter();
const selectedSort = (): SortTypes => {
Expand All @@ -43,88 +41,98 @@ export default function Sort() {
return SortTypes.BestMatch;
}
};
const selectsort = (): sorttype =>{
const selectsort = (): sorttype => {
return sorttype.language;
}
};
return (
<div className="flex justify-center items-center mb-2 flex-col gap-2">
<div className="dropdown dropdown-hover ">
<div tabIndex={0} className="m-1 btn w-60">
<FontAwesomeIcon icon={faCode} className=" w-6 h-6 mr-3"></FontAwesomeIcon>
<FontAwesomeIcon
icon={faCode}
className=" w-6 h-6 mr-3"
></FontAwesomeIcon>
{selectsort()}
</div>
<ul
className="h-64 p-2 overflow-y-scroll shadow menu dropdown-content bg-base-100 rounded-box w-60"
>
<ul className="h-64 p-2 overflow-y-scroll shadow menu dropdown-content bg-base-100 rounded-box w-60">
<li>
{mainLanguages.map(language => (
{mainLanguages.map(language => (
<Link key={language} href={`/repos/${language.toLowerCase()}`}>
<a>
<motion.button
animate={{ scale: 1 }}
>
{language}
</motion.button>
</a>
<motion.button animate={{ scale: 1 }}>
{language}
</motion.button>
</a>
</Link>
))}
</li>
</ul>
</div>
<div className="dropdown dropdown-hover">
<div tabIndex={0} className="btn mb-3 w-60">
<FontAwesomeIcon icon={ faArrowUpAZ} className=" w-6 h-6 mr-3"></FontAwesomeIcon>
<FontAwesomeIcon
icon={faArrowUpAZ}
className=" w-6 h-6 mr-3"
></FontAwesomeIcon>
{selectedSort()}
</div>
<ul
tabIndex={0}
className="h-64 p-2 overflow-y-scroll shadow menu dropdown-content bg-base-100 rounded-box w-60"
>
<li>
<Link href={{ query: { ...router.query } }}>
<a>Best match</a>
</Link>
</li>
<li>
<Link href={{ query: { ...router.query, s: 'stars', o: 'desc' } }}>
<a>Most stars</a>
</Link>
</li>
<li>
<Link href={{ query: { ...router.query, s: 'stars', o: 'asc' } }}>
<a>Fewest stars</a>
</Link>
</li>
<li>
<Link href={{ query: { ...router.query, s: 'forks', o: 'desc' } }}>
<a>Most forks</a>
</Link>
</li>
<li>
<Link href={{ query: { ...router.query, s: 'forks', o: 'asc' } }}>
<a>Fewest forks</a>
</Link>
</li>
<li>
<Link
href={{
query: { ...router.query, s: 'help-wanted-issues', o: 'desc' }
}}
>
<a>Most help wanted issues</a>
</Link>
</li>
<li>
<Link
href={{ query: { ...router.query, s: 'updated', o: 'desc' } }}
>
<a>Recently updated</a>
</Link>
</li>
<li>
<Link href={{ query: { ...router.query, s: 'updated', o: 'asc' } }}>
<a>Least recently updated</a>
</Link>
<a>
<Link href={{ query: { ...router.query } }}>
<a>Best match</a>
</Link>
</a>
<a>
<Link
href={{ query: { ...router.query, s: 'stars', o: 'desc' } }}
>
<a>Most stars</a>
</Link>
</a>
<a>
<Link href={{ query: { ...router.query, s: 'stars', o: 'asc' } }}>
<a>Fewest stars</a>
</Link>
</a>
<a>
<Link
href={{ query: { ...router.query, s: 'forks', o: 'desc' } }}
>
<a>Most forks</a>
</Link>
</a>
<a>
<Link href={{ query: { ...router.query, s: 'forks', o: 'asc' } }}>
<a>Fewest forks</a>
</Link>
</a>
<a>
<Link
href={{
query: { ...router.query, s: 'help-wanted-issues', o: 'desc' }
}}
>
<a>Most help wanted issues</a>
</Link>
</a>
<a>
<Link
href={{ query: { ...router.query, s: 'updated', o: 'desc' } }}
>
<a>Recently updated</a>
</Link>
</a>
<a>
<Link
href={{ query: { ...router.query, s: 'updated', o: 'asc' } }}
>
<a>Least recently updated</a>
</Link>
</a>
</li>
</ul>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/StarsFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export default function StarsFilter() {
control={control}
/>

<button className="rounded-l-none btn btn-ghost" type="submit">
<button className="rounded-tr- btn btn-ghost " type="submit">
Search
</button>
</div>
Expand Down
28 changes: 28 additions & 0 deletions pages/404.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import Header from 'components/Header';
import Link from 'next/link';

export default function Custom404() {
return (
<>
<Header />

<div className=" Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif">
<div className=" text-center relative mt-[13rem] hero">
<h1 className="text-[15rem] text-rose-900">404</h1>
<div className="absolute -left-15 -top-19 text-[1.4rem] text-gray-50 mt-[9rem]">
<h2>We are sorry,Page not found!</h2>
<p>
The Page you are looking for might have been removed or it is
Temporarily unavailable
</p>
<Link rel="stylesheet" href="/">
<button className="rounded-none transition delay-150 duration-300 ease-in-out btn shadow-lg button mt-6 mt-[3rem] bg-[#fafafa] text-[#170f1e] ">
Go back Home
</button>
</Link>
</div>
</div>
</div>
</>
);
}
11 changes: 3 additions & 8 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,9 +171,9 @@
dependencies:
"glob" "7.1.7"

"@next/swc-darwin-arm64@12.3.1":
"integrity" "sha512-hT/EBGNcu0ITiuWDYU9ur57Oa4LybD5DOQp4f22T6zLfpoBMfBibPtR8XktXmOyFHrL/6FC2p9ojdLZhWhvBHg=="
"resolved" "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.3.1.tgz"
"@next/swc-win32-x64-msvc@12.3.1":
"integrity" "sha512-W1ijvzzg+kPEX6LAc+50EYYSEo0FVu7dmTE+t+DM4iOLqgGHoW9uYSz9wCVdkXOEEMP9xhXfGpcSxsfDucyPkA=="
"resolved" "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.1.tgz"
"version" "12.3.1"

"@nodelib/fs.scandir@2.1.5":
Expand Down Expand Up @@ -1049,11 +1049,6 @@
"resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
"version" "1.0.0"

"fsevents@~2.3.2":
"integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
"resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
"version" "2.3.2"

"function-bind@^1.1.1":
"integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
"resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
Expand Down