Skip to content

Commit efcfd9b

Browse files
AdnanarodiyaAdnanarodiya
committed
Refactor search form and repository components for improved UI; enhance button styles, update input field behavior, and adjust layout for better user experience. Implement conditional rendering for reset button and refine pagination and sorting components with new hover effects and styles.
1 parent b761b2e commit efcfd9b

File tree

7 files changed

+78
-60
lines changed

7 files changed

+78
-60
lines changed

‎src/app/(public)/_components/search-form.tsx

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,14 @@ export function SearchForm() {
1313
const pathname = usePathname();
1414
const searchParams = useSearchParams();
1515

16-
const { register, handleSubmit, reset } = useForm<FormValues>({
16+
const { register, handleSubmit, reset, watch } = useForm<FormValues>({
1717
defaultValues: {
1818
searchQuery: searchParams.get('q') as string
1919
}
2020
});
2121

22+
const searchQuery = watch('searchQuery');
23+
2224
if (!pathname.startsWith('/repos')) {
2325
return null;
2426
}
@@ -41,17 +43,19 @@ export function SearchForm() {
4143
<div className="relative">
4244
<input
4345
placeholder="Search"
44-
className="w-full pr-16 bg-transparent text-hacktoberfest-light input input-bordered border-hacktoberfest-light focus:outline-hacktoberfest-light-pink placeholder:text-hacktoberfest-light-green"
46+
className="w-full pr-16 bg-transparent text-hacktoberfest-light input input-bordered border-hacktoberfest-light focus:border-hacktoberfest-light-blue focus:outline-none placeholder:text-hacktoberfest-beige transition-colors duration-200"
4547
type="text"
4648
{...register('searchQuery', { required: true })}
4749
/>
48-
<button
49-
className="absolute top-0 right-0 rounded-l-none btn btn-ghost"
50-
type="button"
51-
onClick={() => reset()}
52-
>
53-
<GoX color="white" />
54-
</button>
50+
{searchQuery && searchQuery.trim() !== '' && (
51+
<button
52+
className="absolute top-0 right-0 rounded-l-none btn btn-ghost"
53+
type="button"
54+
onClick={() => reset()}
55+
>
56+
<GoX color="white" />
57+
</button>
58+
)}
5559
</div>
5660
</form>
5761
</div>

‎src/app/(public)/repos/[language]/_components/pagination.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export function Pagination({
1818
<div className="flex flex-col items-center gap-4 my-6 justify-evenly sm:gap-0 sm:flex-row">
1919
{page > 1 && (
2020
<Link href={{ query: { ...searchParams, p: page - 1 } }}>
21-
<Button className="btn-wide hover:bg-hacktoberfest-green hover:text-hacktoberfest-dark-green">
21+
<Button className="btn-wide hover:bg-primary-btn-hover-gradient hover:text-hacktoberfest-dark-green">
2222
<ArrowLeft />
2323
<span className="ml-2">Previous Page</span>
2424
</Button>
@@ -27,7 +27,7 @@ export function Pagination({
2727
{totalCount >= MAX_PER_PAGE &&
2828
page < Math.ceil(totalCount / MAX_PER_PAGE) && (
2929
<Link href={{ query: { ...searchParams, p: page + 1 } }}>
30-
<Button className="btn-wide hover:bg-hacktoberfest-green hover:text-hacktoberfest-dark-green">
30+
<Button className="btn-wide hover:bg-primary-btn-hover-gradient hover:text-hacktoberfest-dark-green">
3131
<span className="mr-2">Next Page</span>
3232
<ArrowRight />
3333
</Button>

‎src/app/(public)/repos/[language]/_components/repo-card.tsx

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export function RepoCard({ repo }: RepoCardProps) {
3232
const hasMoreTopics = sortedTopics?.length > MAX_TOPICS_DISPLAY;
3333

3434
return (
35-
<section className="transition duration-300 shadow-sm card bg-hacktoberfest-black ring-1 ring-hacktoberfest-light-pink hover:scale-105 hover:shadow-2xl hover:shadow-hacktoberfest-deep-pink h-125">
35+
<section className="transition duration-300 shadow-sm card bg-hacktoberfest-blue ring-1 ring-hacktoberfest-light hover:scale-105 hover:shadow-2xl hover:shadow-hacktoberfest-light-blue h-125">
3636
<div className="relative p-6 card-body">
3737
<div className="flex-1">
3838
<div className="flex items-center gap-2">
@@ -49,7 +49,7 @@ export function RepoCard({ repo }: RepoCardProps) {
4949
className="rounded-full"
5050
/>
5151
</a>
52-
<h2 className="overflow-hidden text-3xl cursor-pointer text-hacktoberfest-pink whitespace-nowrap text-ellipsis underline-expand">
52+
<h2 className="overflow-hidden text-3xl cursor-pointer text-hacktoberfest-light whitespace-nowrap text-ellipsis underline-expand">
5353
<a
5454
href={repo.html_url + '?ref=finder.usmans.me'}
5555
title={repo.name}
@@ -69,7 +69,7 @@ export function RepoCard({ repo }: RepoCardProps) {
6969
href={repo.html_url + '?ref=finder.usmans.me'}
7070
target="_blank"
7171
rel="noreferrer"
72-
className="text-hacktoberfest-pink ml-2 underline-expand"
72+
className="text-hacktoberfest-light ml-2 underline-expand"
7373
>
7474
Read more
7575
</a>
@@ -86,15 +86,15 @@ export function RepoCard({ repo }: RepoCardProps) {
8686
className={cn(
8787
'badge inline px-3 py-0.5 h-auto',
8888
topic === 'hacktoberfest'
89-
? 'bg-hacktoberfest-light-green text-hacktoberfest-dark-green'
90-
: 'bg-hacktoberfest-deep-pink text-hacktoberfest-light-pink'
89+
? 'bg-hacktoberfest-beige text-hacktoberfest-blue'
90+
: 'bg-hacktoberfest-light-blue text-hacktoberfest-light'
9191
)}
9292
>
9393
{topic}
9494
</a>
9595
))}
9696
{hasMoreTopics && (
97-
<span className="text-hacktoberfest-pink ml-2">...</span>
97+
<span className="text-hacktoberfest-light ml-2">...</span>
9898
)}
9999
</div>
100100
</div>
@@ -104,43 +104,49 @@ export function RepoCard({ repo }: RepoCardProps) {
104104
<a
105105
href={`${repo.html_url}/stargazers?ref=finder.usmans.me`}
106106
target="_blank"
107-
className="w-full flex-shrink-0 flex-grow basis-[120px] border rounded-xl flex items-center justify-center py-4 gap-3 relative border-hacktoberfest-pink tooltip tooltip-bottom"
107+
className="w-full flex-shrink-0 flex-grow basis-[120px] border rounded-xl flex items-center justify-center py-4 gap-3 relative border-hacktoberfest-light tooltip tooltip-bottom"
108108
data-tip="Click to see stargazers"
109109
>
110-
<GoStar className="text-2xl text-hacktoberfest-pink" />
110+
<GoStar className="text-2xl text-hacktoberfest-light" />
111111
<div className="flex flex-col">
112-
<div className="text-lg xl:text-2xl font-medium mb-0.5 text-hacktoberfest-light">
112+
<div className="text-lg xl:text-2xl font-medium mb-0.5 text-hacktoberfest-beige">
113113
{numberFormatter.format(repo.stargazers_count)}
114114
</div>
115-
<div className="text-xs text-neutral-300 lg:text-sm">Stars</div>
115+
<div className="text-xs text-hacktoberfest-light lg:text-sm">
116+
Stars
117+
</div>
116118
</div>
117119
</a>
118120
<a
119121
href={`${repo.html_url}/forks?ref=finder.usmans.me`}
120122
target="_blank"
121-
className="flex-shrink-0 flex-grow basis-[120px] border rounded-xl p-4 flex items-center justify-center gap-3 relative border-hacktoberfest-pink tooltip tooltip-bottom"
123+
className="flex-shrink-0 flex-grow basis-[120px] border rounded-xl p-4 flex items-center justify-center gap-3 relative border-hacktoberfest-light tooltip tooltip-bottom"
122124
data-tip="Click to see forks"
123125
>
124-
<GoRepoForked className="text-2xl text-hacktoberfest-pink" />
126+
<GoRepoForked className="text-2xl text-hacktoberfest-light" />
125127
<div className="flex flex-col">
126-
<div className="text-lg xl:text-2xl font-medium mb-0.5 text-hacktoberfest-light">
128+
<div className="text-lg xl:text-2xl font-medium mb-0.5 text-hacktoberfest-beige">
127129
{numberFormatter.format(repo.forks)}
128130
</div>
129-
<div className="text-xs text-neutral-300 lg:text-sm">Forks</div>
131+
<div className="text-xs text-hacktoberfest-light lg:text-sm">
132+
Forks
133+
</div>
130134
</div>
131135
</a>
132136
<a
133137
href={`${repo.html_url}/issues?ref=finder.usmans.me`}
134138
target="_blank"
135-
className="flex-shrink-0 flex-grow basis-[120px] border rounded-xl p-4 flex items-center justify-center gap-3 relative border-hacktoberfest-pink tooltip tooltip-bottom"
139+
className="flex-shrink-0 flex-grow basis-[120px] border rounded-xl p-4 flex items-center justify-center gap-3 relative border-hacktoberfest-light tooltip tooltip-bottom"
136140
data-tip="Click to see issues"
137141
>
138-
<GoIssueOpened className="text-2xl text-hacktoberfest-pink" />
142+
<GoIssueOpened className="text-2xl text-hacktoberfest-light" />
139143
<div className="flex flex-col">
140-
<div className="text-lg xl:text-2xl font-medium mb-0.5 text-hacktoberfest-light">
144+
<div className="text-lg xl:text-2xl font-medium mb-0.5 text-hacktoberfest-beige">
141145
{numberFormatter.format(repo.open_issues_count)}
142146
</div>
143-
<div className="text-xs text-neutral-300 lg:text-sm">Issues</div>
147+
<div className="text-xs text-hacktoberfest-light lg:text-sm">
148+
Issues
149+
</div>
144150
</div>
145151
</a>
146152
</div>

‎src/app/(public)/repos/[language]/_components/scroll-to-top.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export function ScrollToTop() {
3434
animate={{ opacity: 1 }}
3535
exit={{ opacity: 0 }}
3636
>
37-
<button className="relative flex items-center justify-center w-12 text-2xl transition-transform rounded-full aspect-square bg-hacktoberfest-green text-hacktoberfest-dark-green hover:scale-95 ">
37+
<button className="relative flex items-center justify-center w-12 text-2xl transition-transform rounded-full aspect-square bg-hacktoberfest-light-blue text-hacktoberfest-blue hover:scale-95 ">
3838
<ChevronUp className="text-slate-100" />
3939
</button>
4040
</motion.div>

‎src/app/(public)/repos/[language]/_components/sorter.tsx

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -116,40 +116,43 @@ export function Sorter() {
116116
}
117117

118118
return (
119-
<div className="flex items-center justify-center gap-2 mb-8">
119+
<div className="flex items-center justify-center gap-4 mb-8">
120120
<div className="dropdown group dropdown-hover">
121121
<Button
122122
tabIndex={0}
123-
className="hover:bg-hacktoberfest-green hover:text-hacktoberfest-dark-green"
123+
className="bg-hacktoberfest-blue border-hacktoberfest-light text-hacktoberfest-light hover:bg-primary-btn-hover-gradient transition-colors duration-200"
124124
>
125125
<Code className="w-6 h-6 mr-2" />
126126
Language
127127
</Button>
128-
<div className="z-50 h-64 p-2 overflow-y-scroll shadow dropdown-content hidden group-hover:block bg-base-100 rounded-box w-60">
128+
<div className="z-[9999] h-64 p-2 overflow-y-auto shadow-lg dropdown-content hidden group-hover:block bg-white/95 backdrop-blur-sm rounded-xl w-60 border border-gray-200/50">
129129
<ul tabIndex={0} className="menu menu-vertical">
130130
{mainLanguages.sort(sortByName).map(language => {
131131
const sp = new URLSearchParams(searchParams);
132132
sp.delete('p');
133133
return (
134-
<li key={language} onClick={handleClick}>
135-
<Link href={`/repos/${language.toLowerCase()}?${sp.toString()}`}>
136-
{language}
137-
</Link>
138-
</li>
134+
<li key={language} onClick={handleClick}>
135+
<Link
136+
href={`/repos/${language.toLowerCase()}?${sp.toString()}`}
137+
className="text-gray-700 hover:text-white hover:bg-hacktoberfest-light-blue rounded-lg transition-colors duration-200 px-3 py-2"
138+
>
139+
{language}
140+
</Link>
141+
</li>
139142
);
140-
})}
143+
})}
141144
</ul>
142145
</div>
143146
</div>
144147
<div className="dropdown dropdown-hover group">
145148
<Button
146149
tabIndex={0}
147-
className="hover:bg-hacktoberfest-green hover:text-hacktoberfest-dark-green"
150+
className="bg-hacktoberfest-blue border-hacktoberfest-light text-hacktoberfest-light hover:bg-primary-btn-hover-gradient transition-colors duration-200"
148151
>
149152
<ArrowUpAZ className="w-6 h-6 mr-2" />
150153
{selectedSort()}
151154
</Button>
152-
<div className="z-50 h-64 p-2 overflow-y-scroll shadow dropdown-content hidden group-hover:block -ml-16 bg-base-100 rounded-box w-60">
155+
<div className="z-[9999] h-64 p-2 overflow-y-auto shadow-lg dropdown-content hidden group-hover:block -ml-16 bg-white/95 backdrop-blur-sm rounded-xl w-60 border border-gray-200/50">
153156
<ul tabIndex={0} className="menu menu-vertical">
154157
{navigationItems.map((item, index) => {
155158
const sp = item.onSelect(new URLSearchParams(searchParams));
@@ -160,7 +163,12 @@ export function Sorter() {
160163
}
161164
return (
162165
<li key={index} onClick={handleClick}>
163-
<Link href={`${pathname}?${sp.toString()}`}>{item.name}</Link>
166+
<Link
167+
href={`${pathname}?${sp.toString()}`}
168+
className="text-gray-700 hover:text-white hover:bg-hacktoberfest-light-blue rounded-lg transition-colors duration-200 px-3 py-2"
169+
>
170+
{item.name}
171+
</Link>
164172
</li>
165173
);
166174
})}

‎src/app/(public)/repos/[language]/_components/stars-filter.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export function StarsFilter() {
6262
render={({ field }) => (
6363
<input
6464
type="number"
65-
className="w-3/5 pr-4 m-auto text-center bg-transparent sm:w-full input input-bordered md:text-left text-hacktoberfest-light placeholder:text-hacktoberfest-light-green border-hacktoberfest-light focus:outline-hacktoberfest-light-pink"
65+
className="w-3/5 pr-4 m-auto text-center bg-transparent sm:w-full input input-bordered md:text-left text-hacktoberfest-light placeholder:text-hacktoberfest-beige border-hacktoberfest-light focus:border-hacktoberfest-light-blue focus:outline-none transition-colors duration-200"
6666
{...field}
6767
onChange={e => field.onChange(e.target.valueAsNumber)}
6868
placeholder="Star's Starting Range"
@@ -76,7 +76,7 @@ export function StarsFilter() {
7676
render={({ field }) => (
7777
<input
7878
type="number"
79-
className="w-3/5 pr-4 m-auto text-center bg-transparent sm:w-full input input-bordered md:text-left text-hacktoberfest-light placeholder:text-hacktoberfest-light-green border-hacktoberfest-light focus:outline-hacktoberfest-light-pink"
79+
className="w-3/5 pr-4 m-auto text-center bg-transparent sm:w-full input input-bordered md:text-left text-hacktoberfest-light placeholder:text-hacktoberfest-beige border-hacktoberfest-light focus:border-hacktoberfest-light-blue focus:outline-none transition-colors duration-200"
8080
{...field}
8181
onChange={e => field.onChange(e.target.valueAsNumber)}
8282
placeholder="Star's Finish Range"
@@ -89,7 +89,7 @@ export function StarsFilter() {
8989
{/* Flex container to center the button */}
9090
<div className="flex items-center justify-center">
9191
<button
92-
className="w-3/5 mx-auto btn btn-ghost text-hacktoberfest-light ring-1 ring-hacktoberfest-light md:w-full"
92+
className="w-3/5 mx-auto btn bg-hacktoberfest-blue border-hacktoberfest-light text-hacktoberfest-light hover:bg-hacktoberfest-light-blue hover:text-hacktoberfest-blue transition-colors duration-200 md:w-full"
9393
type="submit"
9494
>
9595
Search

‎src/app/(public)/repos/[language]/page.tsx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,13 @@ export default async function ReposPage({
2929
<Suspense fallback={<p>Loading...</p>} key={key}>
3030
<Header />
3131
<ScrollToTop />
32-
<div className="container mx-auto">
32+
<div className="container mx-auto mt-32">
3333
<div className="min-h-screen pt-5">
3434
<div className="text-center">
3535
<div className="w-5/6 max-w-md mx-auto">
36-
<h1 className="mb-5 text-5xl font-medium uppercase text-hacktoberfest-light-green">
36+
<h1 className="mb-5 text-5xl font-medium uppercase text-hacktoberfest-light-blue">
3737
{repos.total_count} repositories for{' '}
38-
<span className="font-mono font-bold text-hacktoberfest-pink">
38+
<span className="font-mono font-bold text-hacktoberfest-light">
3939
{searchParams.q
4040
? searchParams.q +
4141
' in ' +
@@ -127,11 +127,11 @@ async function getRepos(
127127
if (!res.ok) notFound();
128128

129129
const repos = (await res.json()) as RepoData;
130-
const reports = await getReportedRepos();
130+
// const reports = await getReportedRepos();
131131

132-
repos.items = repos.items.filter((repo: RepoItem) => {
133-
return !repo.archived && !reports.find(report => report.repoId === repo.id);
134-
});
132+
// repos.items = repos.items.filter((repo: RepoItem) => {
133+
// return !repo.archived && !reports.find(report => report.repoId === repo.id);
134+
// });
135135

136136
if (!Array.isArray(repos.items) || repos.items?.length < 1) notFound();
137137

@@ -142,12 +142,12 @@ async function getRepos(
142142
};
143143
}
144144

145-
async function getReportedRepos() {
146-
const client = getXataClient();
147-
const reports = await client.db.reports
148-
.select(['repoId'])
149-
.filter({ valid: false })
150-
.getMany();
145+
// async function getReportedRepos() {
146+
// const client = getXataClient();
147+
// const reports = await client.db.reports
148+
// .select(['repoId'])
149+
// .filter({ valid: false })
150+
// .getMany();
151151

152-
return reports;
153-
}
152+
// return reports;
153+
// }

0 commit comments

Comments
 (0)