BQ27BAY4YH5HKFES4GCUXACCTTS65ERU4U77OERXYQFK23BUE4RAC
'@typescript-eslint/eslint-plugin': 5.42.1_rmayb2veg2btbq6mbmnyivgasy
'@typescript-eslint/eslint-plugin-tslint': 5.42.1_rmayb2veg2btbq6mbmnyivgasy
'@typescript-eslint/scope-manager': 5.42.1
'@typescript-eslint/typescript-estree': 5.42.1_typescript@4.8.4
'@typescript-eslint/utils': 5.42.1_rmayb2veg2btbq6mbmnyivgasy
/@eslint/eslintrc/0.4.3:
resolution: {integrity: sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==}
engines: {node: ^10.12.0 || >=12.0.0}
/@eslint/eslintrc/1.3.3:
resolution: {integrity: sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
/@humanwhocodes/config-array/0.5.0:
resolution: {integrity: sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==}
/@humanwhocodes/config-array/0.11.7:
resolution: {integrity: sha512-kBbPWzN8oVMLb0hOUYXhmxggL/1cJE6ydvjDIGi9EnAGUyA7cLVKQg+d/Dsm+KZwx2czGHrCmMVLiyg8s5JPKw==}
/@typescript-eslint/parser/5.42.0_3rubbgt5ekhqrcgx4uwls3neim:
/@typescript-eslint/eslint-plugin-tslint/5.42.1_rmayb2veg2btbq6mbmnyivgasy:
resolution: {integrity: sha512-mwvffan3Ylj2uPxhLzkujHI6PJYBq9MNLP9B8nsbltKETctJ8HkY23FjTrq0eKh0WdgheAQf35PRWRE7BHSquQ==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
tslint: ^5.0.0 || ^6.0.0
typescript: '*'
dependencies:
'@typescript-eslint/utils': 5.42.1_rmayb2veg2btbq6mbmnyivgasy
eslint: 8.27.0
lodash: 4.17.21
typescript: 4.8.4
transitivePeerDependencies:
- supports-color
dev: true
/@typescript-eslint/eslint-plugin/5.42.1_rmayb2veg2btbq6mbmnyivgasy:
resolution: {integrity: sha512-LyR6x784JCiJ1j6sH5Y0K6cdExqCCm8DJUTcwG5ThNXJj/G8o5E56u5EdG4SLy+bZAwZBswC+GYn3eGdttBVCg==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
'@typescript-eslint/parser': ^5.0.0
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
typescript: '*'
peerDependenciesMeta:
typescript:
optional: true
dependencies:
'@typescript-eslint/scope-manager': 5.42.1
'@typescript-eslint/type-utils': 5.42.1_rmayb2veg2btbq6mbmnyivgasy
'@typescript-eslint/utils': 5.42.1_rmayb2veg2btbq6mbmnyivgasy
debug: 4.3.4
eslint: 8.27.0
ignore: 5.2.0
natural-compare-lite: 1.4.0
regexpp: 3.2.0
semver: 7.3.8
tsutils: 3.21.0_typescript@4.8.4
typescript: 4.8.4
transitivePeerDependencies:
- supports-color
dev: true
/@typescript-eslint/parser/5.42.0_rmayb2veg2btbq6mbmnyivgasy:
/@typescript-eslint/scope-manager/5.42.1:
resolution: {integrity: sha512-QAZY/CBP1Emx4rzxurgqj3rUinfsh/6mvuKbLNMfJMMKYLRBfweus8brgXF8f64ABkIZ3zdj2/rYYtF8eiuksQ==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies:
'@typescript-eslint/types': 5.42.1
'@typescript-eslint/visitor-keys': 5.42.1
dev: true
/@typescript-eslint/type-utils/5.42.1_rmayb2veg2btbq6mbmnyivgasy:
resolution: {integrity: sha512-WWiMChneex5w4xPIX56SSnQQo0tEOy5ZV2dqmj8Z371LJ0E+aymWD25JQ/l4FOuuX+Q49A7pzh/CGIQflxMVXg==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
eslint: '*'
typescript: '*'
peerDependenciesMeta:
typescript:
optional: true
dependencies:
'@typescript-eslint/typescript-estree': 5.42.1_typescript@4.8.4
'@typescript-eslint/utils': 5.42.1_rmayb2veg2btbq6mbmnyivgasy
debug: 4.3.4
eslint: 8.27.0
tsutils: 3.21.0_typescript@4.8.4
typescript: 4.8.4
transitivePeerDependencies:
- supports-color
dev: true
/@typescript-eslint/typescript-estree/5.42.1_typescript@4.8.4:
resolution: {integrity: sha512-qElc0bDOuO0B8wDhhW4mYVgi/LZL+igPwXtV87n69/kYC/7NG3MES0jHxJNCr4EP7kY1XVsRy8C/u3DYeTKQmw==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
typescript: '*'
peerDependenciesMeta:
typescript:
optional: true
dependencies:
'@typescript-eslint/types': 5.42.1
'@typescript-eslint/visitor-keys': 5.42.1
debug: 4.3.4
globby: 11.1.0
is-glob: 4.0.3
semver: 7.3.8
tsutils: 3.21.0_typescript@4.8.4
typescript: 4.8.4
transitivePeerDependencies:
- supports-color
dev: true
/@typescript-eslint/utils/5.42.1_rmayb2veg2btbq6mbmnyivgasy:
resolution: {integrity: sha512-Gxvf12xSp3iYZd/fLqiQRD4uKZjDNR01bQ+j8zvhPjpsZ4HmvEFL/tC4amGNyxN9Rq+iqvpHLhlqx6KTxz9ZyQ==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
dependencies:
'@types/json-schema': 7.0.11
'@types/semver': 7.3.13
'@typescript-eslint/scope-manager': 5.42.1
'@typescript-eslint/types': 5.42.1
'@typescript-eslint/typescript-estree': 5.42.1_typescript@4.8.4
eslint: 8.27.0
eslint-scope: 5.1.1
eslint-utils: 3.0.0_eslint@8.27.0
semver: 7.3.8
transitivePeerDependencies:
- supports-color
- typescript
dev: true
/acorn-jsx/5.3.2_acorn@7.4.1:
/@typescript-eslint/visitor-keys/5.42.1:
resolution: {integrity: sha512-LOQtSF4z+hejmpUvitPlc4hA7ERGoj2BVkesOcG91HCn8edLGUXbTrErmutmPbl8Bo9HjAvOO/zBKQHExXNA2A==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies:
'@typescript-eslint/types': 5.42.1
eslint-visitor-keys: 3.3.0
dev: true
/acorn-jsx/5.3.2_acorn@8.8.1:
/argparse/1.0.10:
resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
dependencies:
sprintf-js: 1.0.3
dev: false
/argparse/2.0.1:
resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
eslint-import-resolver-typescript: 2.7.1_hpmu7kn6tcn2vnxpfzvv33bxmy
eslint-plugin-import: 2.26.0_ahzhtd7l5tu6kgxltpsxz2gtcq
eslint-plugin-jsx-a11y: 6.6.1_eslint@7.32.0
eslint-plugin-react: 7.31.10_eslint@7.32.0
eslint-plugin-react-hooks: 4.6.0_eslint@7.32.0
eslint-import-resolver-typescript: 2.7.1_dcpv4nbdr5ks2h5677xdltrk6e
eslint-plugin-import: 2.26.0_romlmcqxgn73as23be7rkr3tde
eslint-plugin-jsx-a11y: 6.6.1_eslint@8.27.0
eslint-plugin-react: 7.31.10_eslint@8.27.0
eslint-plugin-react-hooks: 4.6.0_eslint@8.27.0
/eslint-plugin-react-hooks/4.6.0_eslint@7.32.0:
/eslint-plugin-prettier/4.2.1_v7o5sx5x3wbs57ifz6wc4f76we:
resolution: {integrity: sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==}
engines: {node: '>=12.0.0'}
peerDependencies:
eslint: '>=7.28.0'
eslint-config-prettier: '*'
prettier: '>=2.0.0'
peerDependenciesMeta:
eslint-config-prettier:
optional: true
dependencies:
eslint: 8.27.0
eslint-config-prettier: 8.5.0_eslint@8.27.0
prettier: 2.7.1
prettier-linter-helpers: 1.0.0
dev: true
/eslint-plugin-react-hooks/4.6.0_eslint@8.27.0:
/eslint-utils/2.1.0:
resolution: {integrity: sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==}
engines: {node: '>=6'}
/eslint-scope/7.1.1:
resolution: {integrity: sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
/eslint-visitor-keys/1.3.0:
resolution: {integrity: sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==}
engines: {node: '>=4'}
dev: false
/eslint-utils/3.0.0_eslint@8.27.0:
resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
peerDependencies:
eslint: '>=5'
dependencies:
eslint: 8.27.0
eslint-visitor-keys: 2.1.0
/eslint/7.32.0:
resolution: {integrity: sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==}
engines: {node: ^10.12.0 || >=12.0.0}
/eslint/8.27.0:
resolution: {integrity: sha512-0y1bfG2ho7mty+SiILVf9PfuRA49ek4Nc60Wmmu62QlobNR+CeXa4xXIJgcuwSQgZiWaPH+5BDsctpIW0PR/wQ==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
/espree/7.3.1:
resolution: {integrity: sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==}
engines: {node: ^10.12.0 || >=12.0.0}
/espree/9.4.1:
resolution: {integrity: sha512-XwctdmTO6SIvCzd9810yyNzIrOrqNYV9Koizx4C/mRhf9uq0o4yHoCEU/670pOxOL/MSraektvSAji79kX90Vg==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
/js-yaml/3.14.1:
resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
/js-yaml/4.1.0:
resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
dev: false
/p-limit/3.1.0:
resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
engines: {node: '>=10'}
dependencies:
yocto-queue: 0.1.0
/p-locate/5.0.0:
resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
engines: {node: '>=10'}
dependencies:
p-limit: 3.1.0
/sprintf-js/1.0.3:
resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
dev: false
/string-width/4.2.3:
resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
engines: {node: '>=8'}
dependencies:
emoji-regex: 8.0.0
is-fullwidth-code-point: 3.0.0
strip-ansi: 6.0.1
dev: false
dev: false
/table/6.8.0:
resolution: {integrity: sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==}
engines: {node: '>=10.0.0'}
dependencies:
ajv: 8.11.0
lodash.truncate: 4.4.2
slice-ansi: 4.0.0
string-width: 4.2.3
strip-ansi: 6.0.1
/yocto-queue/0.1.0:
resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
engines: {node: '>=10'}
export default function () {}
type Item = any;
export const cmpById = (lhsItem: Item, rhsItem: Item) =>
lhsItem.id === rhsItem.id ? 0 : lhsItem.id > rhsItem.id ? 1 : -1;
// Should be called on creation
export const defaultItem = () => ({
id: -1,
name: 'noname',
path: 'unknown',
extension: null,
parent: 'root',
isVisible: true,
isOpen: false,
isFolder: false,
children: [],
depth: -1,
});
declare function setTree(tree: Item[]): Item[];
declare function fetchFile(name: string): void;
declare const data: Item[];
export const reduceTree = (selectedNode: Item) =>
!selectedNode.isFolder
? fetchFile(selectedNode)
: (childrenId => {
setTree(
data.map(item =>
item.id === selectedNode.id
? { ...item, isOpen: !selectedNode.isOpen }
: childrenId.includes(item.id)
? childrenId.push(item.id) && {
...item,
isVisible: !item.isVisible,
}
: item,
),
);
})(selectedNode.children);
// const reduceTree0 = (selectedNode: Item) => {
// if (selectedNode.isFolder) {
// let tree0: Item[];
// const childrenId = selectedNode.children;
// if (selectedNode.isOpen) {
// tree0 = data.map((item: Item) => {
// if (item.id === selectedNode.id) {
// return { ...item, isOpen: !selectedNode.isOpen };
// }
// if (childrenId.includes(item.id)) {
// childrenId.push(item.id);
// return { ...item, isVisible: !selectedNode.isOpen };
// }
// return item;
// });
// } else {
// tree0 = data.map((item: Item) => {
// if (item.id === selectedNode.id) {
// return { ...item, isOpen: !selectedNode.isOpen };
// }
// if (childrenId.includes(item.id)) {
// childrenId.push(item.id);
// return { ...item, isVisible: !selectedNode.isOpen };
// }
// return item;
// });
// }
// setTree(tree0);
// } else {
// fetchFile(selectedNode);
// }
// };
[
{
"id": 1,
"name": "readme",
"path": "/readme.md",
"extension": "md",
"parent": "root",
"isVisible": true,
"isOpen": true,
"isFolder": false,
"children": [],
"depth": 1
},
{
"id": 2,
"name": "index",
"path": "/index.js",
"extension": "js",
"parent": "root",
"isVisible": true,
"isOpen": true,
"isFolder": false,
"children": [],
"depth": 1
},
{
"id": 3,
"name": "page",
"path": "/page",
"extension": null,
"parent": "root",
"isVisible": true,
"isOpen": true,
"isFolder": true,
"children": [4, 5],
"depth": 1
},
{
"id": 4,
"name": "error",
"path": "/page/error.tsx",
"extension": "tsx",
"parent": "page",
"isVisible": true,
"isOpen": true,
"isFolder": false,
"children": [],
"depth": 2
},
{
"id": 5,
"name": "layout",
"path": "/page/layout.tsx",
"extension": "tsx",
"parent": "page",
"isVisible": true,
"isOpen": true,
"isFolder": false,
"children": [],
"depth": 2
}
]
import { StateT, Ressource } from './provider'
import { createContext, useContext, Dispatch } from 'react'
export type Action =
| { type: 'clickOnDir'; ressource: Ressource }
| { type: 'defaultState' }
export type ReducerCtxT = {
state: StateT
dispatch: Dispatch<Action>
}
export const ReducerCtx = createContext<Partial<ReducerCtxT>>({})
export const useReducerCtx = () => useContext(ReducerCtx)
export function reducer(state: StateT, action: Action): StateT {
switch (action.type) {
case 'clickOnDir': {
const { ressources } = state
const newRessourcesFn =
(selectedDir: Ressource) => (childrenId: number[]) =>
ressources.map(ressource =>
ressource.id === selectedDir.id
? { ...ressource, isOpen: !selectedDir.isOpen }
: childrenId.includes(ressource.id)
? childrenId.push(ressource.id) && {
...ressource,
isVisible: !selectedDir.isOpen,
}
: ressource,
)
const newRessources = newRessourcesFn(action.ressource)([
...action.ressource.childrenIds,
])
return {
...state,
ressources: newRessources,
}
}
case 'defaultState': {
const { ressources, config } = state
const newRessources = ressources.map(res =>
res.depth > config.defaultDepth
? { ...res, isVisible: false, isOpen: false }
: res,
)
return {
...state,
ressources: newRessources,
}
}
default:
state
}
}
import { createContext, useContext } from 'react'
export type Ressource = {
id: number
name: string
path: string
extension?: string
isVisible: boolean
isOpen?: boolean
isDir: boolean
childrenIds?: number[]
depth: number
}
export type Ressources = Ressource[]
export type ConfigT = {
indent: number
defaultDepth: number
defaultRes: Ressource
}
export type StateT = {
config: ConfigT
ressources: Ressources
}
export const fetchRessources = async (): Promise<Ressources> =>
fetch('http://127.0.0.1:2000/api/ressources')
.then(response => response.json())
.then(json => json.ressources)
export const initState = async (): Promise<StateT> => {
const ressources = await fetchRessources()
return {
config: {
indent: 12,
defaultDepth: 1,
defaultRes: ressources.at(0),
},
ressources,
}
}
export type DataCtxT = {
data: StateT
}
export const DataCtx = createContext<Partial<DataCtxT>>({})
export const useDataCtx = () => useContext(DataCtx)
import { Fragment, useEffect, useState } from 'react';
// import data from './data.json';
const data = [
{
id: 1,
name: 'page',
path: '/page',
extension: null,
isVisible: true,
isOpen: false,
isFolder: true,
children: [2, 3],
depth: 1,
},
{
id: 2,
name: 'error',
path: '/page/error.tsx',
extension: 'tsx',
isVisible: true,
isOpen: true,
isFolder: false,
children: [],
depth: 2,
},
{
id: 3,
name: 'layout',
path: '/page/layout.tsx',
extension: 'tsx',
isVisible: true,
isOpen: true,
isFolder: false,
children: [],
depth: 2,
},
{
id: 4,
name: 'index',
path: '/index.js',
extension: 'js',
isVisible: true,
isOpen: true,
isFolder: false,
children: [],
depth: 1,
},
{
id: 5,
name: 'readme',
path: '/readme.md',
extension: 'md',
isVisible: true,
isOpen: true,
isFolder: false,
children: [],
depth: 1,
},
];
import { Fragment } from 'react'
type Item = {
id: number;
name: string;
path: string;
extension: string | null;
isVisible: boolean;
isOpen?: boolean; // Only valide for folder;
isFolder: boolean;
children: number[];
depth: number;
};
return (
<Fragment>
<div key='root' className='indent-0'>
Root
</div>
</Fragment>
)
}
const ViewNode = ({
item,
handler,
indent,
}: {
item: Item;
handler: any;
indent: number;
}) =>
item.isVisible ? (
<div
style={{
marginLeft: `${item.depth * indent}px`,
...(item.isFolder
? { fontWeight: 'bolder' }
: { fontWeight: 'normal' }),
}}
onClick={() => handler(item)}
>
{item.name}
</div>
) : null;
/*
import { Fragment, useReducer } from 'react'
// export default function View({ rawData, fetchFile }) {
export default function View() {
const { defaultDepth, indent } = useConfig();
const ViewRessource = ({ ressource }: { ressource: Ressource }) => {
const {
state: { config },
dispatch,
} = useReducerCtx()
const reduceTree = (selectedNode: Item) =>
!selectedNode.isFolder
? fetchFile(selectedNode)
: (childrenId => {
setTree(
data.map(item =>
item.id === selectedNode.id
? { ...item, isOpen: !selectedNode.isOpen }
: childrenId.includes(item.id)
? childrenId.push(item.id) && {
...item,
isVisible: !selectedNode.isOpen,
}
: item,
),
);
})([...selectedNode.children]);
if (ressource.isDir) {
return ressource.isVisible ? (
<div
style={{
marginLeft: `${ressource.depth * config.indent}px`,
fontWeight: 'bolder',
}}
onClick={() => dispatch({ type: 'clickOnDir', ressource })}
>
{ressource.name}
</div>
) : null
} else {
return ressource.isVisible ? (
<div
style={{
marginLeft: `${ressource.depth * config.indent}px`,
fontWeight: 'normal',
}}
onClick={() => fetchFile(ressource)}
>
{ressource.name}
</div>
) : null
}
}
) : null;
) : null
}
export default function ViewLayout() {
const { data } = useDataCtx()
const [state, dispatch] = useReducer(reducer, data)
return (
<ReducerCtx.Provider value={{ state, dispatch }}>
<Fragment>
<div key='root' className='indent-0'>
Root
</div>
<View />
</Fragment>
</ReducerCtx.Provider>
)
*/
/*
return (
<DataCtx.Provider value={{ data }}>
<div className='m-10 bg-slate-300 text-black h-80 rounded-xl p-5 w-96'>
{children}
</div>
</DataCtx.Provider>
)
*/
const [checked, setChecked] = useState(false);
const [data, setData] = useState<any[]>([]);
const [content, setContent] = useState<string | null>(null);
const [file, setFile] = useState<string | null>(null);
const [checked, setChecked] = useState(false)
const [data, setData] = useState<any[]>([])
const [content, setContent] = useState<string | null>(null)
const [file, setFile] = useState<string | null>(null)
<div className="flex m-10">
<div className="m-5">
<div className="form-control w-44 text-black">
<label className="label cursor-pointer">
<span className="label-text">Show hidden files</span>
<div className='flex m-10'>
<div className='m-5'>
<div className='form-control w-44 text-black'>
<label className='label cursor-pointer'>
<span className='label-text'>Show hidden files</span>
<div className="hero min-h-screen bg-base-200">
<div className="hero-content text-center">
<div className="max-w-md">
<h1 className="text-5xl font-bold">Hello there</h1>
<p className="py-6">
<div className='hero min-h-screen bg-base-200'>
<div className='hero-content text-center'>
<div className='max-w-md'>
<h1 className='text-5xl font-bold'>Hello there</h1>
<p className='py-6'>
<div className="navbar bg-slate-200 text-black">
<div className="navbar-start">
<div className="dropdown">
<label tabIndex={0} className="btn btn-ghost btn-circle">
<div className='navbar bg-slate-200 text-black'>
<div className='navbar-start'>
<div className='dropdown'>
<label tabIndex={0} className='btn btn-ghost btn-circle'>
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
d='M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9'
<span className="footer-title">Services</span>
<a className="link link-hover">Branding</a>
<a className="link link-hover">Design</a>
<a className="link link-hover">Marketing</a>
<a className="link link-hover">Advertisement</a>
<span className='footer-title'>Services</span>
<a className='link link-hover'>Branding</a>
<a className='link link-hover'>Design</a>
<a className='link link-hover'>Marketing</a>
<a className='link link-hover'>Advertisement</a>
<span className="footer-title">Company</span>
<a className="link link-hover">About us</a>
<a className="link link-hover">Contact</a>
<a className="link link-hover">Jobs</a>
<a className="link link-hover">Press kit</a>
<span className='footer-title'>Company</span>
<a className='link link-hover'>About us</a>
<a className='link link-hover'>Contact</a>
<a className='link link-hover'>Jobs</a>
<a className='link link-hover'>Press kit</a>
<span className="footer-title">Legal</span>
<a className="link link-hover">Terms of use</a>
<a className="link link-hover">Privacy policy</a>
<a className="link link-hover">Cookie policy</a>
<span className='footer-title'>Legal</span>
<a className='link link-hover'>Terms of use</a>
<a className='link link-hover'>Privacy policy</a>
<a className='link link-hover'>Cookie policy</a>