Skip to content

Commit

Permalink
ui: migrated to dark theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@BRAVO68WEB
BRAVO68WEB committed Sep 18, 2024
1 parent d548bb7 commit 2cbe0a9
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 42 deletions.
10 changes: 5 additions & 5 deletions apps/web/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
@tailwind utilities;

:root {
--color-text: rgb(3, 3, 18);
--color-background: rgb(237, 237, 252);
--color-primary: rgb(221, 44, 44);
--color-secondary: rgb(255, 255, 255);
--color-accent: rgb(17, 218, 232);
--color-text: rgb(255, 255, 255);
--color-background: rgb(3, 3, 18);
--color-primary: rgb(17, 135, 232);
--color-secondary: rgb(221, 44, 44);
--color-accent: rgb(219, 208, 208);
}

* {
Expand Down
2 changes: 1 addition & 1 deletion apps/web/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ interface RootLayoutProps {
children: React.ReactNode;
}

export default function RootLayout({ children }: RootLayoutProps) {
export default function RootLayout({ children }: Readonly<RootLayoutProps>) {
return (
<html lang="en">
<body className={`${roboto.className} bg-background text-text`}>{children}</body>
Expand Down
39 changes: 20 additions & 19 deletions apps/web/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,14 @@ export default function Home() {
const res = await axios.get("https://registry.npmjs.com/-/v1/search", {
params: {
text: input,
size: 50,
from: 0,
quality: 0.65,
popularity: 0.98,
},
});
const data = res.data as ISearchResults;

if (!data) return setResults(undefined);
setResults(data);
setSearched(input);
Expand All @@ -62,23 +67,19 @@ export default function Home() {
});

const addDependency = (dependency: string) => {
return () => {
if (devDependencies.includes(dependency)) {
setDevDependencies(old => old.filter(dep => dep !== dependency));
}
if (devDependencies.includes(dependency)) {
setDevDependencies(old => old.filter(dep => dep !== dependency));
}

setDependencies(old => [...old, dependency]);
};
setDependencies(old => [...old, dependency]);
};

const addDevDependency = (dependency: string) => {
return () => {
if (dependencies.includes(dependency)) {
setDependencies(old => old.filter(dep => dep !== dependency));
}
if (dependencies.includes(dependency)) {
setDependencies(old => old.filter(dep => dep !== dependency));
}

setDevDependencies(old => [...old, dependency]);
};
setDevDependencies(old => [...old, dependency]);
};

const selectPackageManager = (e: React.ChangeEvent<HTMLSelectElement>) => {
Expand Down Expand Up @@ -153,7 +154,7 @@ export default function Home() {
<div className="flex h-full w-full flex-col items-center justify-center">
<img
src="/noresult.jpg"
alt="no result image"
alt="no result"
className="h-30 w-60 rounded-2xl object-contain"
/>
<p className="mt-4 text-xl text-gray-500">Noting to show</p>
Expand All @@ -165,16 +166,15 @@ export default function Home() {
Search results: {searched}
</h2>
<Results
addDependency={addDependency}
addDevDependency={addDevDependency}
addDependency={(dep) => () => addDependency(dep)}
addDevDependency={(dep) => () => addDevDependency(dep)}
dependencies={dependencies}
devDependencies={devDependencies}
results={results}
/>
</>
)}
</div>

<div className="flex w-1/2 flex-col px-4 py-12">
{dependencies.length === 0 && devDependencies.length === 0 && (
<>
Expand Down Expand Up @@ -219,18 +219,19 @@ export default function Home() {
id="location"
name="location"
className="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-primary sm:text-sm sm:leading-6"
defaultValue="yarn"
defaultValue="pnpm"
onChange={selectPackageManager}
>
<option value={"yarn add"}>Yarn</option>
<option value={"npm install"}>Npm</option>
<option value={"pnpm add"}>Pnpm</option>
<option value={"bun add"}>Bun</option>
</select>
</div>
<div className="command">
<p className="mb-3 font-medium">Dependencies</p>
<div className="flex w-full items-center overflow-hidden rounded-lg border border-primary shadow">
<code className="h-full w-full overflow-x-auto bg-gray-50 px-4 py-2">
<code className="h-full w-full overflow-x-auto bg-gray-50 px-4 py-2 text-black">
<p className="w-max pr-4">
{dependencies.length > 0
? `${prefPMInstallCmd} ${dependencies.join(" ")}`
Expand All @@ -249,7 +250,7 @@ export default function Home() {
<div className="command">
<p className="mb-3 font-medium">Dev Dependencies</p>
<div className="flex w-full items-center overflow-hidden rounded-lg border border-primary shadow">
<code className="h-full w-full overflow-x-auto bg-gray-50 px-4 py-2">
<code className="h-full w-full overflow-x-auto bg-gray-50 px-4 py-2 text-black">
<p className="w-max pr-4">
{devDependencies.length > 0
? `${prefPMInstallCmd} -D ${devDependencies.join(" ")}`
Expand Down
2 changes: 1 addition & 1 deletion apps/web/components/DependenciesList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ interface DependenciesList {
onRemove: (t: string) => () => void;
}

function DependenciesList({ dependencies, name, onRemove }: DependenciesList) {
function DependenciesList({ dependencies, name, onRemove }: Readonly<DependenciesList>) {
return (
<>
<p className="mb-2 text-lg font-semibold">{name}: </p>
Expand Down
53 changes: 37 additions & 16 deletions apps/web/components/Results.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ function Results({
devDependencies,
addDependency,
addDevDependency,
}: ResultsInterface) {
}: Readonly<ResultsInterface>) {
return (
<div className="results h-full w-full overflow-y-auto">
{results?.objects.map(result => {
Expand All @@ -61,17 +61,27 @@ function Results({
</a>
</h2>
{result?.package?.publisher?.username && (
<a
href={"https://npmjs.com/~" + result?.package?.publisher?.username}
className="text-red-500"
target="_blank"
referrerPolicy="no-referrer"
rel="noreferrer"
>
by @{result?.package?.publisher?.username}
</a>
<div className="publisher flex items-center gap-2">
<p className="text-sm">Published by</p>
<a
href={"https://npmjs.com/~" + result?.package?.publisher?.username}
className="text-red-500"
target="_blank"
referrerPolicy="no-referrer"
rel="noreferrer"
>
@{result?.package?.publisher?.username}
</a>
<p className="text-sm">•</p>
<p className="text-sm">
<img
src={`https://img.shields.io/npm/dw/${result.package.name}?style=for-the-badge&logo=npm&logoColor=red`}
alt="npm downloads"
/>
</p>
</div>
)}
<p className="pt-2 text-sm text-gray-800">
<p className="pt-2 text-sm color-accent">
{result.package.description
? result.package.description
: "No description available"}
Expand All @@ -81,18 +91,29 @@ function Results({
return (
<div
key={keyword}
className="tag rounded-lg bg-gray-300/70 p-2 text-sm"
className="tag rounded-lg p-2 text-sm bg-gray-800 text-white"
>
{keyword}
</div>
);
})}
</div>
<div className="info flex items-center gap-2 text-xs text-gray-500">
<p className="version">{result.package.version}</p> {"•"}
<div className="info flex items-center gap-2 text-xs text-gray-300">
<p className="version">
<img
src={`https://img.shields.io/badge/version-${result.package.version}-white?style=for-the-badge&logo=npm&logoColor=red`}
alt="npm version"
/>
</p>
{"•"}
<p className="date">
Last Updated :-{" "}
{handleLastUpdated(new Date(result.package.date), results.time)}
{}
<img
src={`https://img.shields.io/badge/last_updated-${
handleLastUpdated(new Date(result.package.date), results.time)
}-white?style=for-the-badge&logo=npm&logoColor=red`}
alt="npm version"
/>
</p>
</div>
<div className="buttons mt-4 flex gap-3">
Expand Down

0 comments on commit 2cbe0a9

Please sign in to comment.