https://github.com/goldipl/react-cms-component
React.js CMS component written using React.js, TypeScript, Tailwind CSS.
https://github.com/goldipl/react-cms-component
cms-component react-js tailwind-css typescript
Last synced: 4 months ago
JSON representation
React.js CMS component written using React.js, TypeScript, Tailwind CSS.
- Host: GitHub
- URL: https://github.com/goldipl/react-cms-component
- Owner: goldipl
- Created: 2024-04-25T15:45:00.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-05-16T07:26:39.000Z (about 2 years ago)
- Last Synced: 2025-04-07T11:48:02.844Z (about 1 year ago)
- Topics: cms-component, react-js, tailwind-css, typescript
- Language: TypeScript
- Homepage: https://goldipl.github.io/react-cms-component/
- Size: 8.42 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React.js CMS component
React.js CMS component written using React.js, TypeScript, Tailwind CSS.
Used technlogies:
- React.js
- TypeScript
- Tailwind CSS
There are clickable all of 5 sidebar modals. 4 of them are filled with sample texts but all of them has clickable elements like close icon.
The full function of the task is included in the `SidebarTagsModal.tsx` component.
You can use the search input to find the tags you are interested in by typing a particular letter, these tags will be displayed according to the characters you type, after selecting the tags. You click the save button to save the tags, then you will get the information depending on the number of selected tags.
The component has been styled using Tailwind CSS while maintaining RWD principles, so it displays well on desktop as well as mobile devices.
Sample tags were created in the json file located in `/src/data/tags.json`. You can see all of them below:
```json
[
{ "id": 1, "name": "Gwiazda", "checked": false },
{ "id": 2, "name": "Sejm", "checked": false },
{ "id": 3, "name": "Jarosław Kaczyński", "checked": false },
{ "id": 4, "name": "PiS", "checked": false },
{ "id": 5, "name": "Wybory", "checked": false },
{ "id": 6, "name": "Wakacje", "checked": false },
{ "id": 7, "name": "Majówka", "checked": false },
{ "id": 8, "name": "PO", "checked": false },
{ "id": 9, "name": "Wyjazd", "checked": false },
{ "id": 10, "name": "Kodowanie", "checked": false },
{ "id": 11, "name": "Wybory prezydenckie", "checked": false },
{ "id": 12, "name": "Wybory parlamentarne", "checked": false }
]
```
Let's move on to discuss the main functionality.
The `` has been divided into 3 minor components that make up the full functionality.
- `` - modal creates a main structure containing a modal template with a title and a hook to hide the modal & include main tag component named TagsComponent
- `` - component contains the other 2 components:
- `` - the component responsible for 3 functions such as: CMS AI (currently unavailable), text analysis & the most popular tags
- `` - component, which is used to evaluate the number of selected tags according to a 5-degree scale.
## How to run locally?
Make sure you are in the project folder `react-cms-component`, if no then go into the project folder
```bash
cd './react-cms-component'
```
Type:
```bash
npm i
npm run dev
```
and open
```bash
http://localhost:5173/
```
## Live link
https://goldipl.github.io/react-cms-component/
## Project preview in `.gif` file - desktop version
## Project preview in `.gif` file - mobile version
### Target functionality to be achieved:
## Configuration info - Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level `parserOptions` property like this:
```js
export default {
// other rules...
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
project: ["./tsconfig.json", "./tsconfig.node.json"],
tsconfigRootDir: __dirname,
},
};
```
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list