Skip to content

Commit 5bf06ea

Browse files
tjtanjintjtanjin
committed
refactor: Cleanup teams page
1 parent b8a6fcd commit 5bf06ea

File tree

15 files changed

+327
-174
lines changed

15 files changed

+327
-174
lines changed

‎README.md

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,29 +12,25 @@
1212
- [Introduction](#introduction)
1313
- [Features](#features)
1414
- [Technologies](#technologies)
15-
- [Quickstart](#quickstart)
16-
- [Documentation](#documentation)
1715
- [Team](#team)
1816
- [Contributing](#contributing)
1917
- [Support](#support)
20-
- [Attributions](#attributions)
2118

2219
### Introduction
2320

24-
The React ChatBotify Gallery is a new project introduced alongside [**v2 of React ChatBotify**](https://medium.com/@tjtanjin/react-chatbotify-v2-beta-release-whats-changed-what-s-new-and-what-s-next-6aec9e049a98). The purpose of the gallery website is to provide developers with a central place for browsing, rating and sharing both themes and plugins. The website comes with an interactive theme preview feature, which allows developers to try out and visualise how the various themes look like. As an added bonus, the website also comes with a theme builder, which allows developers to directly craft and share themes by uploading them on the website.
21+
The React ChatBotify Gallery is a new project introduced alongside [**v2 of React ChatBotify**](https://medium.com/@tjtanjin/react-chatbotify-v2-beta-release-whats-changed-what-s-new-and-what-s-next-6aec9e049a98). The purpose of the gallery website is to provide developers with a central place for reading documentation, trying out live examples, browsing, rating and sharing both themes and plugins. Notably, the website comes with an interactive theme preview feature, which allows developers to try out and visualise how the various themes look like.
2522

2623
Note that this repository contains the code for frontend portion of the gallery project. The backend code for the gallery project is separately maintained [here](https://github.com/tjtanjin/react-chatbotify-gallery-api).
2724

2825
### Features
2926

3027
The React ChatBotify Gallery Website offers the following core features:
3128

32-
- **Theme Previews:** Developers are able to select themes they wish to preview and interact with a live chatbot
33-
- **Theme Builder:** Developers are able to build themes directly via the website and optionally, upload them to share with others
34-
- **Plugin Browsing:** Developers can browse for plugins on the website (potentially try them out via a live preview as well - to be explored)
29+
- **Live Examples:** Developers can try out various features with our suite of live documentation examples
30+
- **Explore Plugins:** Developers can browse for plugins to enhance and extend the functionalities of their chatbot
31+
- **Discover Themes:** Developers are able to select themes they wish to preview and interact with a live chatbot
32+
- **Favorites:** Developers can favorite themes and plugins for them to show up on their profile page
3533
- **GitHub OAuth Login:** Login with GitHub to verify identifies for uploading and rating of themes
36-
- **Authors Leaderboard:** Authors of themes and plugins will be ranked on a leaderboard based on the ratings received and number of themes/plugins contributed
37-
- **Profile Page:** Developers can manage their own themes and plugins on their profile page
3834

3935
The above list is not exhaustive, but represents the majority of the key features for the gallery project.
4036

‎eslint.config.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import reactPlugin from "eslint-plugin-react";
55
import reactHooksPlugin from "eslint-plugin-react-hooks";
66
import reactRefreshPlugin from 'eslint-plugin-react-refresh';
77
import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort';
8-
import sortKeysFixPlugin from 'eslint-plugin-sort-keys-fix';
98

109
export default [
1110
{
@@ -27,7 +26,6 @@ export default [
2726
"@typescript-eslint": typescriptPlugin,
2827
"react": reactPlugin,
2928
"simple-import-sort": simpleImportSortPlugin,
30-
"sort-keys-fix": sortKeysFixPlugin,
3129
"react-hooks": reactHooksPlugin,
3230
"react-refresh": reactRefreshPlugin,
3331
"prettier": prettierPlugin,
@@ -45,7 +43,6 @@ export default [
4543
// Import sorting
4644
"simple-import-sort/imports": "error",
4745
"simple-import-sort/exports": "error",
48-
"sort-keys-fix/sort-keys-fix": "warn",
4946
},
5047
settings: {
5148
react: {

‎package-lock.json

Lines changed: 0 additions & 65 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,6 @@
5858
"eslint-plugin-react-hooks": "^5.1.0",
5959
"eslint-plugin-react-refresh": "^0.4.19",
6060
"eslint-plugin-simple-import-sort": "^12.1.1",
61-
"eslint-plugin-sort-keys-fix": "^1.1.2",
6261
"husky": "^8.0.0",
6362
"postcss": "^8.4.38",
6463
"prettier": "^3.5.3",

‎public/locales/en/components/team.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
"github_profile_link": "GitHub Profile"
44
},
55
"maybe_you_card": {
6-
"learn_more_button": "Learn More"
6+
"reach_out_button": "Reach Out"
77
}
88
}

‎src/App.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,7 @@ import ErrorPage from './pages/Error';
1414
import HomePage from './pages/Home';
1515
import LoginProcessPage from './pages/LoginProcess';
1616
import PluginsPage from './pages/Plugins';
17-
import TeamsPage from './pages/Teams'; // Import the Teams page
18-
import ThemeBuilderPage from './pages/ThemeBuilder';
17+
import TeamsPage from './pages/Teams';
1918
import ThemesPage from './pages/Themes';
2019
import UserProfilePage from './pages/UserProfile';
2120
import ProtectedRoute from './routes/ProtectedRoute';
@@ -77,8 +76,7 @@ const App: React.FC = () => {
7776
{ element: <HomePage />, path: '/' },
7877
{ element: <PluginsPage />, path: '/plugins' },
7978
{ element: <ThemesPage />, path: '/themes' },
80-
{ element: <ThemeBuilderPage />, path: '/theme-builder' },
81-
{ element: <TeamsPage />, path: '/teams' }, // Add the Teams page route
79+
{ element: <TeamsPage />, path: '/teams' },
8280
{
8381
element: <ProtectedRoute element={<UserProfilePage />} />,
8482
path: '/profile',

‎src/components/Home/HistorySection.tsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { Box, Typography } from '@mui/material';
2+
import { Hourglass } from 'lucide-react';
3+
import { useTranslation } from 'react-i18next';
4+
5+
/**
6+
* Briefly shares about the history of the project.
7+
*/
8+
const HistorySection = () => {
9+
// lazy loads translations
10+
const { t } = useTranslation('components/home');
11+
12+
return (
13+
<Box
14+
component="section"
15+
sx={{
16+
alignItems: 'center',
17+
display: 'flex',
18+
flexDirection: 'column',
19+
gap: 4,
20+
textAlign: 'center',
21+
}}
22+
>
23+
{/* Icon */}
24+
<Hourglass
25+
style={{
26+
color: 'secondary.main',
27+
fontSize: '3rem',
28+
transform: 'rotate(12deg)',
29+
}}
30+
/>
31+
{/* Title */}
32+
<Typography
33+
variant="h2"
34+
sx={{
35+
fontSize: '3rem',
36+
fontWeight: 'bold',
37+
}}
38+
>
39+
{t('history_section.title')}
40+
</Typography>
41+
{/* Paragraph */}
42+
<Typography
43+
sx={{
44+
fontSize: { lg: '1.125rem', xs: '1rem' },
45+
maxWidth: 650,
46+
}}
47+
>
48+
{t('history_section.body_text')}
49+
</Typography>
50+
</Box>
51+
);
52+
};
53+
54+
export default HistorySection;

‎src/components/Home/MissionSection.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { Box, Typography } from '@mui/material';
2+
import { Goal } from 'lucide-react';
3+
import { useTranslation } from 'react-i18next';
4+
5+
/**
6+
* Briefly shares on the mission of the project.
7+
*/
8+
const MissionSection = () => {
9+
// lazy loads translations
10+
const { t } = useTranslation('components/home');
11+
12+
return (
13+
<Box
14+
component="section"
15+
sx={{
16+
alignItems: 'center',
17+
display: 'flex',
18+
flexDirection: 'column',
19+
gap: 4,
20+
textAlign: 'center',
21+
}}
22+
>
23+
{/* Icon */}
24+
<Goal
25+
style={{
26+
color: 'secondary.main',
27+
fontSize: '3rem',
28+
}}
29+
/>
30+
{/* Title */}
31+
<Typography
32+
variant="h2"
33+
sx={{
34+
fontSize: '3rem',
35+
fontWeight: 'bold',
36+
}}
37+
>
38+
{t('mission_section.title')}
39+
</Typography>
40+
{/* Paragraph */}
41+
<Typography
42+
sx={{
43+
fontSize: { lg: '1.125rem', xs: '1rem' },
44+
lineHeight: 1.6,
45+
maxWidth: 650,
46+
}}
47+
>
48+
<Box component="span" display="block" sx={{ marginBottom: 2 }}>
49+
{t('mission_section.body_text.1')}
50+
</Box>
51+
<Box component="span" display="block">
52+
{t('mission_section.body_text.2')}
53+
</Box>
54+
</Typography>
55+
</Box>
56+
);
57+
};
58+
59+
export default MissionSection;

‎src/components/NavigationBar/NavigationBar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -153,9 +153,9 @@ const NavigationBar: React.FC<{
153153
<Button component={Link} to="/teams" sx={generalNavLinkSx}>
154154
{t('navigation_bar.teams')}
155155
</Button>
156-
<Button component={Link} to="/theme-builder" sx={generalNavLinkSx}>
156+
{/* <Button component={Link} to="/theme-builder" sx={generalNavLinkSx}>
157157
{t('navigation_bar.theme_builder')}
158-
</Button>
158+
</Button> */}
159159
</Box>
160160

161161
{/* Authentication, community, language & theme controls */}

0 commit comments

Comments
 (0)