├── postcss.config.js
├── vite.config.js
├── src
├── index.css
├── App.jsx
├── main.jsx
├── components
│ ├── Background.jsx
│ ├── ParentComponent.jsx
│ ├── Foreground.jsx
│ └── Card.jsx
├── App.css
└── assets
│ └── react.svg
├── tailwind.config.js
├── README.md
├── .gitignore
├── index.html
├── .eslintrc.cjs
├── package.json
└── public
└── vite.svg
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | *{
6 | font-family:Arial, Helvetica, sans-serif;
7 | }
8 |
9 |
10 | ::selection{
11 | color: rgb(232, 145, 47);
12 | }
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: [
4 | "./index.html",
5 | "./src/**/*.{js,ts,jsx,tsx}",
6 | ],
7 | theme: {
8 | extend: {},
9 | },
10 | plugins: [],
11 | }
12 |
13 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 |
2 | import React from 'react';
3 | import ParentComponent from './components/ParentComponent';
4 |
5 | function App() {
6 | return (
7 |
10 | );
11 | }
12 |
13 | export default App;
14 |
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | =======
3 | # Doc-Notes
4 | Doc-Notes is a sleek and interactive React application designed to streamline your note-taking experience. With its intuitive user interface and dynamic features, organizing your thoughts has never been easier.
5 | >>>>>>> 3ec5fdd975883cbe04946863e844bec834d46dd7
6 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/components/Background.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | function Background() {
4 | return (
5 | <>
6 |
7 |
8 | Notes
9 |
10 |
11 | Docs.
12 |
13 |
24 |
25 |
26 |
27 | {cards.map(card => (
28 |
29 | deleteCard(card.id)} />
30 |
31 | ))}
32 |
33 |
30 | {data.map((item, index) => (
31 |
32 | ))}
33 |
34 | );
35 | }
36 |
37 | export default Foreground;
38 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Card.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { PiFilesFill } from "react-icons/pi";
3 | import { PiDownload } from "react-icons/pi";
4 | import { IoClose } from "react-icons/io5";
5 | import { motion } from "framer-motion";
6 | import { saveAs } from "file-saver";
7 |
8 | function Card({ id, data, reference }) {
9 | const [inputText, setInputText] = useState("");
10 | const [fileSize, setFileSize] = useState(data.filesize);
11 |
12 | useEffect(() => {
13 |
14 | const savedData = localStorage.getItem(`cardInputText_${id}`);
15 | if (savedData) {
16 | setInputText(savedData);
17 | setFileSize(`${savedData.length} characters`);
18 | }
19 | }, [id]);
20 |
21 | const handleInputChange = (e) => {
22 | const text = e.target.value;
23 | setInputText(text);
24 |
25 | setFileSize(`${text.length} characters`);
26 |
27 | localStorage.setItem(`cardInputText_${id}`, text);
28 | };
29 |
30 | const handleDownload = () => {
31 |
32 | const blob = new Blob([inputText], { type: "text/plain;charset=utf-8" });
33 |
34 | saveAs(blob, `card_content_${id}.txt`);
35 | };
36 |
37 | const handleDelete = () => {
38 |
39 | localStorage.removeItem(`cardInputText_${id}`);
40 |
41 | };
42 |
43 | return (
44 |
52 |
53 |
54 |
61 |
62 |
63 |
64 |
{fileSize}
65 |
66 |
67 | {data.close ? : }
68 |
69 |
70 | {data.tag.isOpen && (
71 |
72 |
{data.tag.tagTitle}
73 |
74 | )}
75 |