This is a reusable UI that you can use for your AI project. Tutorials will be available soon on the ProtonX YouTube channel and our AI learning platform.
Some applications available
- Chatbot
- Image Generation
- Audio Generation
- Code Generation
- Sketch to Image
- Chatbot using RAG
- Inplace Edit
This is a Next.js project bootstrapped with create-next-app.
openssl rand -base64 32You can quickly create a good value on the command line via this openssl command. Add the resulting code as the value of "NEXTAUTH_SECRET" in the ".env.local" file.
First, run the development server:
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Poppins, a custom Google Font.
Controls the project according to Eslint rules.
Inspects the project according to Eslint rules and corrects them according to those rules.
Inspects the project according to Prettier rules and corrects them according to those rules.
Prepares svg format icons in the SvgIcons folder for use in the project. Names the icon's name in PascalCase format.
This app will call a backend. You also need to set up a backend using this project.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
- NextAuth.js - learn about NextAuth.js
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
fyr
├── public
├── src
│ ├── app
│ │ ├── [locale]
│ │ ├── api
│ │ ├── styles
│ │ └── favicon.ico
│ ├── assets
│ ├── components
│ ├── config
│ │ ├── pages.config.ts
│ │ └── theme.config.ts
│ ├── constants
│ ├── context
│ ├── hooks
│ ├── interface
│ ├── locales
│ ├── mocks
│ ├── routes
│ │ ├── asideRoutes.tsx
│ │ ├── footerRoutes.tsx
│ │ └── headerRoutes.tsx
│ ├── templates
│ ├── types
│ ├── utils
│ ├── i18n.ts
│ └── middleware.ts
├── SvgIcons
├── .env
├── .env.development
├── .env.local
├── .env.production
├── .eslintignore
├── .eslintrc.json
├── .gitattributes
├── .gitignore
├── .npmrc
├── .prettierignore
├── .svgrc
├── global.d.ts
├── i18nConfig.ts
├── next.config.js
├── package.json
├── postcss.config.js
├── prettier.config.js
├── README.md
├── tailwind.config.js
├── tsconfig.eslint.json
└── tsconfig.json
There are 22 colors defined in Tailwind, we have added 8 (zinc #71717a, red #ef4444, amber #f59e0b, lime #84cc16, emerald #10b981, sky #0ea5e9, blue #3b82f6, violet #8b5cf6) of them for the components of Fyr. If you wish, you can activate other colors or define new colors.
You can add new values to "TColors" in the src/types/colors.type.ts file for use in the project and don't forget to add them to the safelist.
You can edit the theme's settings in the src/config/theme.config.ts file.
If you save your page information in the above format in the src/config/pages.config.ts file, you can easily use it in the menus.
//...
export function generateStaticParams() {
return i18nConfig.locales.map((locale) => ({ locale }));
}
const RootLayout = ({
children,
params: { locale },
}: {
children: ReactNode;
params: { locale: string };
}) => {
dayjs.extend(localizedFormat);
return (
<Providers>
<html suppressHydrationWarning lang={locale} dir={dir(locale)}>
<body className={poppins.className}>
<div id='root'>
<div data-component-name='App' className='flex grow flex-col'>
<AsideRouter />
<Wrapper>
<HeaderRouter />
<AppWrapper>{children}</AppWrapper>
<FooterRouter />
</Wrapper>
</div>
</div>
<div id='portal-root' />
</body>
</html>
</Providers>
);
};
//...//...
const Providers = ({ children }: { children: ReactNode }) => {
return (
<ThemeContextProvider>
<NextAuthProvider>{children}</NextAuthProvider>
</ThemeContextProvider>
);
};
//...//...
const AppWrapper = ({ children }: { children: ReactNode }) => {
const { fontSize } = useFontSize();
dayjs.extend(localizedFormat);
getOS();
return (
<>
<style>{`:root {font-size: ${fontSize}px}`}</style>
{children}
</>
);
};
//...If you do not want to customize the project in this file, you do not need to make any changes. In this component, only src/routes/asideRoutes.tsx file sets which component will be shown in which path.
const asideRoutes: TRoute[] = [
{ path: authPages.loginPage.to, element: null },
{ path: '/*', element: <DefaultAsideTemplate /> },
];You can set the "Aside Templates" to be displayed on the paths you want. If you don't want any "Aside" in a path, you can set the element to null.
If you do not want to customize the project in this file, you do not need to make any changes. In this component, only src/routes/headerRoutes.tsx file sets which component will be shown in which path.
const headerRoutes: RouteProps[] = [
{ path: authPages.loginPage.to, element: null },
{ path: `${componentsPages.uiPages.to}/*`, element: <ComponentAndTemplateHeaderTemplate /> },
{ path: '', element: null },
{ path: '/*', element: <DefaultHeaderTemplate /> },
];You can set the "Header Templates" to be displayed on the paths you want. If you don't want any "Header" in a path, you can set the element to null.
If you will have data about the page in "Header", specify that there will not be any "Header" in that path with null and define it within the page. So you don't have to worry about moving the data up.
'use client';
import React, { useState } from 'react';
import PageWrapper from '@/components/layouts/PageWrapper/PageWrapper';
import Subheader, { SubheaderLeft, SubheaderRight } from '@/components/layouts/Subheader/Subheader';
import Container from '@/components/layouts/Container/Container';
const ExamplePageClient = () => {
const [state, setState] = useState<boolean>(false);
return (
<PageWrapper>
<Subheader>
<SubheaderLeft>SubheaderLeft</SubheaderLeft>
<SubheaderRight>SubheaderRight</SubheaderRight>
</Subheader>
<Container>Container</Container>
</PageWrapper>
);
};
export default ExamplePageClient;import React from 'react';
import ExamplePageClient from './_client';
const ExamplePage = () => {
return <ExamplePageClient />;
};
export default ExamplePage;'use client';
import React, { useState } from 'react';
import PageWrapper from '@/components/layouts/PageWrapper/PageWrapper';
import Subheader, { SubheaderLeft, SubheaderRight } from '@/components/layouts/Subheader/Subheader';
import Container from '@/components/layouts/Container/Container';
import { useTranslation } from 'react-i18next';
const ExamplePageClient = () => {
const [state, setState] = useState<boolean>(false);
const { t } = useTranslation();
return (
<PageWrapper>
<Subheader>
<SubheaderLeft>SubheaderLeft</SubheaderLeft>
<SubheaderRight>SubheaderRight</SubheaderRight>
</Subheader>
<Container>{t('Container')}</Container>
</PageWrapper>
);
};
export default ExamplePageClient;import React from 'react';
import TranslationsProvider from '@/components/TranslationsProvider';
import ExamplePageClient from './_client';
const i18nNamespaces = ['translation'];
const ExamplePage = ({ params: { locale } }: { params: { locale: string } }) => {
return (
<TranslationsProvider namespaces={i18nNamespaces} locale={locale}>
<ExamplePageClient />
</TranslationsProvider>
);
};
export default ExamplePage;You can use this method on pages where you set the null value for "Header" as described in the src/routes/headerRoutes.tsx section.
'use client';
import React, { useState } from 'react';
import PageWrapper from '@/components/layouts/PageWrapper/PageWrapper';
import Header, { HeaderLeft, HeaderRight } from '@/components/layouts/Header/Header';
import Subheader, { SubheaderLeft, SubheaderRight } from '@/components/layouts/Subheader/Subheader';
import Container from '@/components/layouts/Container/Container';
const ExamplePageClient = () => {
const [state, setState] = useState<boolean>(false);
return (
<>
<Header>
<HeaderLeft>HeaderLeft</HeaderLeft>
<HeaderRight>HeaderRight</HeaderRight>
</Header>
<PageWrapper>
<Subheader>
<SubheaderLeft>SubheaderLeft</SubheaderLeft>
<SubheaderRight>SubheaderRight</SubheaderRight>
</Subheader>
<Container>Container</Container>
</PageWrapper>
</>
);
};
export default ExamplePageClient;If you do not want to customize the project in this file, you do not need to make any changes. In this component, only src/routes/footerRoutes.tsx file sets which component will be shown in which path.
const footerRoutes: RouteProps[] = [
{ path: authPages.loginPage.to, element: null },
{ path: '/*', element: <DefaultFooterTemplate /> },
];You can set the "Footer Templates" to be displayed on the paths you want. If you don't want any "Footer" in a path, you can set the element to null.
If you will have data about the page in "Footer", specify that there will not be any "Footer" in that path with null and define it within the page. So you don't have to worry about moving the data up.