Skip to content
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.

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

Feature/navbar #8

Merged
merged 11 commits into from
Nov 27, 2024
15 changes: 9 additions & 6 deletions next.config.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import type { NextConfig } from 'next';
import { PHASE_DEVELOPMENT_SERVER, PHASE_PRODUCTION_BUILD } from 'next/constants';
import serwist from '@serwist/next';
// import type { NextConfig } from "next";
import {
PHASE_DEVELOPMENT_SERVER,
PHASE_PRODUCTION_BUILD,
} from "next/constants";
import serwist from "@serwist/next";

const baseConfig = {
// Base Next.js config
@@ -9,11 +12,11 @@ const baseConfig = {
export default async (phase: any) => {
if (phase === PHASE_DEVELOPMENT_SERVER || phase === PHASE_PRODUCTION_BUILD) {
const withSerwist = serwist({
swSrc: 'src/app/sw.ts',
swDest: 'public/sw.js',
swSrc: "src/app/sw.ts",
swDest: "public/sw.js",
});
return withSerwist(baseConfig);
}

return baseConfig;
};
};
Empty file added src/app/insights/page.tsx
Empty file.
28 changes: 16 additions & 12 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import '../styles/globals.css';
import type { Metadata, Viewport } from 'next';
import type { ReactNode } from 'react';
import "../styles/globals.css";
import type { Metadata, Viewport } from "next";
import type { ReactNode } from "react";
import Navbar from "@/ui/layout/Navbar/Navbar";

const APP_NAME = 'Things We Do';
const APP_DEFAULT_TITLE = 'Things We Do';
const APP_TITLE_TEMPLATE = '%s - PWA App';
const APP_DESCRIPTION = 'Best PWA app in the world!';
const APP_NAME = "Things We Do";
const APP_DEFAULT_TITLE = "Things We Do";
const APP_TITLE_TEMPLATE = "%s - PWA App";
const APP_DESCRIPTION = "Best PWA app in the world!";

export const metadata: Metadata = {
applicationName: APP_NAME,
@@ -16,15 +17,15 @@ export const metadata: Metadata = {
description: APP_DESCRIPTION,
appleWebApp: {
capable: true,
statusBarStyle: 'default',
statusBarStyle: "default",
title: APP_DEFAULT_TITLE,
// startUpImage: [],
},
formatDetection: {
telephone: false,
},
openGraph: {
type: 'website',
type: "website",
siteName: APP_NAME,
title: {
default: APP_DEFAULT_TITLE,
@@ -33,7 +34,7 @@ export const metadata: Metadata = {
description: APP_DESCRIPTION,
},
twitter: {
card: 'summary',
card: "summary",
title: {
default: APP_DEFAULT_TITLE,
template: APP_TITLE_TEMPLATE,
@@ -43,14 +44,17 @@ export const metadata: Metadata = {
};

export const viewport: Viewport = {
themeColor: '#FFFFFF',
themeColor: "#FFFFFF",
};

export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en" dir="ltr">
<head />
<body>{children}</body>
<body>
<main>{children}</main>
<Navbar />
</body>
</html>
);
}
Empty file added src/app/needs/page.tsx
Empty file.
9 changes: 9 additions & 0 deletions src/ui/layout/Navbar/Navbar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import NavbarButtons from "./NavbarButtons";

export default function Navbar() {
return (
<nav className="fixed bottom-0 bg-twd-navbar-background h-20 w-screen">
<NavbarButtons />
</nav>
);
}
31 changes: 31 additions & 0 deletions src/ui/layout/Navbar/NavbarButtons.tsx
jackcasstlesjones marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import {
HomeIcon,
PresentationChartLineIcon,
EllipsisHorizontalCircleIcon,
ChartBarIcon,
} from "@heroicons/react/24/outline";

import Icon from "@/ui/shared/Icon";

import { WrenchIcon } from "@heroicons/react/24/solid";

const buttons = [
{ title: "Home", icon: HomeIcon, destination: "/" },
{ title: "Moods", icon: PresentationChartLineIcon, destination: "/moods" },
{ title: "Toolkit", icon: WrenchIcon, destination: "/toolkit" },
{ title: "Needs", icon: EllipsisHorizontalCircleIcon, destination: "/needs" },
{ title: "Insights", icon: ChartBarIcon, destination: "/insights" },
];

export default function NavbarButtons() {
return (
<div className="grid grid-cols-5 items-center h-full w-11/12 m-auto">
{buttons.map((button, index) => (
<div key={index} className={`flex flex-col items-center`}>
<p className="text-white">{button.title}</p>
<Icon Icon={button.icon} classes="h-6 w-6 text-white" />
</div>
))}
</div>
);
}
9 changes: 9 additions & 0 deletions src/ui/shared/Icon.tsx
jackcasstlesjones marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -1 +1,10 @@
import React from "react";

type IconProps = {
Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
classes: string;
};

export default function Icon({ Icon, classes }: IconProps) {
return <Icon className={classes} />;
}
1 change: 1 addition & 0 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@ export default {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/ui/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {