generated from nhcarrigan/template
Naomi Carrigan
5bffec2685
### Explanation _No response_ ### Issue _No response_ ### Attestations - [x] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/) - [x] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/). - [x] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/). ### Dependencies - [ ] I have pinned the dependencies to a specific patch version. ### Style - [x] I have run the linter and resolved any errors. - [x] My pull request uses an appropriate title, matching the conventional commit standards. - [x] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request. ### Tests - [x] My contribution adds new code, and I have added tests to cover it. - [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes. - [x] All new and existing tests pass locally with my changes. - [x] Code coverage remains at or above the configured threshold. ### Documentation _No response_ ### Versioning _No response_ Reviewed-on: https://codeberg.org/nhcarrigan/portfolio/pulls/48 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
102 lines
3.0 KiB
TypeScript
102 lines
3.0 KiB
TypeScript
/**
|
|
* @copyright nhcarrigan
|
|
* @license Naomi's Public License
|
|
* @author Naomi Carrigan
|
|
*/
|
|
import type { JSX } from "react";
|
|
|
|
interface ProjectProperties {
|
|
name: string;
|
|
url: string;
|
|
source?: string;
|
|
description: string;
|
|
type: "Website" | "Bot" | "API" | "Game";
|
|
}
|
|
|
|
const Colours: { [key in ProjectProperties["type"]]: string } = {
|
|
API: "bg-sky-100 text-sky-900 dark:bg-sky-900 dark:text-sky-100",
|
|
Bot:
|
|
"bg-purple-100 text-purple-900 dark:bg-purple-900 dark:text-purple-100",
|
|
Game: "bg-green-100 text-green-900 dark:bg-green-900 dark:text-green-100",
|
|
Website: "bg-amber-100 text-amber-900 dark:bg-amber-900 dark:text-amber-100",
|
|
};
|
|
|
|
/**
|
|
* Renders the view for a project.
|
|
* @param properties - The project to render.
|
|
* @returns A JSX element.
|
|
*/
|
|
export const Project = (properties: ProjectProperties): JSX.Element => {
|
|
const { name, url, source, description, type } = properties;
|
|
return (
|
|
<div className="p-6 mb-2 bg-[--foreground] text-[--background]
|
|
border border-gray-200 rounded-lg shadow w-[50%] m-auto">
|
|
<h2 className="mb-2 text-2xl font-bold tracking-tight">{name}</h2>
|
|
<span
|
|
className={`inline-flex items-center text-xsfont-medium px-2.5 py-0.5
|
|
rounded-full ${Colours[type]}`}
|
|
>
|
|
{type}
|
|
</span>
|
|
<p className="mb-3 font-normal">
|
|
{description}
|
|
</p>
|
|
<a
|
|
className="inline-flex items-center px-3 py-2 text-sm
|
|
font-medium text-center text-[--foreground] bg-[--background]
|
|
rounded-lg focus:ring-4 focus:outline-none focus:ring-blue-300
|
|
dark:focus:ring-blue-800"
|
|
href={url}
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
{`See Project`}
|
|
<svg
|
|
aria-hidden="true"
|
|
className="rtl:rotate-180 w-3.5 h-3.5 ms-2"
|
|
fill="none"
|
|
viewBox="0 0 14 10"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M1 5h12m0 0L9 1m4 4L9 9"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
{source === undefined
|
|
? null
|
|
: <a
|
|
className="ml-1 inline-flex items-center px-3 py-2 text-sm
|
|
font-medium text-center text-[--foreground] bg-[--background]
|
|
rounded-lg focus:ring-4 focus:outline-none focus:ring-blue-300
|
|
dark:focus:ring-blue-800"
|
|
href={source}
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
{`View Source`}
|
|
<svg
|
|
aria-hidden="true"
|
|
className="rtl:rotate-180 w-3.5 h-3.5 ms-2"
|
|
fill="none"
|
|
viewBox="0 0 14 10"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M1 5h12m0 0L9 1m4 4L9 9"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
}
|
|
</div>
|
|
);
|
|
};
|