Skip to content

Commit

Permalink
Add nextjs
Browse files Browse the repository at this point in the history
  • Loading branch information
eric-bach committed May 14, 2024
1 parent 3e5130b commit 7ba97b2
Show file tree
Hide file tree
Showing 64 changed files with 10,974 additions and 212 deletions.
3 changes: 3 additions & 0 deletions frontend.old/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": "next/core-web-vitals"
}
File renamed without changes.
File renamed without changes.
File renamed without changes.
51 changes: 51 additions & 0 deletions frontend.old/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
# Next.js & NextUI Template

This is a template for creating applications using Next.js 14 (app directory) and NextUI (v2).

## Technologies Used

- [Next.js 14](https://nextjs.org/docs/getting-started)
- [NextUI v2](https://nextui.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Tailwind Variants](https://tailwind-variants.org)
- [TypeScript](https://www.typescriptlang.org/)
- [Framer Motion](https://www.framer.com/motion/)
- [next-themes](https://github.com/pacocoursey/next-themes)

## How to Use

### Use the template with create-next-app

To create a new project based on this template using `create-next-app`, run the following command:

```bash
npx create-next-app -e https://github.com/nextui-org/next-app-template
```

### Install dependencies

You can use one of them `npm`, `yarn`, `pnpm`, `bun`, Example using `npm`:

```bash
npm install
```

### Run the development server

```bash
npm run dev
```

### Setup pnpm (optional)

If you are using `pnpm`, you need to add the following code to your `.npmrc` file:

```bash
public-hoist-pattern[]=*@nextui-org/*
```

After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.

## License

Licensed under the [MIT license](https://github.com/nextui-org/next-app-template/blob/main/LICENSE).
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
7 changes: 5 additions & 2 deletions frontend/app/layout.tsx → frontend.old/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ import ConfigureAmplifyClientSide from '../components/ConfigureAmplifyClientSide
import { Amplify } from 'aws-amplify';
import amplifyconfiguration from '@/amplifyconfiguration.json';

import '@aws-amplify/ui-react/styles.css';
import LoginPage from '../components/login-page';

Amplify.configure(amplifyconfiguration);

export const metadata: Metadata = {
Expand Down Expand Up @@ -37,9 +40,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<body className={clsx('min-h-screen bg-background font-sans antialiased', fontSans.variable)}>
<Providers themeProps={{ attribute: 'class', defaultTheme: 'dark' }}>
<div className='relative flex flex-col h-screen'>
<Navbar />
{/* <Navbar /> */}
<LoginPage children={children} />

Check warning on line 44 in frontend.old/app/layout.tsx

View check run for this annotation

codefactor.io / CodeFactor

frontend.old/app/layout.tsx#L44

Do not pass children as props. Instead, nest children between the opening and closing tags. (react/no-children-prop)
<ConfigureAmplifyClientSide />
<main className='container mx-auto max-w-7xl pt-16 px-6 flex-grow'>{children}</main>
<footer className='w-full flex items-center justify-center py-3'>
<Link isExternal className='flex items-center gap-1 text-current' href='https://ericbach.dev' title='nextui.org homepage'>
<span className='text-default-600'>Powered by</span>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
'use client';

import { Authenticator, Theme, ThemeProvider, View, useTheme, withAuthenticator } from '@aws-amplify/ui-react';
import { Authenticator, Theme, ThemeProvider, View } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import { useSearchParams } from 'next/navigation';
import { redirect } from 'next/navigation';

const theme: Theme = {
name: 'Theme',
Expand Down Expand Up @@ -56,23 +54,18 @@ const formFields = {
},
};

const Login = () => {
const searchParams = useSearchParams();

const origin = searchParams.get('origin');
if (origin) {
redirect(origin);
}

return <div>LOGIN</div>;
};

//export default withAuthenticator(Login);
function App() {
return (
<ThemeProvider theme={theme}>
<View paddingTop='6em'>
<Authenticator formFields={formFields} hideSignUp={false}></Authenticator>
<Authenticator formFields={formFields} hideSignUp={false}>
{({ signOut, user }) => (
<main>
<h1>Hello {user?.username}</h1>
<button onClick={signOut}>Sign out</button>
</main>
)}
</Authenticator>
</View>
</ThemeProvider>
);
Expand Down
39 changes: 39 additions & 0 deletions frontend.old/app/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { Link } from '@nextui-org/link';
import { Snippet } from '@nextui-org/snippet';
import { Code } from '@nextui-org/code';
import { button as buttonStyles } from '@nextui-org/theme';
import { siteConfig } from '@/config/site';
import { title, subtitle } from '@/components/primitives';
import { GithubIcon } from '@/components/icons';

export default function Home() {
return (
<section className='flex flex-col items-center justify-center gap-4 py-8 md:py-10'>
<div className='inline-block max-w-lg text-center justify-center'>
<h1 className={title()}>Make&nbsp;</h1>
<h1 className={title({ color: 'violet' })}>beautiful&nbsp;</h1>
<br />
<h1 className={title()}>websites regardless of your design experience.</h1>
<h2 className={subtitle({ class: 'mt-4' })}>Beautiful, fast and modern React UI library.</h2>
</div>

<div className='flex gap-3'>
<Link isExternal href={siteConfig.links.docs} className={buttonStyles({ color: 'primary', radius: 'full', variant: 'shadow' })}>
Documentation
</Link>
<Link isExternal className={buttonStyles({ variant: 'bordered', radius: 'full' })} href={siteConfig.links.github}>
<GithubIcon size={20} />
GitHub
</Link>
</div>

<div className='mt-8'>
<Snippet hideSymbol hideCopyButton variant='flat'>
<span>
Get started by editing <Code color='primary'>app/page.tsx</Code>
</span>
</Snippet>
</div>
</section>
);
}
File renamed without changes.
File renamed without changes.
22 changes: 22 additions & 0 deletions frontend.old/app/providers.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
'use client';

import * as React from 'react';
import { NextUIProvider } from '@nextui-org/system';
import { useRouter } from 'next/navigation';
import { ThemeProvider as NextThemesProvider } from 'next-themes';
import { ThemeProviderProps } from 'next-themes/dist/types';

export interface ProvidersProps {
children: React.ReactNode;
themeProps?: ThemeProviderProps;
}

export function Providers({ children, themeProps }: ProvidersProps) {
const router = useRouter();

return (
<NextUIProvider navigate={router.push}>
<NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
</NextUIProvider>
);
}
File renamed without changes.
171 changes: 171 additions & 0 deletions frontend.old/components/login-page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
'use client';

import {
Navbar as NextUINavbar,
NavbarContent,
NavbarMenu,
NavbarMenuToggle,
NavbarBrand,
NavbarItem,
NavbarMenuItem,
} from '@nextui-org/navbar';
import { Button } from '@nextui-org/button';
import { Link } from '@nextui-org/link';
import { Authenticator, Theme, ThemeProvider, View } from '@aws-amplify/ui-react';

import { link as linkStyles } from '@nextui-org/theme';

import { siteConfig } from '@/config/site';
import NextLink from 'next/link';
import clsx from 'clsx';

import { ThemeSwitch } from '@/components/theme-switch';
import { TwitterIcon, GithubIcon, DiscordIcon } from '@/components/icons';

import { Logo } from '@/components/icons';

const theme: Theme = {
name: 'Theme',
tokens: {
components: {
button: {
primary: {
backgroundColor: '#1976d2',
},
link: {
color: '#1976d2',
},
_focus: { backgroundColor: '#1976d2' },
},
tabs: {
item: {
color: '#1976d2',
_hover: {
borderColor: '#1976d2',
color: '#1976d2',
},
_active: {
borderColor: '#1976d2',
color: '#1976d2',
},
},
},
},
},
};

const formFields = {
signIn: {
username: {
label: 'Email',
placeholder: 'Enter your email',
},
},
signUp: {
username: {
label: 'Email',
placeholder: 'Enter your email',
order: 1,
},
password: {
order: 2,
},
confirm_password: {
order: 3,
},
},
};

export default function LoginPag({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider theme={theme}>
<Authenticator formFields={formFields} hideSignUp={false}>
{({ signOut, user }) => (
<main>
<NextUINavbar maxWidth='xl' position='sticky'>
<NavbarContent className='basis-1/5 sm:basis-full' justify='start'>
<NavbarBrand as='li' className='gap-3 max-w-fit'>
<NextLink className='flex justify-start items-center gap-1' href='/'>
<Logo />
<p className='font-bold text-inherit'>Pecuniary</p>
</NextLink>
</NavbarBrand>
<ul className='hidden lg:flex gap-4 justify-start ml-2'>
{siteConfig.navItems.map((item) => (
<NavbarItem key={item.href}>
<NextLink
className={clsx(
linkStyles({ color: 'foreground' }),
'data-[active=true]:text-primary data-[active=true]:font-medium'
)}
color='foreground'
href={item.href}
>
{item.label}
</NextLink>
</NavbarItem>
))}
</ul>
</NavbarContent>

<NavbarContent className='hidden sm:flex basis-1/5 sm:basis-full' justify='end'>
<NavbarItem className='hidden sm:flex gap-2'>
<Link isExternal href={siteConfig.links.twitter} aria-label='Twitter'>
<TwitterIcon className='text-default-500' />
</Link>
<Link isExternal href={siteConfig.links.discord} aria-label='Discord'>
<DiscordIcon className='text-default-500' />
</Link>
<Link isExternal href={siteConfig.links.github} aria-label='Github'>
<GithubIcon className='text-default-500' />
</Link>
<ThemeSwitch />
</NavbarItem>
<NavbarItem>
{user ? (
<form action={signOut}>
<Button type='submit' color='primary' variant='flat'>
Sign Out
</Button>
</form>
) : (
<Button as='link' color='primary' href='#' variant='flat'>
Sign In
</Button>
)}
</NavbarItem>
</NavbarContent>

<NavbarContent className='sm:hidden basis-1 pl-4' justify='end'>
<Link isExternal href={siteConfig.links.github} aria-label='Github'>
<GithubIcon className='text-default-500' />
</Link>
<ThemeSwitch />
<NavbarMenuToggle />
</NavbarContent>

<NavbarMenu>
<div className='mx-4 mt-2 flex flex-col gap-2'>
{siteConfig.navMenuItems.map((item, index) => (
<NavbarMenuItem key={`${item}-${index}`}>
<Link
color={index === 2 ? 'primary' : index === siteConfig.navMenuItems.length - 1 ? 'danger' : 'foreground'}
href='#'
size='lg'
>
{item.label}
</Link>
</NavbarMenuItem>
))}
</div>
</NavbarMenu>
</NextUINavbar>
{/* <h1>Hello {user?.username}</h1>
<button onClick={signOut}>Sign out</button> */}
<main className='container mx-auto max-w-7xl pt-16 px-6 flex-grow'>{children}</main>
</main>
)}
</Authenticator>
</ThemeProvider>
);
}
Loading

0 comments on commit 7ba97b2

Please sign in to comment.