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.0tslint: ^5.0.0 || ^6.0.0typescript: '*'dependencies:'@typescript-eslint/utils': 5.42.1_rmayb2veg2btbq6mbmnyivgasyeslint: 8.27.0lodash: 4.17.21typescript: 4.8.4transitivePeerDependencies:- supports-colordev: 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.0eslint: ^6.0.0 || ^7.0.0 || ^8.0.0typescript: '*'peerDependenciesMeta:typescript:optional: truedependencies:'@typescript-eslint/scope-manager': 5.42.1'@typescript-eslint/type-utils': 5.42.1_rmayb2veg2btbq6mbmnyivgasy'@typescript-eslint/utils': 5.42.1_rmayb2veg2btbq6mbmnyivgasydebug: 4.3.4eslint: 8.27.0ignore: 5.2.0natural-compare-lite: 1.4.0regexpp: 3.2.0semver: 7.3.8tsutils: 3.21.0_typescript@4.8.4typescript: 4.8.4transitivePeerDependencies:- supports-colordev: 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.1dev: 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: truedependencies:'@typescript-eslint/typescript-estree': 5.42.1_typescript@4.8.4'@typescript-eslint/utils': 5.42.1_rmayb2veg2btbq6mbmnyivgasydebug: 4.3.4eslint: 8.27.0tsutils: 3.21.0_typescript@4.8.4typescript: 4.8.4transitivePeerDependencies:- supports-colordev: 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: truedependencies:'@typescript-eslint/types': 5.42.1'@typescript-eslint/visitor-keys': 5.42.1debug: 4.3.4globby: 11.1.0is-glob: 4.0.3semver: 7.3.8tsutils: 3.21.0_typescript@4.8.4typescript: 4.8.4transitivePeerDependencies:- supports-colordev: 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.0dependencies:'@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.4eslint: 8.27.0eslint-scope: 5.1.1eslint-utils: 3.0.0_eslint@8.27.0semver: 7.3.8transitivePeerDependencies:- supports-color- typescriptdev: 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.1eslint-visitor-keys: 3.3.0dev: 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.3dev: false
/argparse/2.0.1:resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
eslint-import-resolver-typescript: 2.7.1_hpmu7kn6tcn2vnxpfzvv33bxmyeslint-plugin-import: 2.26.0_ahzhtd7l5tu6kgxltpsxz2gtcqeslint-plugin-jsx-a11y: 6.6.1_eslint@7.32.0eslint-plugin-react: 7.31.10_eslint@7.32.0eslint-plugin-react-hooks: 4.6.0_eslint@7.32.0
eslint-import-resolver-typescript: 2.7.1_dcpv4nbdr5ks2h5677xdltrk6eeslint-plugin-import: 2.26.0_romlmcqxgn73as23be7rkr3tdeeslint-plugin-jsx-a11y: 6.6.1_eslint@8.27.0eslint-plugin-react: 7.31.10_eslint@8.27.0eslint-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: truedependencies:eslint: 8.27.0eslint-config-prettier: 8.5.0_eslint@8.27.0prettier: 2.7.1prettier-linter-helpers: 1.0.0dev: 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.0eslint-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.0is-fullwidth-code-point: 3.0.0strip-ansi: 6.0.1dev: false
dev: false/table/6.8.0:resolution: {integrity: sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==}engines: {node: '>=10.0.0'}dependencies:ajv: 8.11.0lodash.truncate: 4.4.2slice-ansi: 4.0.0string-width: 4.2.3strip-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 creationexport 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: StateTdispatch: 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 } = stateconst 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 } = stateconst 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: numbername: stringpath: stringextension?: stringisVisible: booleanisOpen?: booleanisDir: booleanchildrenIds?: number[]depth: number}export type Ressources = Ressource[]export type ConfigT = {indent: numberdefaultDepth: numberdefaultRes: Ressource}export type StateT = {config: ConfigTressources: 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 ? (<divstyle={{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 ? (<divstyle={{marginLeft: `${ressource.depth * config.indent}px`,fontWeight: 'bolder',}}onClick={() => dispatch({ type: 'clickOnDir', ressource })}>{ressource.name}</div>) : null} else {return ressource.isVisible ? (<divstyle={{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>