generated from nhcarrigan/template
chore: use our configs, update dependencies (#34)
### Explanation This gets us in line with our other project standards, and allows us to start testing! ### Issue Closes #18 ### 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 - [x] 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 - [ ] 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. - [ ] All new and existing tests pass locally with my changes. - [ ] Code coverage remains at or above the configured threshold. ### Documentation _No response_ ### Versioning Major - My pull request introduces a breaking change. Reviewed-on: https://codeberg.org/nhcarrigan/portfolio/pulls/34 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
This commit is contained in:
Naomi the Technomancer
+57
-32
@@ -1,50 +1,75 @@
|
||||
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { Rule } from "./rule";
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
import type { JSX } from "react";
|
||||
|
||||
interface ActivityProps {
|
||||
type: string;
|
||||
date: Date;
|
||||
repo: string;
|
||||
repoName: string;
|
||||
heart: string;
|
||||
interface ActivityProperties {
|
||||
readonly type: string;
|
||||
readonly date: Date;
|
||||
readonly repo: string;
|
||||
readonly repoName: string;
|
||||
readonly heart: string;
|
||||
}
|
||||
|
||||
const TypeToString: Record<string, string> = {
|
||||
commit_repo: "committed to",
|
||||
delete_branch: "deleted a branch on",
|
||||
merge_pull_request: "merged a PR in",
|
||||
create_pull_request: "created a PR in",
|
||||
create_branch: "created a branch in",
|
||||
PushEvent: "committed to",
|
||||
DeleteEvent: "deleted a branch on",
|
||||
PullRequestEvent: "created or merged a PR in",
|
||||
PullRequestReviewEvent: "reviewed a PR in",
|
||||
DeleteEvent: "deleted a branch on",
|
||||
IssueCommentEvent: "commented on",
|
||||
IssuesEvent: "created or updated an issue in",
|
||||
PullRequestEvent: "created or merged a PR in",
|
||||
PullRequestReviewCommentEvent: "commented on a PR in",
|
||||
IssueCommentEvent: "commented on",
|
||||
IssuesEvent: "created or updated an issue in",
|
||||
close_issue: "closed an issue in",
|
||||
create_issue: "created an issue in",
|
||||
PullRequestReviewEvent: "reviewed a PR in",
|
||||
PushEvent: "committed to",
|
||||
close_issue: "closed an issue in",
|
||||
commit_repo: "committed to",
|
||||
create_branch: "created a branch in",
|
||||
create_issue: "created an issue in",
|
||||
create_pull_request: "created a PR in",
|
||||
delete_branch: "deleted a branch on",
|
||||
merge_pull_request: "merged a PR in",
|
||||
};
|
||||
|
||||
export const Activity = (props: ActivityProps): JSX.Element => {
|
||||
const { type, date, repo, repoName, heart } = props;
|
||||
const getType = (type: string): string => {
|
||||
return TypeToString[type] ?? `performed a ${type}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders the view for a Github or Codeberg activity.
|
||||
* @param properties - The activity to render.
|
||||
* @returns A JSX element.
|
||||
*/
|
||||
export const Activity = (properties: ActivityProperties): JSX.Element => {
|
||||
const { type, date, repo, repoName, heart } = properties;
|
||||
return (
|
||||
<li className="ms-6">
|
||||
<span className="absolute flex items-center justify-center w-6 h-6 rounded-full -start-3">
|
||||
<span
|
||||
className="absolute flex items-center
|
||||
justify-center w-6 h-6 rounded-full -start-3"
|
||||
>
|
||||
{heart}
|
||||
</span>
|
||||
<div className="items-center justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:bg-gray-700 dark:border-gray-600">
|
||||
<time className="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">
|
||||
<div
|
||||
className="items-center justify-between
|
||||
p-4 bg-white border border-gray-200 rounded-lg
|
||||
shadow-sm sm:flex dark:bg-gray-700 dark:border-gray-600"
|
||||
>
|
||||
<time
|
||||
className="mb-1 text-xs font-normal
|
||||
text-gray-400 sm:order-last sm:mb-0"
|
||||
>
|
||||
{date.toLocaleString("en-GB")}
|
||||
</time>
|
||||
<div className="text-sm font-normal text-gray-500 lex dark:text-gray-300">
|
||||
Naomi has {TypeToString[type] ?? "performed a " + type}{" "}
|
||||
<div
|
||||
className="text-sm font-normal
|
||||
text-gray-500 lex dark:text-gray-300"
|
||||
>
|
||||
{`Naomi has ${getType(type)} `}
|
||||
<a
|
||||
href={repo}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-semibold text-[#abfcec] hover:underline"
|
||||
href={repo}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
{repoName}
|
||||
</a>{" "}
|
||||
|
||||
+31
-14
@@ -1,30 +1,47 @@
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
import Image from "next/image";
|
||||
import type { JSX } from "react";
|
||||
|
||||
interface ArtProps {
|
||||
name: string;
|
||||
img: string;
|
||||
artist: string;
|
||||
url: string;
|
||||
alt: string;
|
||||
interface ArtProperties {
|
||||
readonly name: string;
|
||||
readonly img: string;
|
||||
readonly artist: string;
|
||||
readonly url: string;
|
||||
readonly alt: string;
|
||||
}
|
||||
|
||||
export const ArtComponent = (props: ArtProps): JSX.Element => {
|
||||
const { name, img, artist, url, alt } = props;
|
||||
/**
|
||||
* Renders the view for an art piece.
|
||||
* @param properties - The art to render.
|
||||
* @returns A JSX element.
|
||||
*/
|
||||
export const ArtComponent = (properties: ArtProperties): JSX.Element => {
|
||||
const { name, img, artist, url, alt } = properties;
|
||||
|
||||
return (
|
||||
<div className="w-[300px] h-[300px] border-2 border-solid border-[--foreground] m-auto text-center items-center">
|
||||
<p className="text-l">{name} by <a className="underline" href={url} target="_blank" rel="noreferrer">{artist}</a></p>
|
||||
<div className="w-[300px] h-[300px] border-2
|
||||
border-solid border-[--foreground] m-auto text-center items-center">
|
||||
<p className="text-l">
|
||||
{`${name} by `}
|
||||
<a className="underline" href={url} rel="noreferrer" target="_blank">
|
||||
{artist}
|
||||
</a>
|
||||
</p>
|
||||
<a
|
||||
href={`https://cdn.nhcarrigan.com/art/${img}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<Image
|
||||
src={`https://cdn.nhcarrigan.com/art/${img}`}
|
||||
alt={alt}
|
||||
width={250}
|
||||
height={250}
|
||||
className="m-auto object-contain max-h-[250px] max-w-[250px]"
|
||||
height={250}
|
||||
src={`https://cdn.nhcarrigan.com/art/${img}`}
|
||||
width={250}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
+25
-21
@@ -1,44 +1,48 @@
|
||||
import { Volunteer } from "@/icons/Volunteer";
|
||||
import {
|
||||
faCalendar,
|
||||
faQuestionCircle,
|
||||
faTasks,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
import type { JSX } from "react";
|
||||
|
||||
interface CertProps {
|
||||
name: string;
|
||||
fileName: string;
|
||||
issuer: string;
|
||||
date: Date;
|
||||
interface CertProperties {
|
||||
readonly name: string;
|
||||
readonly fileName: string;
|
||||
readonly issuer: string;
|
||||
readonly date: Date;
|
||||
}
|
||||
|
||||
export const Certification = (props: CertProps): JSX.Element => {
|
||||
const { name, fileName, issuer, date } = props;
|
||||
/**
|
||||
* Renders the view for a certification.
|
||||
* @param properties - The certification to render.
|
||||
* @returns A JSX element.
|
||||
*/
|
||||
export const Certification = (properties: CertProperties): JSX.Element => {
|
||||
const { name, fileName, issuer, date } = properties;
|
||||
|
||||
return (
|
||||
<div className="w-[300px] h-[300px] border-2 border-solid border-[--foreground] m-auto text-center items-center">
|
||||
<div className="w-[300px] h-[300px] border-2
|
||||
border-solid border-[--foreground] m-auto text-center items-center">
|
||||
<p className="text-xl">{name}</p>
|
||||
<a
|
||||
href={`https://cdn.nhcarrigan.com/certifications/${fileName}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<Image
|
||||
src={`https://cdn.nhcarrigan.com/certifications/${fileName}`}
|
||||
alt={name}
|
||||
width={250}
|
||||
height={250}
|
||||
className="m-auto"
|
||||
height={250}
|
||||
src={`https://cdn.nhcarrigan.com/certifications/${fileName}`}
|
||||
width={250}
|
||||
/>
|
||||
</a>
|
||||
<p>{issuer}</p>
|
||||
<p>
|
||||
{date.toLocaleDateString("en-GB", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
year: "numeric",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
+38
-23
@@ -1,31 +1,46 @@
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { faComments } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
faComments,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { usePathname } from "next/navigation";
|
||||
import Script from "next/script";
|
||||
import React, { type JSX } from "react";
|
||||
|
||||
const Footer = (): JSX.Element => {
|
||||
return (
|
||||
<>
|
||||
<div className="fixed w-full bottom-0 z-50 flex justify-between items-center h-14 px-4 bg-[--background] text-[--foreground]">
|
||||
<p>© Naomi Carrigan</p>
|
||||
<a href="https://chat.nhcarrigan.com" target="_blank" rel="noreferrer">
|
||||
<FontAwesomeIcon icon={faComments} size="lg" />
|
||||
</a>
|
||||
<div className="h-4/5" id="tree-nation-offset-website"></div>
|
||||
<Script id="tree-nation">{`TreeNationOffsetWebsite({code: 'a17464e0cd351220', lang: 'en', theme: 'dark'}).render('#tree-nation-offset-website');`}</Script>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export function ClientFooter() {
|
||||
/**
|
||||
* Conditionally renders the footer component when
|
||||
* not on the home page.
|
||||
* @returns A JSX element.
|
||||
*/
|
||||
export const Footer = (): JSX.Element | null => {
|
||||
const pathname = usePathname();
|
||||
const isRootPath = pathname === "/";
|
||||
|
||||
if (isRootPath) return null;
|
||||
return <Footer />;
|
||||
}
|
||||
if (isRootPath) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="fixed w-full bottom-0 z-50 flex
|
||||
justify-between items-center h-14 px-4
|
||||
bg-[--background] text-[--foreground]"
|
||||
>
|
||||
<p>{`© Naomi Carrigan`}</p>
|
||||
<a href="https://chat.nhcarrigan.com" rel="noreferrer" target="_blank">
|
||||
<FontAwesomeIcon icon={faComments} size="lg" />
|
||||
</a>
|
||||
<div className="h-4/5" id="tree-nation-offset-website"></div>
|
||||
<Script
|
||||
src="https://widgets.tree-nation.com/js/widgets/v1/widgets.min.js?v=1.0"
|
||||
strategy="beforeInteractive"
|
||||
></Script>
|
||||
<Script
|
||||
id="tree-nation"
|
||||
strategy="afterInteractive"
|
||||
>{`TreeNationOffsetWebsite({code: 'a17464e0cd351220', lang: 'en', theme: 'dark'}).render('#tree-nation-offset-website');`}</Script>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
+27
-15
@@ -1,36 +1,48 @@
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
import Image from "next/image";
|
||||
import type { JSX } from "react";
|
||||
|
||||
interface GameProps {
|
||||
name: string;
|
||||
img: string;
|
||||
url: string;
|
||||
alt: string;
|
||||
interface GameProperties {
|
||||
readonly name: string;
|
||||
readonly img: string;
|
||||
readonly url: string;
|
||||
readonly alt: string;
|
||||
}
|
||||
|
||||
export const Game = (props: GameProps): JSX.Element => {
|
||||
const { name, img, url, alt } = props;
|
||||
/**
|
||||
* Renders the view for a game.
|
||||
* @param properties - The game to render.
|
||||
* @returns A JSX element.
|
||||
*/
|
||||
export const Game = (properties: GameProperties): JSX.Element => {
|
||||
const { name, img, url, alt } = properties;
|
||||
|
||||
return (
|
||||
<div className="w-[300px] h-[300px] border-2 border-solid border-[--foreground] m-auto text-center items-center">
|
||||
<div className="w-[300px] h-[300px] border-2
|
||||
border-solid border-[--foreground] m-auto text-center items-center">
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xl underline"
|
||||
href={url}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<p>{name}</p>
|
||||
</a>
|
||||
<a
|
||||
href={`https://cdn.nhcarrigan.com/games/${img}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<Image
|
||||
src={`https://cdn.nhcarrigan.com/games/${img}`}
|
||||
alt={alt}
|
||||
width={250}
|
||||
height={250}
|
||||
className="m-auto object-contain max-h-[250px] max-w-[250px]"
|
||||
height={250}
|
||||
src={`https://cdn.nhcarrigan.com/games/${img}`}
|
||||
width={250}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
+72
-46
@@ -1,85 +1,111 @@
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
"use client";
|
||||
import { Volunteer } from "@/icons/Volunteer";
|
||||
import {
|
||||
faCalendar,
|
||||
faQuestionCircle,
|
||||
faTasks,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { useState } from "react";
|
||||
import { type JSX, useCallback, useState } from "react";
|
||||
import { Volunteer } from "../icons/Volunteer";
|
||||
|
||||
interface JobProps {
|
||||
title: string;
|
||||
company: string;
|
||||
start: Date;
|
||||
end: Date | null;
|
||||
link: string;
|
||||
type: "volunteer" | "fixed" | "project" | "hypothetical";
|
||||
description: string;
|
||||
logo: string;
|
||||
interface JobProperties {
|
||||
readonly title: string;
|
||||
readonly company: string;
|
||||
readonly start: Date;
|
||||
readonly end: Date | null;
|
||||
readonly link: string;
|
||||
readonly type: "volunteer" | "fixed" | "project" | "hypothetical";
|
||||
readonly description: string;
|
||||
readonly logo: string;
|
||||
}
|
||||
|
||||
const IconMap = {
|
||||
volunteer: Volunteer,
|
||||
fixed: faCalendar,
|
||||
project: faTasks,
|
||||
fixed: faCalendar,
|
||||
hypothetical: faQuestionCircle,
|
||||
project: faTasks,
|
||||
volunteer: Volunteer,
|
||||
};
|
||||
|
||||
export const Job = (props: JobProps): JSX.Element => {
|
||||
const { title, company, start, end, link, type, description, logo } = props;
|
||||
const [showDescription, setShowDescription] = useState(false);
|
||||
const toggleDescription = () => {
|
||||
const getColor
|
||||
= (type: JobProperties["type"], end: JobProperties["end"]): string => {
|
||||
if (type === "hypothetical") {
|
||||
return "text-[--primary]";
|
||||
}
|
||||
if (end) {
|
||||
return "text-[--former]";
|
||||
}
|
||||
return "text-[--current]";
|
||||
};
|
||||
|
||||
const getBorder
|
||||
= (type: JobProperties["type"], end: JobProperties["end"]): string => {
|
||||
if (type === "hypothetical") {
|
||||
return "border-[--primary]";
|
||||
}
|
||||
if (end) {
|
||||
return "border-[--former]";
|
||||
}
|
||||
return "border-[--current]";
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders the view for a job.
|
||||
* @param properties - The job to render.
|
||||
* @returns A JSX element.
|
||||
*/
|
||||
export const Job = (properties: JobProperties): JSX.Element => {
|
||||
const { title, company, start, end, type, description } = properties;
|
||||
const [ showDescription, setShowDescription ] = useState(false);
|
||||
const toggleDescription = useCallback((): void => {
|
||||
setShowDescription(!showDescription);
|
||||
};
|
||||
const color =
|
||||
type === "hypothetical"
|
||||
? "text-[--primary]"
|
||||
: end
|
||||
? "text-[--former]"
|
||||
: "text-[--current]";
|
||||
const border =
|
||||
type === "hypothetical"
|
||||
? "border-[--primary]"
|
||||
: end
|
||||
? "border-[--former]"
|
||||
: "border-[--current]";
|
||||
|
||||
const borderStyle = end ? "border-dashed border-2" : "border-double border-4";
|
||||
}, [ showDescription ]);
|
||||
const color = getColor(type, end);
|
||||
const border = getBorder(type, end);
|
||||
const borderStyle = end
|
||||
? "border-dashed border-2"
|
||||
: "border-double border-4";
|
||||
return (
|
||||
<li className={`mb-10 ms-6 ${color}`}>
|
||||
<span
|
||||
className={`absolute flex items-center justify-center w-6 h-6 bg-[--background] rounded-full -start-3 ${color}`}
|
||||
>
|
||||
<FontAwesomeIcon icon={IconMap[type]} className="text-3xl" />
|
||||
<FontAwesomeIcon className="text-3xl" icon={IconMap[type]} />
|
||||
</span>
|
||||
<h3 className={`flex items-center mb-1 text-lg font-semibold`}>
|
||||
{title} for {company}
|
||||
{`${title} for ${company}`}
|
||||
</h3>
|
||||
<time className="block mb-2 text-sm font-normal leading-none">
|
||||
{start.toLocaleDateString("en-US", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}{" "}
|
||||
-{" "}
|
||||
year: "numeric",
|
||||
})}{" - "}
|
||||
{end
|
||||
? end.toLocaleDateString("en-US", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
: "Present"}
|
||||
</time>
|
||||
{showDescription && (
|
||||
<div
|
||||
{showDescription
|
||||
? <div
|
||||
className="mb-4 text-base font-normal"
|
||||
// eslint-disable-next-line react/no-danger
|
||||
dangerouslySetInnerHTML={{ __html: description }}
|
||||
></div>
|
||||
)}
|
||||
: null}
|
||||
<button
|
||||
onClick={toggleDescription}
|
||||
className={`inline-flex items-center px-4 py-2 text-sm font-medium ${borderStyle} ${border}`}
|
||||
onClick={toggleDescription}
|
||||
type="button"
|
||||
>
|
||||
{showDescription ? "Hide Details" : "Show Details"}
|
||||
{showDescription
|
||||
? "Hide Details"
|
||||
: "Show Details"}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
|
||||
+28
-14
@@ -1,27 +1,41 @@
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
import type { JSX } from "react";
|
||||
|
||||
interface MemberProps {
|
||||
name: string;
|
||||
avatar: string;
|
||||
role: string;
|
||||
url: string;
|
||||
joinDate: Date;
|
||||
interface MemberProperties {
|
||||
readonly name: string;
|
||||
readonly avatar: string;
|
||||
readonly role: string;
|
||||
readonly url: string;
|
||||
readonly joinDate: Date;
|
||||
}
|
||||
|
||||
export const Member = (props: MemberProps): JSX.Element => {
|
||||
const { name, avatar, role, url, joinDate } = props;
|
||||
/**
|
||||
* Renders the view for a team member.
|
||||
* @param properties - The member to render.
|
||||
* @returns A JSX element.
|
||||
*/
|
||||
export const Member = (properties: MemberProperties): JSX.Element => {
|
||||
const { name, avatar, role, url, joinDate } = properties;
|
||||
|
||||
return (
|
||||
<div className="flex items-start gap-2.5 pb-10 w-full">
|
||||
<Image
|
||||
className="rounded-full"
|
||||
src={`https://cdn.nhcarrigan.com/avatars/${avatar}`}
|
||||
alt={`${name}'s avatar.`}
|
||||
width={75}
|
||||
className="rounded-full"
|
||||
height={75}
|
||||
src={`https://cdn.nhcarrigan.com/avatars/${avatar}`}
|
||||
width={75}
|
||||
/>
|
||||
<div className="flex flex-col w-full leading-1.5 p-4 border-gray-200 bg-gray-100 rounded-e-xl rounded-es-xl dark:bg-gray-700">
|
||||
<div
|
||||
className="flex flex-col w-full leading-1.5
|
||||
p-4 border-gray-200 bg-gray-100 rounded-e-xl
|
||||
rounded-es-xl dark:bg-gray-700"
|
||||
>
|
||||
<div>
|
||||
<a
|
||||
className="text-sm font-semibold text-[#abfcec]"
|
||||
@@ -33,7 +47,7 @@ export const Member = (props: MemberProps): JSX.Element => {
|
||||
<p className="text-sm font-normal text-gray-500 dark:text-gray-400">
|
||||
{joinDate.toLocaleDateString("en-GB", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
year: "numeric",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -1,84 +1,108 @@
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
"use client";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
import { Rule } from "./rule";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
faBars,
|
||||
faTimes,
|
||||
faSun,
|
||||
faMoon,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { NavItems } from "@/config/NavItems";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import Image from "next/image";
|
||||
import { usePathname } from "next/navigation";
|
||||
import React, { type JSX, useState, useEffect, useCallback } from "react";
|
||||
import { NavItems } from "../config/NavItems";
|
||||
import { Rule } from "./rule";
|
||||
|
||||
const Navigation = (): JSX.Element => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||
/**
|
||||
* Conditionally renders the navigation component when
|
||||
* not on the home page.
|
||||
* @returns A JSX element.
|
||||
*/
|
||||
export const Navigation = (): JSX.Element | null => {
|
||||
const [ isOpen, setIsOpen ] = useState(false);
|
||||
const [ isDarkMode, setIsDarkMode ] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
const prefersDark = window.matchMedia(
|
||||
"(prefers-color-scheme: dark)",
|
||||
).matches;
|
||||
const isDark = savedTheme === "dark" || (!savedTheme && prefersDark);
|
||||
document.documentElement.classList.toggle("dark", isDark);
|
||||
setIsDarkMode(isDark);
|
||||
const storedTheme = localStorage.getItem("theme");
|
||||
if (storedTheme === "dark") {
|
||||
document.documentElement.classList.add("dark");
|
||||
setIsDarkMode(true);
|
||||
} else {
|
||||
document.documentElement.classList.remove("dark");
|
||||
setIsDarkMode(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const toggleMenu = () => {
|
||||
const toggleMenu = useCallback((): void => {
|
||||
setIsOpen(!isOpen);
|
||||
};
|
||||
}, [ isOpen ]);
|
||||
|
||||
const toggleDarkMode = () => {
|
||||
const toggleDarkMode = useCallback((): void => {
|
||||
document.documentElement.classList.toggle("dark", !isDarkMode);
|
||||
localStorage.setItem("theme", !isDarkMode ? "dark" : "light");
|
||||
localStorage.setItem("theme", isDarkMode
|
||||
? "light"
|
||||
: "dark");
|
||||
setIsDarkMode(!isDarkMode);
|
||||
};
|
||||
}, [ isDarkMode ]);
|
||||
|
||||
const pathname = usePathname();
|
||||
const isRootPath = pathname === "/";
|
||||
|
||||
if (isRootPath) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed w-full top-0 z-50">
|
||||
<nav className="w-full flex justify-between items-center h-14 px-4 bg-[--background] text-[--foreground]">
|
||||
<nav
|
||||
className="w-full flex justify-between
|
||||
items-center h-14 px-4 bg-[--background] text-[--foreground]"
|
||||
>
|
||||
<a href="/">
|
||||
<Image
|
||||
src="https://cdn.nhcarrigan.com/logo.png"
|
||||
alt="nhcarrigan's logo"
|
||||
width={50}
|
||||
height={50}
|
||||
src="https://cdn.nhcarrigan.com/logo.png"
|
||||
width={50}
|
||||
/>
|
||||
</a>
|
||||
<div className="flex items-center">
|
||||
<button onClick={toggleDarkMode} className="mr-4">
|
||||
<FontAwesomeIcon icon={isDarkMode ? faSun : faMoon} size="lg" />
|
||||
<button className="mr-4" onClick={toggleDarkMode} type="button">
|
||||
<FontAwesomeIcon icon={isDarkMode
|
||||
? faSun
|
||||
: faMoon} size="lg" />
|
||||
</button>
|
||||
<button onClick={toggleMenu}>
|
||||
<FontAwesomeIcon icon={isOpen ? faTimes : faBars} size="2x" />
|
||||
<button onClick={toggleMenu} type="button">
|
||||
<FontAwesomeIcon icon={isOpen
|
||||
? faTimes
|
||||
: faBars} size="2x" />
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
{isOpen && (
|
||||
<div className="bg-[--background] text-[--foreground]">
|
||||
{NavItems.map((item, index) => (
|
||||
<a
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="block py-2 px-4 text-2xl hover:bg-[--foreground] hover:text-[--background]"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
{index % 2 ? "🩷" : "🩵"} {item.text}
|
||||
</a>
|
||||
))}
|
||||
{isOpen
|
||||
? <div className="bg-[--background] text-[--foreground]">
|
||||
{NavItems.map((item, index) => {
|
||||
return (
|
||||
<a
|
||||
className="block py-2 px-4 text-2xl hover:bg-[--foreground]
|
||||
hover:text-[--background]"
|
||||
href={item.href}
|
||||
key={item.href}
|
||||
onClick={toggleMenu}
|
||||
>
|
||||
{index % 2 === 1
|
||||
? "🩷"
|
||||
: "🩵"} {item.text}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
: null}
|
||||
<Rule />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export function ClientNavigation() {
|
||||
const pathname = usePathname();
|
||||
const isRootPath = pathname === "/";
|
||||
|
||||
if (isRootPath) return null;
|
||||
return <Navigation />;
|
||||
}
|
||||
|
||||
+27
-15
@@ -1,27 +1,39 @@
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
import type { JSX } from "react";
|
||||
|
||||
interface PartnerProps {
|
||||
name: string;
|
||||
avatar: string;
|
||||
relationship: string;
|
||||
url: string;
|
||||
anniversary: Date;
|
||||
interface PartnerProperties {
|
||||
readonly name: string;
|
||||
readonly avatar: string;
|
||||
readonly relationship: string;
|
||||
readonly url: string;
|
||||
readonly anniversary: Date;
|
||||
}
|
||||
|
||||
export const Partner = (props: PartnerProps): JSX.Element => {
|
||||
const { name, avatar, relationship, url, anniversary } = props;
|
||||
/**
|
||||
* Renders the view for a polycule member.
|
||||
* @param properties - The member to render.
|
||||
* @returns A JSX element.
|
||||
*/
|
||||
export const Partner = (properties: PartnerProperties): JSX.Element => {
|
||||
const { name, avatar, relationship, url, anniversary } = properties;
|
||||
|
||||
return (
|
||||
<div className="flex items-start gap-2.5 pb-10 w-full">
|
||||
<Image
|
||||
className="rounded-full"
|
||||
src={`https://cdn.nhcarrigan.com/avatars/${avatar}`}
|
||||
alt={`${name}'s avatar.`}
|
||||
width={75}
|
||||
className="rounded-full"
|
||||
height={75}
|
||||
src={`https://cdn.nhcarrigan.com/avatars/${avatar}`}
|
||||
width={75}
|
||||
/>
|
||||
<div className="flex flex-col w-full leading-1.5 p-4 border-gray-200 bg-gray-100 rounded-e-xl rounded-es-xl dark:bg-gray-700">
|
||||
<div className="flex flex-col w-full leading-1.5 p-4
|
||||
border-gray-200 bg-gray-100 rounded-e-xl
|
||||
rounded-es-xl dark:bg-gray-700">
|
||||
<div>
|
||||
<a
|
||||
className="text-sm font-semibold text-[#abfcec]"
|
||||
@@ -32,9 +44,9 @@ export const Partner = (props: PartnerProps): JSX.Element => {
|
||||
</a>
|
||||
<p className="text-sm font-normal text-gray-500 dark:text-gray-400">
|
||||
{anniversary.toLocaleDateString("en-GB", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
+35
-20
@@ -1,39 +1,54 @@
|
||||
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { Rule } from "./rule";
|
||||
import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
|
||||
import type { JSX } from "react";
|
||||
|
||||
interface ReviewProps {
|
||||
name: string;
|
||||
date: Date;
|
||||
content: string;
|
||||
sourceIcon: IconDefinition;
|
||||
sourceUrl: string;
|
||||
sourceName: string;
|
||||
interface ReviewProperties {
|
||||
readonly name: string;
|
||||
readonly date: Date;
|
||||
readonly content: string;
|
||||
readonly sourceIcon: IconDefinition;
|
||||
readonly sourceUrl: string;
|
||||
readonly sourceName: string;
|
||||
}
|
||||
|
||||
export const Review = (props: ReviewProps): JSX.Element => {
|
||||
const { name, date, content, sourceIcon, sourceUrl, sourceName } = props;
|
||||
/**
|
||||
* Renders the view for a review.
|
||||
* @param properties - The review to render.
|
||||
* @returns A JSX element.
|
||||
*/
|
||||
export const Review = (properties: ReviewProperties): JSX.Element => {
|
||||
const { name, date, content, sourceIcon, sourceUrl, sourceName } = properties;
|
||||
return (
|
||||
<li className="mb-10 ms-6">
|
||||
<span className="absolute flex items-center justify-center w-6 h-6 bg-[--background] text-[--foreground] rounded-full -start-3">
|
||||
<span className="absolute flex items-center justify-center
|
||||
w-6 h-6 bg-[--background] text-[--foreground] rounded-full -start-3">
|
||||
<FontAwesomeIcon icon={sourceIcon} />
|
||||
</span>
|
||||
<div className="items-center justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:bg-gray-700 dark:border-gray-600">
|
||||
<time className="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">
|
||||
<div className="items-center justify-between p-4 bg-white
|
||||
border border-gray-200 rounded-lg shadow-sm sm:flex
|
||||
dark:bg-gray-700 dark:border-gray-600">
|
||||
<time className="mb-1 text-xs font-normal
|
||||
text-gray-400 sm:order-last sm:mb-0">
|
||||
{date.toLocaleDateString("en-GB")}
|
||||
</time>
|
||||
<div className="text-md font-normal text-gray-500 dark:text-gray-300">
|
||||
Review from{" "}
|
||||
{`Review from `}
|
||||
<a
|
||||
href={sourceUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-semibold text-[#abfcec] hover:underline"
|
||||
href={sourceUrl}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
{name}
|
||||
</a>{" "}
|
||||
via{" "}
|
||||
<span className="bg-gray-100 text-gray-800 text-xs font-normal me-2 px-2.5 py-0.5 rounded dark:bg-gray-600 dark:text-gray-300">
|
||||
</a>{` via `}
|
||||
<span className="bg-gray-100 text-gray-800 text-xs font-normal
|
||||
me-2 px-2.5 py-0.5 rounded dark:bg-gray-600 dark:text-gray-300">
|
||||
{sourceName}
|
||||
</span>
|
||||
<Rule />
|
||||
|
||||
+10
-1
@@ -1,5 +1,14 @@
|
||||
import styles from "./rule.module.css";
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
import type { JSX } from "react";
|
||||
|
||||
/**
|
||||
* Renders a customised horizontal rule.
|
||||
* @returns A JSX element.
|
||||
*/
|
||||
export const Rule = (): JSX.Element => {
|
||||
return <hr className="border-dashed border-2 border-[--primary-color]"></hr>;
|
||||
};
|
||||
|
||||
+32
-20
@@ -1,32 +1,44 @@
|
||||
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
|
||||
import type { JSX } from "react";
|
||||
|
||||
interface SocialProps {
|
||||
icon: IconDefinition;
|
||||
link: string;
|
||||
label: string;
|
||||
alt: string;
|
||||
color: string;
|
||||
background: string;
|
||||
interface SocialProperties {
|
||||
readonly icon: IconDefinition;
|
||||
readonly link: string;
|
||||
readonly label: string;
|
||||
readonly alt: string;
|
||||
readonly color: string;
|
||||
readonly background: string;
|
||||
}
|
||||
|
||||
export const Social = (props: SocialProps): JSX.Element => {
|
||||
const { icon, link, label, alt, background, color } = props;
|
||||
/**
|
||||
* Renders the view for a social media link.
|
||||
* @param properties - The link to render.
|
||||
* @returns A JSX element.
|
||||
*/
|
||||
export const Social = (properties: SocialProperties): JSX.Element => {
|
||||
const { icon, link, label, alt, background, color } = properties;
|
||||
|
||||
return (
|
||||
<a
|
||||
className="flex max-w-[300px] w-[95%] m-auto justify-between items-center border-solid border-2 rounded-3xl h-14 p-8 my-4"
|
||||
style={{
|
||||
borderColor: color,
|
||||
color,
|
||||
background,
|
||||
}}
|
||||
href={link}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label={label}
|
||||
className="flex max-w-[300px] w-[95%] m-auto justify-between
|
||||
items-center border-solid border-2 rounded-3xl h-14 p-8 my-4"
|
||||
href={link}
|
||||
rel="noreferrer"
|
||||
style={{
|
||||
background: background,
|
||||
borderColor: color,
|
||||
color: color,
|
||||
}}
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={icon} aria-label={alt} size="3x" />
|
||||
<FontAwesomeIcon aria-label={alt} icon={icon} size="3x" />
|
||||
<strong>{label}</strong>
|
||||
</a>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user