Commit 3887296f by Sujeeth AV

Initial commit

parent 11bfbe11
{
"todos": [
{
"id": "60f7",
"task": "asdfghj",
"completed": false
},
{
"task": {
"id": "4710",
"task": "rtretrtrtfddfdfddfdfsdfdsfsddfdsfdfddgfdgfgdgdgdnjbhkhfghfghfghfghgfhgfhfhghfghfghfghfghfhfghgfhgfhfghfghgfhtghnmhifs",
"completed": true
},
"id": "4710"
},
{
"task": {
"id": "35f0",
"task": "jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjfgjfgjgghhgffjyfjfjfjfjfjfjfjjfhgfhfgfhfghfhhffghfghgyujiyfghff",
"completed": false
},
"id": "35f0"
},
{
"task": {
"id": "179b",
"task": "sadasf",
"completed": false
},
"id": "179b"
},
{
"id": "999b",
"task": "asdfaesf",
"completed": false
}
]
}
\ No newline at end of file
{
"name": "react",
"name": "todo",
"private": true,
"version": "0.0.0",
"type": "module",
......@@ -10,8 +10,10 @@
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.9.0",
"react": "^19.1.0",
"react-dom": "^19.1.0"
"react-dom": "^19.1.0",
"react-icons": "^5.5.0"
},
"devDependencies": {
"@eslint/js": "^9.25.0",
......
import axios from "axios";
const URL = 'http://192.168.1.64:3000/todos';
export const getTodo = () => axios.get(URL);
export const addTodo = (todo) => axios.post(URL, { task: todo, completed: false });
export const delTodo = (id) => axios.delete(`${URL}/${id}`);
export const uptTodo = (id, updateTodo) => axios.put(`${URL}/${id}`, { task: updateTodo });
import { useState } from 'react'
import { Main } from './Main/Main'
import { Input } from './Component/Input'
function App() {
return (
function App() {
return (
<>
<Main/>
</>
......
input {
height: 30px;
border: 2px solid rgb(193, 190, 190);
}
.button button {
height: 30px;
border: 2px solid rgb(193, 190, 190);
padding: 5px;
}
.button {
display: flex;
justify-content: center;
padding-top: 2rem;
}
ul {
list-style: none;
}
@media (min-width: 768px) {
.container {
max-width: 45rem;
display: flex;
align-items: center;
}
.input {
width: 80%;
padding-left: 1rem;
}
.button {
width: 20%;
display: block;
transform: translateY(-20px);
/* padding-left: 13.5rem; */
padding-right: 1rem;
height: 25px;
border-radius: 0%;
}
}
import React, { useState } from 'react'
import { MdCancel } from "react-icons/md";
import './Input.css';
export const Input = () => {
const[task,setTask]=useState("");
const[store,setStore]=useState([]);
const [upd, setUpd] = useState(null);
const [srt, setSrt] = useState('');
const handlechange=(e)=>{
setTask(e.target.value);
}
const add=()=>{
if(task.trim() =='') return;
setStore([...store, {task}])
setTask("")
console.log(task);
}
const doubleclick = (index, current) => {
setUpd(index);
setSrt(current);
};
const editsubmit = (index) => {
if (srt.trim() === '') return;
const updated = store.map((item, i) =>
i === index ? { task: srt } : item
);
setStore(updated);
setUpd(null);
setSrt('');
};
const delTask = (index) => {
const updated = store.filter((_, i) => i !== index);
setStore(updated);
};
const handleKeyPress = (e, index) => {
if (e.key === 'Enter') {
editsubmit(index);
}
};
return (
<>
<ul>
{store.map((item, index) => (
<li key={index} className="del-item">
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<input type='checkbox' />
{upd === index ? (
<input
type="text"
value={srt}
onChange={(e) => setSrt(e.target.value)}
onBlur={() => editsubmit(index)}
onKeyDown={(e) => handleKeyPress(e, index)}
autoFocus
/>
) : (
<span onDoubleClick={() => doubleclick(index, item.task)}>
{item.task}
</span>
)}
</div>
<button className='del-btn' onClick={() => delTask(index)}>
<MdCancel />
</button>
</li>
))}
</ul>
<div className='input'>
<input type='text' placeholder='Enter Item..' value={task} onChange={handlechange}/>
</div>
<div className='button'>
<button onClick={add}>Submit</button>
</div>
</>
)
}
import React from 'react';
export const Checkbox = ({ checked, onChange, id}) => {
const handleChange = (e) => {
console.log('Checkbox clicked, checked:', e.target.checked);
if (onChange) {
onChange(e);
}
};
return (
<input
type="checkbox"
id={`checkbox-${id}`}
checked={checked}
onChange={handleChange}
className="custom-checkbox"
/>
);
};
\ No newline at end of file
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
color: #333;
}
.MyTask {
max-width: 500px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
h2,
ul,
li,
form,
.merge {
margin: 0;
padding: 0;
}
.Header {
margin-bottom: 1.5rem;
font-size: 1.5rem;
font-weight: 600;
color: #333;
}
ul {
list-style: none;
width: 100%;
padding: 0;
margin: 0 0 1.5rem 0;
}
li {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
margin-bottom: 0.5rem;
box-shadow: 0 1px rgb(217, 217, 217);
}
.todo {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.check {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0; /* Added to prevent overflow */
}
/* Added to prevent checkbox shrinking */
.check input[type="checkbox"] {
flex-shrink: 0;
}
.task {
flex: 1;
cursor: text;
padding: 4px 0;
font-size: 1rem;
white-space: pre-wrap;
word-break: break-word;
margin-left: 1rem;
transition: all 0.3s ease;
}
.task[contenteditable="true"] {
outline: none;
border-bottom: 1px dashed #aaa;
padding: 4px;
display: inline-block;
min-width: 0; /* Changed from 100% to prevent expansion */
width: auto; /* Changed from 0 to allow natural width */
flex-grow: 1; /* Added to take available space */
}
.task[contenteditable="true"]:focus {
user-select: text;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
}
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border: 1px solid #ddd;
border-radius: 4px;
outline: none;
cursor: pointer;
position: relative;
transition: all 0.2s ease;
}
input[type="checkbox"]:hover {
border-color: #888;
}
input[type="checkbox"]:checked {
background-color: white;
border-color: #888;
}
input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 6px;
top: 2px;
width: 6px;
height: 12px;
border: solid #333;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.delete {
border: none;
background: none;
cursor: pointer;
padding: 0;
margin-left: 8px;
color: #888;
transition: color 0.2s ease;
}
.delete:hover {
color: #ff4444;
}
.delete svg {
height: 20px;
width: 20px;
}
.merge {
display: flex;
gap: 10px;
margin-top: 20px;
}
.input {
flex: 1;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 1rem;
transition: border 0.2s ease;
}
.input:focus {
outline: none;
}
.button {
padding: 0 20px;
color: black;
border: none;
border-radius: 6px;
background-color: #fff;
cursor: pointer;
font-size: 1rem;
font-weight: 500;
border: 1px solid #ddd;
}
.todo.completed .task {
text-decoration: line-through;
color: #888;
opacity: 0.8;
}
.error-fallback {
color: #ff4444;
padding: 8px;
border: 1px solid #ffcccc;
background: #fffafa;
}
@media (max-width: 640px) {
.MyTask {
padding: 15px;
}
.task {
padding: 4px 0 10px;
}
.merge {
flex-direction: column;
gap: 0;
}
.button {
padding: 10px;
width: 100%;
}
input[type="checkbox"] {
width: 20px;
height: 20px;
}
}
input {
height: 2.5rem;
max-width: 18.5rem;
box-sizing: border-box;
}
button {
height: 2rem;
text-align: center;
padding: 2px;
}
ul {
word-break: break-word;
max-width: 340px;
}
li {
padding: 0.25rem 0 2px;
max-height: 80vh;
}
[contenteditable]:focus {
outline: none;
border: none;
}
span[contenteditable] {
border-bottom: 1px dashed #ccc;
cursor: text;
}
@media (min-width: 768px) {
.check input {
height: 1.5rem;
width: 1.5rem;
}
.todo {
padding: 0 1.3rem 0;
}
}
import React, { createContext, useState, useRef, useEffect } from 'react';
import './Input.css';
import { getTodo, addTodo, delTodo, uptTodo } from '../API/Api';
import { MdCancel } from "react-icons/md";
import { Header } from '../Header/Header';
import { Checkbox } from './Checkbox';
import { ErrorBoundary } from '../ErrorBoundary';
export const MyTask = createContext();
export const Input = () => {
const [task, setTask] = useState("");
const [store, setStore] = useState([]);
const [editIndex, setEditIndex] = useState(null);
const [editedTask, setEditedTask] = useState("");
const editableRef = useRef(null);
const lastCursorPos = useRef(0);
useEffect(() => {
getTodo().then(res => setStore(res.data));
}, []);
const saveCursorPosition = () => {
if (editableRef.current) {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
const preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(editableRef.current);
preCaretRange.setEnd(range.endContainer, range.endOffset);
lastCursorPos.current = preCaretRange.toString().length;
}
}
};
const restoreCursorPosition = () => {
if (editableRef.current) {
const textNode = editableRef.current.firstChild || editableRef.current;
const range = document.createRange();
const selection = window.getSelection();
let pos = 0;
let found = false;
const findPosition = (node, remainingPos) => {
if (node.nodeType === Node.TEXT_NODE) {
const length = node.nodeValue.length;
if (remainingPos <= length) {
range.setStart(node, remainingPos);
found = true;
return;
}
remainingPos -= length;
} else {
for (let i = 0; i < node.childNodes.length && !found; i++) {
findPosition(node.childNodes[i], remainingPos);
}
}
};
findPosition(editableRef.current, lastCursorPos.current);
if (!found) {
range.selectNodeContents(editableRef.current);
range.collapse(false);
} else {
range.collapse(true);
}
selection.removeAllRanges();
selection.addRange(range);
}
};
useEffect(() => {
if (editableRef.current && editIndex !== null) {
editableRef.current.focus();
setTimeout(restoreCursorPosition, 0);
}
}, [editIndex, editedTask]);
const Change = (e) => setTask(e.target.value);
const Add = async () => {
if (task.trim() === '') return;
const res = await addTodo(task);
setStore([...store, res.data]);
setTask("");
};
const Delete = async (id) => {
const confirmDelete = window.confirm("Are you sure you want to delete?");
if (confirmDelete) {
await delTodo(id);
setStore(store.filter(item => item.id !== id));
}
};
const startEdit = (index) => {
try {
setEditIndex(index);
setEditedTask(store[index].task);
} catch (error) {
console.error("Error in startEdit:", error);
setEditIndex(null);
}
};
const saveEdit = async (index) => {
try {
if (!editedTask.trim()) return;
const todo = store[index];
const updated = { ...todo, task: editedTask };
await uptTodo(todo.id, updated);
const newStore = [...store];
newStore[index] = updated;
setStore(newStore);
setEditIndex(null);
} catch (error) {
console.error("Error saving edit:", error);
}
};
const handleEditInput = (e) => {
saveCursorPosition();
setEditedTask(e.currentTarget.textContent);
};
const toggleComplete = (index) => {
const newStore = [...store];
newStore[index].completed = !newStore[index].completed;
setStore(newStore);
};
return (
<MyTask.Provider value={{ store, setStore }}>
<>
<Header />
<ul className='scroll'>
{store.map((item, index) => (
<li key={item.id} className={`todo ${item.completed ? "completed" : ""}`}>
<div className="check">
<Checkbox
checked={item.completed}
onChange={() => toggleComplete(index)}
id={item.id}
/>
<ErrorBoundary>
{editIndex === index ? (
<span
ref={editableRef}
contentEditable
suppressContentEditableWarning
onBlur={() => saveEdit(index)}
onInput={(e) => setEditedTask(e.currentTarget.textContent)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
e.currentTarget.blur();
}
}}
className={`task ${item.completed ? 'completed' : ''}`}
dangerouslySetInnerHTML={{ __html: editedTask }}
/>
) : (
<span
className={`task ${item.completed ? 'completed' : ''}`}
onClick={() => startEdit(index)}
>
{item.task}
</span>
)}
</ErrorBoundary>
</div>
<button className="delete" onClick={() => Delete(item.id)}>
<MdCancel />
</button>
</li>
))}
</ul>
<form onSubmit={(e) => e.preventDefault()}>
<div className="merge">
<input
type="text"
className="input"
placeholder="Enter Items"
value={task}
onChange={Change}
/>
<button onClick={Add} className="button">
Submit
</button>
</div>
</form>
</>
</MyTask.Provider>
);
};
\ No newline at end of file
import React from 'react';
export class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
console.error("Error caught by ErrorBoundary:", error, errorInfo);
}
render() {
if (this.state.hasError) {
return <div className="error-fallback">Something went wrong with this component.</div>;
}
return this.props.children;
}
}
\ No newline at end of file
import React from 'react'
import React,{useContext} from 'react'
import { MyTask } from '../Components/Input'
export const Header = () => {
const {store}=useContext(MyTask);
console.log('store:',store)
return (
<header>
<h2>You have Todos</h2>
<header className='head'>
<h2>You have {store.length} Todos </h2>
</header>
)
}
* {
padding: 0;
margin: 0;
font-family: sans-serif;
}
.container {
border: 2px solid green;
max-height: 10rem;
height: 10rem;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100%;
margin: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background: #ffffff;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
......@@ -18,11 +14,109 @@ body {
background-size: 10px 10px;
}
.header {
box-shadow: 2px 2px 2px rgb(121, 120, 120);
.container {
width: 100vw;
max-width: 300px;
min-height: 20svh;
margin: 0 auto;
display: flex;
flex-direction: column;
flex-shrink: 1;
}
.head {
width: 100%;
background-color: #ffffff;
font-weight: bold;
font-size: 13px;
box-shadow: 0 1px rgb(217, 217, 217);
color: #000;
text-align: center;
margin-bottom: 1rem;
padding: 1rem;
}
.container {
max-width: 45rem;
min-height: 43svh;
.wrapper {
width: 100%;
max-width: 300px;
margin: 0 auto;
background-color: #ffffff;
display: flex;
padding: 2px;
flex-direction: column;
justify-content: center;
box-shadow: 0 3px 3px rgb(217, 217, 217);
}
input {
max-width: 18.5rem;
padding: 0.4rem;
font-size: 1rem;
margin-bottom: 0.5rem;
}
.button button {
height: 1rem;
width: 18.5rem;
text-align: center;
border: 2px solid rgb(120, 120, 120);
padding: 1px;
cursor: pointer;
background-color: #f0f0f0;
}
ul {
list-style: none;
word-break: break-word;
width: 100%;
max-width: 100%;
padding: 0;
margin-bottom: 0;
}
.scroll {
max-height: 500px;
overflow-y: auto;
padding-right: 6px;
margin-bottom: 0;
}
.merge {
display: flex;
flex-direction: column;
width: 100%;
}
@media (min-width: 768px) {
.wrapper {
display: flex;
justify-content: space-between;
max-width: 650px;
min-height: 15svh;
align-items: unset;
}
.container {
max-width: 750px;
min-height: 25svh;
}
input {
width: 75%;
max-width: unset;
margin-top: 0.5rem;
}
.input {
margin-left: 1.3rem;
}
button {
height: 2.5rem;
margin-top: 0.47rem;
width: 15%;
}
.delete {
width: 2%;
}
.merge {
flex-direction: row;
width: 98.5%;
margin: 0;
}
.check {
gap: 0;
}
}
import React from 'react'
import { Input } from '../Components/Input'
import './Main.css'
import { Input } from '../Component/Input'
import { Header } from '../Top-level/Header'
export const Main = () => {
return (
<>
<div className='header'>
<Header/>
</div>
<div className='container'>
<Input/>
<div className='wrapper'>
<Input/>
</div>
</>
</div></>
)
}
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
......
......@@ -4,4 +4,8 @@ import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
server: {
host: true, // or '0.0.0.0' for external access
port: 5173
}
})
{
"name": "TODO",
"lockfileVersion": 3,
"requires": true,
"packages": {
"node_modules/react": {
"version": "19.1.0",
"resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
"integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/react-icons": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
"integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
"license": "MIT",
"peerDependencies": {
"react": "*"
}
}
}
}
Copyright 2018 kamijin_fanta <kamijin@live.jp>
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
---
Icons are taken from the other projects
so please check each project licences accordingly.
Circum Icons - https://circumicons.com/
License: MPL-2.0 license https://github.com/Klarr-Agency/Circum-Icons/blob/main/LICENSE
Font Awesome 5 - https://fontawesome.com/
License: CC BY 4.0 License https://creativecommons.org/licenses/by/4.0/
Font Awesome 6 - https://fontawesome.com/
License: CC BY 4.0 License https://creativecommons.org/licenses/by/4.0/
Ionicons 4 - https://ionicons.com/
License: MIT https://github.com/ionic-team/ionicons/blob/master/LICENSE
Ionicons 5 - https://ionicons.com/
License: MIT https://github.com/ionic-team/ionicons/blob/master/LICENSE
Material Design icons - http://google.github.io/material-design-icons/
License: Apache License Version 2.0 https://github.com/google/material-design-icons/blob/master/LICENSE
Typicons - http://s-ings.com/typicons/
License: CC BY-SA 3.0 https://creativecommons.org/licenses/by-sa/3.0/
Github Octicons icons - https://octicons.github.com/
License: MIT https://github.com/primer/octicons/blob/master/LICENSE
Feather - https://feathericons.com/
License: MIT https://github.com/feathericons/feather/blob/master/LICENSE
Lucide - https://lucide.dev/
License: ISC https://github.com/lucide-icons/lucide/blob/main/LICENSE
Game Icons - https://game-icons.net/
License: CC BY 3.0 https://creativecommons.org/licenses/by/3.0/
Weather Icons - https://erikflowers.github.io/weather-icons/
License: SIL OFL 1.1 http://scripts.sil.org/OFL
Devicons - https://vorillaz.github.io/devicons/
License: MIT https://opensource.org/licenses/MIT
Ant Design Icons - https://github.com/ant-design/ant-design-icons
License: MIT https://opensource.org/licenses/MIT
Bootstrap Icons - https://github.com/twbs/icons
License: MIT https://opensource.org/licenses/MIT
Remix Icon - https://github.com/Remix-Design/RemixIcon
License: Apache License Version 2.0 http://www.apache.org/licenses/
Flat Color Icons - https://github.com/icons8/flat-color-icons
License: MIT https://opensource.org/licenses/MIT
Grommet-Icons - https://github.com/grommet/grommet-icons
License: Apache License Version 2.0 http://www.apache.org/licenses/
Heroicons - https://github.com/tailwindlabs/heroicons
License: MIT https://opensource.org/licenses/MIT
Heroicons 2 - https://github.com/tailwindlabs/heroicons
License: MIT https://opensource.org/licenses/MIT
Simple Icons - https://simpleicons.org/
License: CC0 1.0 Universal https://creativecommons.org/publicdomain/zero/1.0/
Simple Line Icons - https://thesabbir.github.io/simple-line-icons/
License: MIT https://opensource.org/licenses/MIT
IcoMoon Free - https://github.com/Keyamoon/IcoMoon-Free
License: CC BY 4.0 License https://github.com/Keyamoon/IcoMoon-Free/blob/master/License.txt
BoxIcons - https://github.com/atisawd/boxicons
License: MIT https://github.com/atisawd/boxicons/blob/master/LICENSE
css.gg - https://github.com/astrit/css.gg
License: MIT https://opensource.org/licenses/MIT
VS Code Icons - https://github.com/microsoft/vscode-codicons
License: CC BY 4.0 https://creativecommons.org/licenses/by/4.0/
Tabler Icons - https://github.com/tabler/tabler-icons
License: MIT https://opensource.org/licenses/MIT
Themify Icons - https://github.com/lykmapipo/themify-icons
License: MIT https://github.com/thecreation/standard-icons/blob/master/modules/themify-icons/LICENSE
Radix Icons - https://icons.radix-ui.com
License: MIT https://github.com/radix-ui/icons/blob/master/LICENSE
Phosphor Icons - https://github.com/phosphor-icons/core
License: MIT https://github.com/phosphor-icons/core/blob/main/LICENSE
Icons8 Line Awesome - https://icons8.com/line-awesome
License: MIT https://github.com/icons8/line-awesome/blob/master/LICENSE.md
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"sideEffects": false,
"module": "./index.mjs"
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"sideEffects": false,
"module": "./index.mjs"
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"sideEffects": false,
"module": "./index.mjs"
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"sideEffects": false,
"module": "./index.mjs"
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"sideEffects": false,
"module": "./index.mjs"
}
// THIS FILE IS AUTO GENERATED
import type { IconType } from '../lib/index'
export declare const DiAndroid: IconType;
export declare const DiAngularSimple: IconType;
export declare const DiAppcelerator: IconType;
export declare const DiApple: IconType;
export declare const DiAppstore: IconType;
export declare const DiAptana: IconType;
export declare const DiAsterisk: IconType;
export declare const DiAtlassian: IconType;
export declare const DiAtom: IconType;
export declare const DiAws: IconType;
export declare const DiBackbone: IconType;
export declare const DiBingSmall: IconType;
export declare const DiBintray: IconType;
export declare const DiBitbucket: IconType;
export declare const DiBlackberry: IconType;
export declare const DiBootstrap: IconType;
export declare const DiBower: IconType;
export declare const DiBrackets: IconType;
export declare const DiBugsense: IconType;
export declare const DiCelluloid: IconType;
export declare const DiChrome: IconType;
export declare const DiCisco: IconType;
export declare const DiClojureAlt: IconType;
export declare const DiClojure: IconType;
export declare const DiCloud9: IconType;
export declare const DiCoda: IconType;
export declare const DiCodeBadge: IconType;
export declare const DiCode: IconType;
export declare const DiCodeigniter: IconType;
export declare const DiCodepen: IconType;
export declare const DiCodrops: IconType;
export declare const DiCoffeescript: IconType;
export declare const DiCompass: IconType;
export declare const DiComposer: IconType;
export declare const DiCreativecommonsBadge: IconType;
export declare const DiCreativecommons: IconType;
export declare const DiCssTricks: IconType;
export declare const DiCss3Full: IconType;
export declare const DiCss3: IconType;
export declare const DiCssdeck: IconType;
export declare const DiDart: IconType;
export declare const DiDatabase: IconType;
export declare const DiDebian: IconType;
export declare const DiDigitalOcean: IconType;
export declare const DiDjango: IconType;
export declare const DiDlang: IconType;
export declare const DiDocker: IconType;
export declare const DiDoctrine: IconType;
export declare const DiDojo: IconType;
export declare const DiDotnet: IconType;
export declare const DiDreamweaver: IconType;
export declare const DiDropbox: IconType;
export declare const DiDrupal: IconType;
export declare const DiEclipse: IconType;
export declare const DiEmber: IconType;
export declare const DiEnvato: IconType;
export declare const DiErlang: IconType;
export declare const DiExtjs: IconType;
export declare const DiFirebase: IconType;
export declare const DiFirefox: IconType;
export declare const DiFsharp: IconType;
export declare const DiGhostSmall: IconType;
export declare const DiGhost: IconType;
export declare const DiGitBranch: IconType;
export declare const DiGitCommit: IconType;
export declare const DiGitCompare: IconType;
export declare const DiGitMerge: IconType;
export declare const DiGitPullRequest: IconType;
export declare const DiGit: IconType;
export declare const DiGithubAlt: IconType;
export declare const DiGithubBadge: IconType;
export declare const DiGithubFull: IconType;
export declare const DiGithub: IconType;
export declare const DiGnu: IconType;
export declare const DiGo: IconType;
export declare const DiGoogleAnalytics: IconType;
export declare const DiGoogleDrive: IconType;
export declare const DiGoogleCloudPlatform: IconType;
export declare const DiGrails: IconType;
export declare const DiGroovy: IconType;
export declare const DiGrunt: IconType;
export declare const DiGulp: IconType;
export declare const DiHackernews: IconType;
export declare const DiHaskell: IconType;
export declare const DiHeroku: IconType;
export declare const DiHtml53dEffects: IconType;
export declare const DiHtml5Connectivity: IconType;
export declare const DiHtml5DeviceAccess: IconType;
export declare const DiHtml5Multimedia: IconType;
export declare const DiHtml5: IconType;
export declare const DiIe: IconType;
export declare const DiIllustrator: IconType;
export declare const DiIntellij: IconType;
export declare const DiIonic: IconType;
export declare const DiJava: IconType;
export declare const DiJavascript1: IconType;
export declare const DiJavascript: IconType;
export declare const DiJekyllSmall: IconType;
export declare const DiJenkins: IconType;
export declare const DiJira: IconType;
export declare const DiJoomla: IconType;
export declare const DiJqueryLogo: IconType;
export declare const DiJqueryUiLogo: IconType;
export declare const DiJsBadge: IconType;
export declare const DiKomodo: IconType;
export declare const DiKrakenjsBadge: IconType;
export declare const DiKrakenjs: IconType;
export declare const DiLaravel: IconType;
export declare const DiLess: IconType;
export declare const DiLinux: IconType;
export declare const DiMagento: IconType;
export declare const DiMailchimp: IconType;
export declare const DiMarkdown: IconType;
export declare const DiMaterializecss: IconType;
export declare const DiMeteor: IconType;
export declare const DiMeteorfull: IconType;
export declare const DiMitlicence: IconType;
export declare const DiModernizr: IconType;
export declare const DiMongodb: IconType;
export declare const DiMootoolsBadge: IconType;
export declare const DiMootools: IconType;
export declare const DiMozilla: IconType;
export declare const DiMsqlServer: IconType;
export declare const DiMysql: IconType;
export declare const DiNancy: IconType;
export declare const DiNetbeans: IconType;
export declare const DiNetmagazine: IconType;
export declare const DiNginx: IconType;
export declare const DiNodejsSmall: IconType;
export declare const DiNodejs: IconType;
export declare const DiNpm: IconType;
export declare const DiOnedrive: IconType;
export declare const DiOpenshift: IconType;
export declare const DiOpensource: IconType;
export declare const DiOpera: IconType;
export declare const DiPerl: IconType;
export declare const DiPhonegap: IconType;
export declare const DiPhotoshop: IconType;
export declare const DiPhp: IconType;
export declare const DiPostgresql: IconType;
export declare const DiProlog: IconType;
export declare const DiPython: IconType;
export declare const DiRackspace: IconType;
export declare const DiRaphael: IconType;
export declare const DiRasberryPi: IconType;
export declare const DiReact: IconType;
export declare const DiRedhat: IconType;
export declare const DiRedis: IconType;
export declare const DiRequirejs: IconType;
export declare const DiResponsive: IconType;
export declare const DiRor: IconType;
export declare const DiRubyRough: IconType;
export declare const DiRuby: IconType;
export declare const DiRust: IconType;
export declare const DiSafari: IconType;
export declare const DiSass: IconType;
export declare const DiScala: IconType;
export declare const DiScriptcs: IconType;
export declare const DiScrum: IconType;
export declare const DiSenchatouch: IconType;
export declare const DiSizzlejs: IconType;
export declare const DiSmashingMagazine: IconType;
export declare const DiSnapSvg: IconType;
export declare const DiSpark: IconType;
export declare const DiSqllite: IconType;
export declare const DiStackoverflow: IconType;
export declare const DiStreamline: IconType;
export declare const DiStylus: IconType;
export declare const DiSublime: IconType;
export declare const DiSwift: IconType;
export declare const DiSymfonyBadge: IconType;
export declare const DiSymfony: IconType;
export declare const DiTechcrunch: IconType;
export declare const DiTerminalBadge: IconType;
export declare const DiTerminal: IconType;
export declare const DiTravis: IconType;
export declare const DiTrello: IconType;
export declare const DiTypo3: IconType;
export declare const DiUbuntu: IconType;
export declare const DiUikit: IconType;
export declare const DiUnitySmall: IconType;
export declare const DiVim: IconType;
export declare const DiVisualstudio: IconType;
export declare const DiW3C: IconType;
export declare const DiWebplatform: IconType;
export declare const DiWindows: IconType;
export declare const DiWordpress: IconType;
export declare const DiYahooSmall: IconType;
export declare const DiYahoo: IconType;
export declare const DiYeoman: IconType;
export declare const DiYii: IconType;
export declare const DiZend: IconType;
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"sideEffects": false,
"module": "./index.mjs"
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"sideEffects": false,
"module": "./index.mjs"
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"sideEffects": false,
"module": "./index.mjs"
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"sideEffects": false,
"module": "./index.mjs"
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"sideEffects": false,
"module": "./index.mjs"
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"sideEffects": false,
"module": "./index.mjs"
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"sideEffects": false,
"module": "./index.mjs"
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"sideEffects": false,
"module": "./index.mjs"
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"sideEffects": false,
"module": "./index.mjs"
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"sideEffects": false,
"module": "./index.mjs"
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"sideEffects": false,
"module": "./index.mjs"
}
// THIS FILE IS AUTO GENERATED
export * from './lib/index';
\ No newline at end of file
// THIS FILE IS AUTO GENERATED
module.exports = require('./lib/index.js');
\ No newline at end of file
// THIS FILE IS AUTO GENERATED
export * from './lib/index.mjs';
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"sideEffects": false,
"module": "./index.mjs"
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"sideEffects": false,
"module": "./index.mjs"
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"sideEffects": false,
"module": "./index.mjs"
}
import * as React from "react";
export interface IconTree {
tag: string;
attr: {
[key: string]: string;
};
child: IconTree[];
}
export declare function GenIcon(data: IconTree): (props: IconBaseProps) => React.JSX.Element;
export interface IconBaseProps extends React.SVGAttributes<SVGElement> {
children?: React.ReactNode;
size?: string | number;
color?: string;
title?: string;
}
export type IconType = (props: IconBaseProps) => React.ReactNode;
export declare function IconBase(props: IconBaseProps & {
attr?: Record<string, string>;
}): JSX.Element;
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment