1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[58094],{81536:function(s,e,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/file-tree-view-react",function(){return n(226)}])},226:function(s,e,n){"use strict";n.r(e),n.d(e,{__N_SSG:function(){return j},default:function(){return N},metadata:function(){return c}});var l=n(85893),a=n(91644),i=n(47185),j=!0;let c={date:"2020-02-11",metaTitle:"Building File tree view in React and Electron",description:"Building File tree view in React and Electron",keywords:"React, Electron, File tree view"},r=function(s){let{children:e}=s;return(0,l.jsx)(i.Z,{title:c.metaTitle,date:c.date,children:e})};function M(s){let e={a:"a",code:"code",h2:"h2",h3:"h3",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",span:"span",ul:"ul",...(0,a.a)(),...s.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(e.p,{children:"THe goal is to build file panel similar to what you see in Visual Studio code on the left."}),"\n",(0,l.jsx)(e.p,{children:(0,l.jsx)(e.img,{src:"/file_tree.png",alt:"File tree vsCode",title:"File Tree VSCode"})}),"\n",(0,l.jsx)(e.p,{children:"We'll try to avoid ready-to-use components like material-ui and build it from scratch."}),"\n",(0,l.jsx)(e.p,{children:"Requirements:"}),"\n",(0,l.jsxs)(e.ul,{children:["\n",(0,l.jsx)(e.li,{children:"different icons for different file types"}),"\n",(0,l.jsx)(e.li,{children:"folders can be expanded and collapsed"}),"\n",(0,l.jsxs)(e.li,{children:["entire file tree can be massive so we only render what is visible to users (think ",(0,l.jsx)(e.code,{children:"node_modules"})," folder)"]}),"\n",(0,l.jsx)(e.li,{children:"selected and hover state for folders and files"}),"\n",(0,l.jsx)(e.li,{children:"fires 'selected' event"}),"\n"]}),"\n",(0,l.jsx)(e.p,{children:"Here is what we'll cover:"}),"\n",(0,l.jsxs)(e.ul,{children:["\n",(0,l.jsx)(e.li,{children:"setup development environment"}),"\n",(0,l.jsx)(e.li,{children:"build basic tree view component that uses static json"}),"\n",(0,l.jsx)(e.li,{children:"read folders/files to update the json used by previous step"}),"\n",(0,l.jsx)(e.li,{children:"polish and style it"}),"\n"]}),"\n",(0,l.jsx)(e.hr,{}),"\n",(0,l.jsx)(e.h2,{children:"Setup Environment"}),"\n",(0,l.jsxs)(e.p,{children:["I used ",(0,l.jsx)(e.code,{children:"electron react boilerplate"})," and it was easy to get started."]}),"\n",(0,l.jsx)(e.p,{children:"TBD more steps here and some picture."}),"\n",(0,l.jsx)(e.hr,{}),"\n",(0,l.jsx)(e.h2,{children:"Basic Tree View component that uses static JSON structure"}),"\n",(0,l.jsx)(e.p,{children:"Let's assume this is a structure we want to use to represent file tree:"}),"\n",(0,l.jsx)(e.pre,{children:(0,l.jsxs)(e.code,{className:"hljs language-javascript",children:[(0,l.jsx)(e.span,{className:"hljs-keyword",children:"var"})," sampleTreeStructure = {\n ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"name"'}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"src"'}),",\n ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"fullpath"'}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"/project/src"'}),",\n ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"type"'}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"folder"'}),",\n ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"files"'}),": [\n {\n ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"name"'}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"index.html"'}),",\n ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"fullpath"'}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"/project/src/index.html"'}),",\n ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"type"'}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"file"'}),",\n ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"filetype"'}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"html"'}),"\n },\n {\n ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"name"'}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"main.css"'}),",\n ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"fullpath"'}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"/project/src/main.css"'}),",\n ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"type"'}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"file"'}),",\n ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"filetype"'}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"css"'}),"\n },\n {\n ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"name"'}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"pages"'}),",\n ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"fullpath"'}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"/project/src/pages"'}),",\n ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"type"'}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"folder"'}),",\n ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"files"'}),": [\n {\n ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"name"'}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"about.html"'}),",\n ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"fullpath"'}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"/project/src/pages/about.html"'}),",\n ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"type"'}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"file"'}),",\n ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"filetype"'}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"html"'}),"\n }\n ]\n }\n ]\n}\n"]})}),"\n",(0,l.jsx)(e.p,{children:"Simple react component to render this into a tree could look like this:"}),"\n",(0,l.jsx)(e.pre,{children:(0,l.jsxs)(e.code,{className:"hljs language-javascript",children:[(0,l.jsx)(e.span,{className:"hljs-keyword",children:"export"})," ",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"default"})," ",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"function"})," ",(0,l.jsx)(e.span,{className:"hljs-title function_",children:"TreeView"}),"(",(0,l.jsx)(e.span,{className:"hljs-params",children:"{file}"}),") {\n\n ",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"var"})," files = file.",(0,l.jsx)(e.span,{className:"hljs-property",children:"files"})," || [];\n\n ",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"return"})," ",(0,l.jsxs)(e.span,{className:"xml",children:[(0,l.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,l.jsx)(e.span,{className:"hljs-name",children:"div"}),">"]}),"\n {file.name}\n ",(0,l.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,l.jsx)(e.span,{className:"hljs-name",children:"ul"}),">"]}),"\n {files.map(f => ",(0,l.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,l.jsx)(e.span,{className:"hljs-name",children:"li"}),">"]}),"\n ",(0,l.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,l.jsx)(e.span,{className:"hljs-name",children:"TreeView"})," ",(0,l.jsx)(e.span,{className:"hljs-attr",children:"file"}),"=",(0,l.jsx)(e.span,{className:"hljs-string",children:"{f}"})," />"]}),"\n ",(0,l.jsxs)(e.span,{className:"hljs-tag",children:["</",(0,l.jsx)(e.span,{className:"hljs-name",children:"li"}),">"]}),")}\n ",(0,l.jsxs)(e.span,{className:"hljs-tag",children:["</",(0,l.jsx)(e.span,{className:"hljs-name",children:"ul"}),">"]}),"\n ",(0,l.jsxs)(e.span,{className:"hljs-tag",children:["</",(0,l.jsx)(e.span,{className:"hljs-name",children:"div"}),">"]})]}),"\n}\n"]})}),"\n",(0,l.jsx)(e.p,{children:"which looks like this."}),"\n",(0,l.jsx)(e.p,{children:(0,l.jsx)(e.img,{src:"/file_tree_1.png",alt:"File tree vsCode",title:"File Tree VSCode"})}),"\n",(0,l.jsx)(e.p,{children:"let's add simple UI icons, add hover state and make lines clickable and folders expandable."}),"\n",(0,l.jsx)(e.p,{children:"wrapping the filename into a separate div with icon inside:"}),"\n",(0,l.jsx)(e.pre,{children:(0,l.jsxs)(e.code,{className:"hljs language-javascript",children:[(0,l.jsx)(e.span,{className:"hljs-keyword",children:"export"})," ",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"default"})," ",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"function"})," ",(0,l.jsx)(e.span,{className:"hljs-title function_",children:"TreeView"}),"(",(0,l.jsx)(e.span,{className:"hljs-params",children:"{file}"}),") {\n\n ",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"var"})," files = file.",(0,l.jsx)(e.span,{className:"hljs-property",children:"files"})," || [];\n\n ",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"var"})," iconClass = file.",(0,l.jsx)(e.span,{className:"hljs-property",children:"type"})," === ",(0,l.jsx)(e.span,{className:"hljs-string",children:"'folder'"})," ? ",(0,l.jsx)(e.span,{className:"hljs-string",children:"'icon-folder'"})," : ",(0,l.jsxs)(e.span,{className:"hljs-string",children:["`icon-",(0,l.jsx)(e.span,{className:"hljs-subst",children:"${file.filetype}"}),"`"]}),";\n\n ",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"const"})," [open, setOpen] = ",(0,l.jsx)(e.span,{className:"hljs-title function_",children:"useState"}),"(",(0,l.jsx)(e.span,{className:"hljs-literal",children:"false"}),");\n\n ",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"const"})," onLineClicked = ",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"function"}),"(",(0,l.jsx)(e.span,{className:"hljs-params"}),") {\n ",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"if"})," (file.",(0,l.jsx)(e.span,{className:"hljs-property",children:"type"})," === ",(0,l.jsx)(e.span,{className:"hljs-string",children:"'folder'"}),") {\n ",(0,l.jsx)(e.span,{className:"hljs-title function_",children:"setOpen"}),"(!open);\n }\n }\n\n ",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"return"})," ",(0,l.jsxs)(e.span,{className:"xml",children:[(0,l.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,l.jsx)(e.span,{className:"hljs-name",children:"div"}),">"]}),"\n ",(0,l.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,l.jsx)(e.span,{className:"hljs-name",children:"div"})," ",(0,l.jsx)(e.span,{className:"hljs-attr",children:"className"}),"=",(0,l.jsx)(e.span,{className:"hljs-string",children:'"file-row"'})," ",(0,l.jsx)(e.span,{className:"hljs-attr",children:"onClick"}),"=",(0,l.jsx)(e.span,{className:"hljs-string",children:"{onLineClicked}"}),">"]}),"\n ",(0,l.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,l.jsx)(e.span,{className:"hljs-name",children:"span"})," ",(0,l.jsx)(e.span,{className:"hljs-attr",children:"className"}),"=",(0,l.jsx)(e.span,{className:"hljs-string",children:"{"}),"`${",(0,l.jsx)(e.span,{className:"hljs-attr",children:"iconClass"}),"} ",(0,l.jsx)(e.span,{className:"hljs-attr",children:"file-icon"}),"`}>"]}),(0,l.jsxs)(e.span,{className:"hljs-tag",children:["</",(0,l.jsx)(e.span,{className:"hljs-name",children:"span"}),">"]}),"\n {file.name}\n ",(0,l.jsxs)(e.span,{className:"hljs-tag",children:["</",(0,l.jsx)(e.span,{className:"hljs-name",children:"div"}),">"]}),"\n {open &&\n ",(0,l.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,l.jsx)(e.span,{className:"hljs-name",children:"ul"}),">"]}),"\n {files.map(f => ",(0,l.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,l.jsx)(e.span,{className:"hljs-name",children:"li"}),">"]}),"\n ",(0,l.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,l.jsx)(e.span,{className:"hljs-name",children:"TreeView"})," ",(0,l.jsx)(e.span,{className:"hljs-attr",children:"file"}),"=",(0,l.jsx)(e.span,{className:"hljs-string",children:"{f}"})," />"]}),"\n ",(0,l.jsxs)(e.span,{className:"hljs-tag",children:["</",(0,l.jsx)(e.span,{className:"hljs-name",children:"li"}),">"]}),")}\n ",(0,l.jsxs)(e.span,{className:"hljs-tag",children:["</",(0,l.jsx)(e.span,{className:"hljs-name",children:"ul"}),">"]}),"\n }\n ",(0,l.jsxs)(e.span,{className:"hljs-tag",children:["</",(0,l.jsx)(e.span,{className:"hljs-name",children:"div"}),">"]})]}),"\n}\n"]})}),"\n",(0,l.jsx)(e.p,{children:"setup icons in CSS:"}),"\n",(0,l.jsx)(e.pre,{children:(0,l.jsxs)(e.code,{className:"hljs language-css",children:[(0,l.jsx)(e.span,{className:"hljs-selector-class",children:".file-icon"})," {\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"display"}),": inline-block;\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"width"}),": ",(0,l.jsx)(e.span,{className:"hljs-number",children:"20px"}),";\n}\n\n",(0,l.jsx)(e.span,{className:"hljs-selector-class",children:".icon-folder"}),(0,l.jsx)(e.span,{className:"hljs-selector-pseudo",children:":before"})," {\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"content"}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"\\1F4C1"'}),";\n}\n\n",(0,l.jsx)(e.span,{className:"hljs-selector-class",children:".icon-html"}),(0,l.jsx)(e.span,{className:"hljs-selector-pseudo",children:":before"})," {\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"content"}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"<>"'}),";\n}\n\n",(0,l.jsx)(e.span,{className:"hljs-selector-class",children:".icon-js"}),(0,l.jsx)(e.span,{className:"hljs-selector-pseudo",children:":before"})," {\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"content"}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"JS"'}),";\n}\n",(0,l.jsx)(e.span,{className:"hljs-selector-class",children:".icon-css"}),(0,l.jsx)(e.span,{className:"hljs-selector-pseudo",children:":before"})," {\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"content"}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:'"#"'}),";\n}\n\n",(0,l.jsx)(e.span,{className:"hljs-selector-class",children:".file-row"}),(0,l.jsx)(e.span,{className:"hljs-selector-pseudo",children:":hover"})," {\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"background-color"}),":green;\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"cursor"}),":pointer;\n}\n"]})}),"\n",(0,l.jsx)(e.p,{children:(0,l.jsx)(e.img,{src:"/file_tree_2.png",alt:"File tree vsCode",title:"File Tree VSCode"})}),"\n",(0,l.jsxs)(e.p,{children:["let's make child files loaded lazily.\nwe'll have ",(0,l.jsx)(e.code,{children:"fetchChildren"})," children to load files from a folder."]}
1),"\n",(0,l.jsx)(e.p,{children:"for now let's use local state"}),"\n",(0,l.jsx)(e.pre,{children:(0,l.jsx)(e.code,{children:" const [files, setFiles] = useState(null);\n const onLineClicked = function() {\n if (file.type === 'folder') {\n if (!open && !files) {\n fetchChildren(file).then(childFiles => {\n setFiles(childFiles);\n });\n }\n setOpen(!open);\n }\n }\n"})}),"\n",(0,l.jsx)(e.p,{children:"now the props the component takes are:"}),"\n",(0,l.jsx)(e.pre,{children:(0,l.jsxs)(e.code,{className:"hljs language-javascript",children:["<",(0,l.jsx)(e.span,{className:"hljs-title class_",children:"TreeView"}),"\n file={rootFolder}\n fetchChildren={fetchChildren}\n/>\n"]})}),"\n",(0,l.jsx)(e.hr,{}),"\n",(0,l.jsx)(e.h2,{children:"file system into structure"}),"\n",(0,l.jsxs)(e.p,{children:["I'll use ",(0,l.jsx)(e.code,{children:"fs"})," sync APIs just to keep code simpler."]}),"\n",(0,l.jsx)(e.p,{children:"As we mentioned above, we need to implement 2 things for our component to work:"}),"\n",(0,l.jsx)(e.pre,{children:(0,l.jsx)(e.code,{children:"file - root folder JSON\nfetchChildren - function that reads files from folder and returns json.\n"})}),"\n",(0,l.jsx)(e.pre,{children:(0,l.jsxs)(e.code,{className:"hljs language-javascript",children:["\n",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"function"})," ",(0,l.jsx)(e.span,{className:"hljs-title function_",children:"toFileObj"}),"(",(0,l.jsx)(e.span,{className:"hljs-params",children:"file, path"}),") {\n ",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"const"})," fullpath = ",(0,l.jsxs)(e.span,{className:"hljs-string",children:["`",(0,l.jsx)(e.span,{className:"hljs-subst",children:"${path}"}),"/",(0,l.jsx)(e.span,{className:"hljs-subst",children:"${file.name}"}),"`"]}),";\n ",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"const"})," f = ",(0,l.jsx)(e.span,{className:"hljs-title function_",children:"parse"}),"(fullpath);\n ",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"return"})," {\n ",(0,l.jsx)(e.span,{className:"hljs-attr",children:"name"}),": file.",(0,l.jsx)(e.span,{className:"hljs-property",children:"name"}),", \n ",(0,l.jsx)(e.span,{className:"hljs-attr",children:"fullpath"}),": fullpath,\n ",(0,l.jsx)(e.span,{className:"hljs-attr",children:"type"}),": file.",(0,l.jsx)(e.span,{className:"hljs-title function_",children:"isDirectory"}),"() ? ",(0,l.jsx)(e.span,{className:"hljs-string",children:"'folder'"})," : ",(0,l.jsx)(e.span,{className:"hljs-string",children:"'file'"}),",\n ",(0,l.jsx)(e.span,{className:"hljs-attr",children:"filetype"}),": !file.",(0,l.jsx)(e.span,{className:"hljs-title function_",children:"isDirectory"}),"() && f.",(0,l.jsx)(e.span,{className:"hljs-property",children:"ext"})," ? f.",(0,l.jsx)(e.span,{className:"hljs-property",children:"ext"}),".",(0,l.jsx)(e.span,{className:"hljs-title function_",children:"substring"}),"(",(0,l.jsx)(e.span,{className:"hljs-number",children:"1"}),") : ",(0,l.jsx)(e.span,{className:"hljs-string",children:"''"}),"\n }\n}\n\n\n",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"function"})," ",(0,l.jsx)(e.span,{className:"hljs-title function_",children:"fetchChildren"}),"(",(0,l.jsx)(e.span,{className:"hljs-params",children:"file"}),") {\n ",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"return"})," ",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"new"})," ",(0,l.jsx)(e.span,{className:"hljs-title class_",children:"Promise"}),"(",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"function"}),"(",(0,l.jsx)(e.span,{className:"hljs-params",children:"resolve, reject"}),"){\n ",(0,l.jsx)(e.span,{className:"hljs-title function_",children:"readdir"}),"(file.",(0,l.jsx)(e.span,{className:"hljs-property",children:"fullpath"}),", { ",(0,l.jsx)(e.span,{className:"hljs-attr",children:"withFileTypes"}),": ",(0,l.jsx)(e.span,{className:"hljs-literal",children:"true"})," }, ",(0,l.jsxs)(e.span,{className:"hljs-function",children:["(",(0,l.jsx)(e.span,{className:"hljs-params",children:"err, files"}),") =>"]})," {\n ",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"const"})," fileObjs = files.",(0,l.jsx)(e.span,{className:"hljs-title function_",children:"map"}),"(",(0,l.jsxs)(e.span,{className:"hljs-function",children:[(0,l.jsx)(e.span,{className:"hljs-params",children:"f"})," =>"]})," ",(0,l.jsx)(e.span,{className:"hljs-title function_",children:"toFileObj"}),"(f, file.",(0,l.jsx)(e.span,{className:"hljs-property",children:"fullpath"}),"));\n ",(0,l.jsx)(e.span,{className:"hljs-title function_",children:"resolve"}),"(fileObjs);\n });\n });\n}\n\n",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"function"})," ",(0,l.jsx)(e.span,{className:"hljs-title function_",children:"constructOriginalFile"}),"(",(0,l.jsx)(e.span,{className:"hljs-params",children:"path"}),") {\n ",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"const"})," f = ",(0,l.jsx)(e.span,{className:"hljs-title function_",children:"parse"}),"(path);\n ",(0,l.jsx)(e.span,{className:"hljs-keyword",children:"return"})," {\n ",(0,l.jsx)(e.span,{className:"hljs-attr",children:"fullpath"}),": path,\n ",(0,l.jsx)(e.span,{className:"hljs-attr",children:"name"}),": f.",(0,l.jsx)(e.span,{className:"hljs-property",children:"base"}),",\n ",(0,l.jsx)(e.span,{className:"hljs-attr",children:"type"}),": ",(0,l.jsx)(e.span,{className:"hljs-string",children:"'folder'"}),",\n }\n}\n"]})}),"\n",(0,l.jsx)(e.hr,{}),"\n",(0,l.jsx)(e.h3,{children:"prettify it"}),"\n",(0,l.jsx)(e.p,{children:"could things we want to do:"}),"\n",(0,l.jsxs)(e.ul,{children:["\n",(0,l.jsx)(e.li,{children:"set boundearies + scroll bar"}),"\n",(0,l.jsx)(e.li,{children:"cute icons for each file type"}),"\n",(0,l.jsx)(e.li,{children:"folder open/closed icons"}),"\n",(0,l.jsx)(e.li,{children:"nice indentations"}),"\n"]}),"\n",(0,l.jsx)(e.pre,{children:(0,l.jsxs)(e.code,{className:"hljs language-css",children:["\n",(0,l.jsx)(e.span,{className:"hljs-selector-class",children:".file-icon"})," {\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"background-repeat"}),": no-repeat;\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"padding-left"}),":",(0,l.jsx)(e.span,{className:"hljs-number",children:"20px"}),"; ",(0,l.jsx)(e.span,{className:"hljs-comment",children:"/*for bg icon*/"}),"\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"padding-top"}),":",(0,l.jsx)(e.span,{className:"hljs-number",children:"3px"}),";\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"padding-bottom"}),":",(0,l.jsx)(e.span,{className:"hljs-number",children:"3px"}),";\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"background-position"}),": ",(0,l.jsx)(e.span,{className:"hljs-number",children:"0"})," ",(0,l.jsx)(e.span,{className:"hljs-number",children:"50%"}),";\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"background-size"}),": ",(0,l.jsx)(e.span,{className:"hljs-number",children:"20px"})," ",(0,l.jsx)(e.span,{className:"hljs-number",children:"20px"}),";\n}\n\n",(0,l.jsx)(e.span,{className:"hljs-selector-class",children:".icon-folder"})," {\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"background-image"}),": ",(0,l.jsx)(e.span,{className:"hljs-built_in",children:"url"}),"(",(0,l.jsx)(e.span,{className:"hljs-string",children:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMC4wNzIyIDguMDIzOTdMNS43MTQ4NCAzLjY2NjY2TDYuMzMzNTYgMy4wNDc5NEwxMS4wMDAyIDcuNzE0NjFWOC4zMzMzM0w2LjMzMzU2IDEzTDUuNzE0ODQgMTIuMzgxM0wxMC4wNzIyIDguMDIzOTdaIiBmaWxsPSIjNDI0MjQyIi8+Cjwvc3ZnPg=="}),");\n}\n\n",(0,l.jsx)(e.span,{className:"hljs-selector-class",children:".icon-folder-open"})," {\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"background-image"}),": ",(0,l.jsx)(e.span,{className:"hljs-built_in",children:"url"}),"(",(0,l.jsx)(e.span,{className:"hljs-string",children:"data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNy45NzYzNyAxMC4wNzE5TDEyLjMzMzcgNS43MTQ2TDEyLjk1MjQgNi4zMzMzMkw4LjI4NTczIDExTDcuNjY3MDEgMTFMMy4wMDAzNCA2LjMzMzMyTDMuNjE5MDYgNS43MTQ2TDcuOTc2MzcgMTAuMDcxOVoiIGZpbGw9IiM0MjQyNDIiLz4KPC9zdmc+"}),");\n}\n\n",(0,l.jsx)(e.span,{className:"hljs-selector-class",children:".icon-json"})," {\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"background-image"}),": ",(0,l.jsx)(e.span,{className:"hljs-built_in",children:"url"}),"(",(0,l.jsx)(e.span,{className:"hljs-string",children:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjAwMDI0IDIuOTgzNjFWMi45NzE4NFYySDUuOTExMDdDNS41OTc2NyAyIDUuMjk0MzEgMi4wNjE2MSA1LjAwMTUyIDIuMTg0NzNDNC43MDg0MiAyLjMwNzk4IDQuNDQ5NjcgMi40ODQ3NCA0LjIyNjAyIDIuNzE0OThDNC4wMDMzNiAyLjk0NDIyIDMuODM4MTYgMy4xOTQ5OCAzLjczMzA2IDMuNDY3NjZMMy43MzI1NyAzLjQ2ODk4QzMuNjM0MDYgMy43MzUyIDMuNTY4MzkgNC4wMTIwMSAz
1LjUzNTU3IDQuMjk5MTdMMy41MzU0MyA0LjMwMDUzQzMuNTA3MDIgNC41ODA1IDMuNDk4OTQgNC44Njg0NCAzLjUxMTA4IDUuMTY0MjhDMy41MjI5NyA1LjQ1Mzc5IDMuNTI4OTEgNS43NDMyOSAzLjUyODkxIDYuMDMyNzlDMy41Mjg5MSA2LjIzNTU2IDMuNDg5OTkgNi40MjU5NCAzLjQxMjI1IDYuNjA1MDdMMy40MTE4NSA2LjYwNjAxQzMuMzM3MTIgNi43ODI5NiAzLjIzNDQ3IDYuOTM4NjYgMy4xMDM0MSA3LjA3MzU5QzIuOTc2NjkgNy4yMDQwNSAyLjgyNDkgNy4zMTA1NSAyLjY0Njk2IDcuMzkyNUMyLjQ3MDg0IDcuNDY5NTQgMi4yODUyMiA3LjUwODIgMi4wODk0MiA3LjUwODJIMi4wMDAyNFY3LjZWOC40VjguNDkxOEgyLjA4OTQyQzIuMjg0OSA4LjQ5MTggMi40NzAyNiA4LjUzMjM4IDIuNjQ2MjUgOC42MTMzNEwyLjY0NzY2IDguNjEzOTZDMi44MjQ4MiA4LjY5MTU3IDIuOTc2MDIgOC43OTc2MiAzLjEwMjQ1IDguOTMxNjFMMy4xMDQzNiA4LjkzMzUyQzMuMjM0NTIgOS4wNjM3IDMuMzM2ODQgOS4yMTg3MSAzLjQxMTUzIDkuMzk5NDJMMy40MTIyNSA5LjQwMTA4QzMuNDkwMTEgOS41ODA0NyAzLjUyODkxIDkuNzY4ODMgMy41Mjg5MSA5Ljk2NzIxQzMuNTI4OTEgMTAuMjU2NyAzLjUyMjk3IDEwLjU0NjIgMy41MTEwOCAxMC44MzU3QzMuNDk4OTQgMTEuMTMxNiAzLjUwNzAxIDExLjQyMTUgMy41MzU0IDExLjcwNTVMMy41MzU2IDExLjcwNzJDMy41Njg0NCAxMS45OTAzIDMuNjM0MTIgMTIuMjY1IDMuNzMyNTYgMTIuNTMxTDMuNzMzMDcgMTIuNTMyM0MzLjgzODE3IDEyLjgwNSA0LjAwMzM2IDEzLjA1NTggNC4yMjYwMiAxMy4yODVDNC40NDk2NyAxMy41MTUzIDQuNzA4NDIgMTMuNjkyIDUuMDAxNTIgMTMuODE1M0M1LjI5NDMxIDEzLjkzODQgNS41OTc2NyAxNCA1LjkxMTA3IDE0SDYuMDAwMjRWMTMuMlYxMy4wMTY0SDUuOTExMDdDNS43MTExOSAxMy4wMTY0IDUuNTIzNzEgMTIuOTc3NyA1LjM0Nzg3IDEyLjkwMDhDNS4xNzQyMSAxMi44MTkxIDUuMDIyMTggMTIuNzEyNiA0Ljg5MTExIDEyLjU4MThDNC43NjQxMSAxMi40NDY5IDQuNjYxMjggMTIuMjkxMSA0LjU4MjQ3IDEyLjExMzdDNC41MDg2MiAxMS45MzQ2IDQuNDcxNTggMTEuNzQ0IDQuNDcxNTggMTEuNTQxQzQuNDcxNTggMTEuMzEyNyA0LjQ3NTU0IDExLjA4ODUgNC40ODM0NiAxMC44Njg2QzQuNDkxNDkgMTAuNjQxMSA0LjQ5MTUxIDEwLjQxOTUgNC40ODM0OSAxMC4yMDM5QzQuNDc5MzggOS45ODI0NiA0LjQ2MTA5IDkuNzY4ODMgNC40Mjg0NyA5LjU2MzEyQzQuMzk1MzcgOS4zNTAyNCA0LjMzOTQ2IDkuMTQ3NTcgNC4yNjA2MyA4Ljk1NTM2QzQuMTgxMTUgOC43NjE1NyA0LjA3MjgyIDguNTc3NDYgMy45MzY0IDguNDAyOThDMy44MjM3IDguMjU4ODEgMy42ODU2MyA4LjEyNDYyIDMuNTIzMDcgOEMzLjY4NTYzIDcuODc1MzggMy44MjM3IDcuNzQxMTkgMy45MzY0IDcuNTk3MDJDNC4wNzI4MiA3LjQyMjU0IDQuMTgxMTUgNy4yMzg0MyA0LjI2MDYzIDcuMDQ0NjRDNC4zMzkzOCA2Ljg1MjYzIDQuMzk1MzcgNi42NTE3NSA0LjQyODUgNi40NDI4NUM0LjQ2MTA3IDYuMjMzMyA0LjQ3OTM4IDYuMDE5NzMgNC40ODM0OSA1LjgwMjE5QzQuNDkxNTEgNS41ODI2MiA0LjQ5MTUgNS4zNjEwNSA0LjQ4MzQ1IDUuMTM3NDlDNC40NzU1NCA0LjkxMzQgNC40NzE1OCA0LjY4NzI1IDQuNDcxNTggNC40NTkwMkM0LjQ3MTU4IDQuMjYwMTkgNC41MDg1NyA0LjA3MTUyIDQuNTgyNjMgMy44OTIwNUM0LjY2MTYgMy43MTAzNCA0Ljc2NDQ1IDMuNTU0NzUgNC44OTExIDMuNDI0MzdDNS4wMjIxOCAzLjI4OTQyIDUuMTc0ODUgMy4xODI3NSA1LjM0ODI2IDMuMTA1MTNDNS41MjQwNCAzLjAyNDI3IDUuNzExMzggMi45ODM2MSA1LjkxMTA3IDIuOTgzNjFINi4wMDAyNFpNMTAuMDAwMiAxMy4wMTY0VjEzLjAyODJWMTRIMTAuMDg5NEMxMC40MDI4IDE0IDEwLjcwNjIgMTMuOTM4NCAxMC45OTkgMTMuODE1M0MxMS4yOTIxIDEzLjY5MiAxMS41NTA4IDEzLjUxNTMgMTEuNzc0NSAxMy4yODVDMTEuOTk3MSAxMy4wNTU4IDEyLjE2MjMgMTIuODA1IDEyLjI2NzQgMTIuNTMyM0wxMi4yNjc5IDEyLjUzMUMxMi4zNjY0IDEyLjI2NDggMTIuNDMyMSAxMS45ODggMTIuNDY0OSAxMS43MDA4TDEyLjQ2NTEgMTEuNjk5NUMxMi40OTM1IDExLjQxOTUgMTIuNTAxNSAxMS4xMzE2IDEyLjQ4OTQgMTAuODM1N0MxMi40Nzc1IDEwLjU0NjIgMTIuNDcxNiAxMC4yNTY3IDEyLjQ3MTYgOS45NjcyMUMxMi40NzE2IDkuNzY0NDQgMTIuNTEwNSA5LjU3NDA2IDEyLjU4ODIgOS4zOTQ5M0wxMi41ODg2IDkuMzkzOTlDMTIuNjYzNCA5LjIxNzA0IDEyLjc2NiA5LjA2MTM0IDEyLjg5NzEgOC45MjY0MkMxMy4wMjM4IDguNzk1OTUgMTMuMTc1NiA4LjY4OTQ1IDEzLjM1MzUgOC42MDc1QzEzLjUyOTYgOC41MzA0NiAxMy43MTUzIDguNDkxOCAxMy45MTExIDguNDkxOEgxNC4wMDAyVjguNFY3LjZWNy41MDgySDEzLjkxMTFDMTMuNzE1NiA3LjUwODIgMTMuNTMwMiA3LjQ2NzYyIDEzLjM1NDIgNy4zODY2NkwxMy4zNTI4IDcuMzg2MDRDMTMuMTc1NyA3LjMwODQ0IDEzLjAyNDUgNy4yMDIzOCAxMi44OTggNy4wNjgzOUwxMi44OTYxIDcuMDY2NDhDMTIuNzY2IDYuOTM2MyAxMi42NjM3IDYuNzgxMjkgMTIuNTg5IDYuNjAwNThMMTIuNTg4MiA2LjU5ODkyQzEyLjUxMDQgNi40MTk1MyAxMi40NzE2IDYuMjMxMTcgMTIuNDcxNiA2LjAzMjc5QzEyLjQ3MTYgNS43NDMyOSAxMi40Nzc1IDUuNDUzNzkgMTIuNDg5NCA1LjE2NDI4QzEyLjUwMTUgNC44Njg0MiAxMi40OTM1IDQuNTc4NDggMTIuNDY1MSA0LjI5NDU0TDEyLjQ2NDkgNC4yOTI4NUMxMi40MzIxIDQuMDA5NzEgMTIuMzY2NCAzLjczNTAyIDEyLjI2NzkgMy40Njg5N0wxMi4yNjc0IDMuNDY3NjZDMTIuMTYyMyAzLjE5NDk5IDExLjk5NzEgMi45NDQyMiAxMS43NzQ1IDIuNzE0OThDMTEuNTUwOCAyLjQ4NDc0IDExLjI5MjEgMi4zMDc5OCAxMC45OTkgMi4xODQ3M0MxMC43MDYyIDIuMDYxNjEgMTAuNDAyOCAyIDEwLjA4OTQgMkgxMC4wMDAyVjIuOFYyLjk4MzYxSDEwLjA4OTRDMTAuMjg5MyAyLjk4MzYxIDEwLjQ3NjggMy4wMjIzIDEwLjY1MjYgMy4wOTkxN0MxMC44MjYzIDMuMTgwOTIgMTAuOTc4MyAzLjI4NzM2IDExLjEwOTQgMy40MTgyM0MxMS4yMzY0IDMuNTUzMDUgMTEuMzM5MiAzLjcwODg5IDExLjQxOCAzLjg4NjI4QzExLjQ5MTkgNC4wNjU0IDExLjUyODkgNC4yNTU5NiAxMS41Mjg5I
1DQuNDU5MDJDMTEuNTI4OSA0LjY4NzI3IDExLjUyNDkgNC45MTE0NSAxMS41MTcgNS4xMzE0MkMxMS41MDkgNS4zNTg5NCAxMS41MDkgNS41ODA0OSAxMS41MTcgNS43OTYwNUMxMS41MjExIDYuMDE3NTQgMTEuNTM5NCA2LjIzMTE3IDExLjU3MiA2LjQzNjg4QzExLjYwNTEgNi42NDk3NiAxMS42NjEgNi44NTI0MyAxMS43Mzk5IDcuMDQ0NjRDMTEuODE5MyA3LjIzODQzIDExLjkyNzcgNy40MjI1NCAxMi4wNjQxIDcuNTk3MDJDMTIuMTc2OCA3Ljc0MTE5IDEyLjMxNDkgNy44NzUzOCAxMi40Nzc0IDhDMTIuMzE0OSA4LjEyNDYyIDEyLjE3NjggOC4yNTg4MSAxMi4wNjQxIDguNDAyOThDMTEuOTI3NyA4LjU3NzQ2IDExLjgxOTMgOC43NjE1NyAxMS43Mzk5IDguOTU1MzZDMTEuNjYxMSA5LjE0NzM3IDExLjYwNTEgOS4zNDgyNSAxMS41NzIgOS41NTcxNUMxMS41Mzk0IDkuNzY2NyAxMS41MjExIDkuOTgwMjcgMTEuNTE3IDEwLjE5NzhDMTEuNTA5IDEwLjQxNzQgMTEuNTA5IDEwLjYzODkgMTEuNTE3IDEwLjg2MjVDMTEuNTI0OSAxMS4wODY2IDExLjUyODkgMTEuMzEyOCAxMS41Mjg5IDExLjU0MUMxMS41Mjg5IDExLjczOTggMTEuNDkxOSAxMS45Mjg1IDExLjQxNzkgMTIuMTA3OUMxMS4zMzg5IDEyLjI4OTcgMTEuMjM2IDEyLjQ0NTIgMTEuMTA5NCAxMi41NzU2QzEwLjk3ODMgMTIuNzEwNiAxMC44MjU2IDEyLjgxNzMgMTAuNjUyMiAxMi44OTQ5QzEwLjQ3NjQgMTIuOTc1NyAxMC4yODkxIDEzLjAxNjQgMTAuMDg5NCAxMy4wMTY0SDEwLjAwMDJaIiBmaWxsPSIjNDI0MjQyIi8+Cjwvc3ZnPg=="}),");\n}\n\n",(0,l.jsx)(e.span,{className:"hljs-selector-class",children:".icon-js"})," {\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"background-image"}),": ",(0,l.jsx)(e.span,{className:"hljs-built_in",children:"url"}),"(",(0,l.jsx)(e.span,{className:"hljs-string",children:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHRpdGxlPmZpbGVfdHlwZV9qc19vZmZpY2lhbDwvdGl0bGU+PHJlY3QgeD0iMiIgeT0iMiIgd2lkdGg9IjI4IiBoZWlnaHQ9IjI4IiBzdHlsZT0iZmlsbDojZjVkZTE5Ii8+PHBhdGggZD0iTTIwLjgwOSwyMy44NzVhMi44NjYsMi44NjYsMCwwLDAsMi42LDEuNmMxLjA5LDAsMS43ODctLjU0NSwxLjc4Ny0xLjMsMC0uOS0uNzE2LTEuMjIyLTEuOTE2LTEuNzQ3bC0uNjU4LS4yODJjLTEuOS0uODA5LTMuMTYtMS44MjItMy4xNi0zLjk2NCwwLTEuOTczLDEuNS0zLjQ3NiwzLjg1My0zLjQ3NmEzLjg4OSwzLjg4OSwwLDAsMSwzLjc0MiwyLjEwN0wyNSwxOC4xMjhBMS43ODksMS43ODksMCwwLDAsMjMuMzExLDE3YTEuMTQ1LDEuMTQ1LDAsMCwwLTEuMjU5LDEuMTI4YzAsLjc4OS40ODksMS4xMDksMS42MTgsMS42bC42NTguMjgyYzIuMjM2Ljk1OSwzLjUsMS45MzYsMy41LDQuMTMzLDAsMi4zNjktMS44NjEsMy42NjctNC4zNiwzLjY2N2E1LjA1NSw1LjA1NSwwLDAsMS00Ljc5NS0yLjY5MVptLTkuMjk1LjIyOGMuNDEzLjczMy43ODksMS4zNTMsMS42OTMsMS4zNTMuODY0LDAsMS40MS0uMzM4LDEuNDEtMS42NTNWMTQuODU2aDIuNjMxdjguOTgyYzAsMi43MjQtMS42LDMuOTY0LTMuOTI5LDMuOTY0YTQuMDg1LDQuMDg1LDAsMCwxLTMuOTQ3LTIuNFoiLz48L3N2Zz4="}),");\n}\n",(0,l.jsx)(e.span,{className:"hljs-selector-class",children:".icon-md"})," {\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"background-image"}),": ",(0,l.jsx)(e.span,{className:"hljs-built_in",children:"url"}),"(",(0,l.jsx)(e.span,{className:"hljs-string",children:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHRpdGxlPmZpbGVfdHlwZV9tYXJrZG93bjwvdGl0bGU+PHJlY3QgeD0iMi41IiB5PSI3Ljk1NSIgd2lkdGg9IjI3IiBoZWlnaHQ9IjE2LjA5MSIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6Izc1NTgzOCIvPjxwb2x5Z29uIHBvaW50cz0iNS45MDkgMjAuNjM2IDUuOTA5IDExLjM2NCA4LjYzNiAxMS4zNjQgMTEuMzY0IDE0Ljc3MyAxNC4wOTEgMTEuMzY0IDE2LjgxOCAxMS4zNjQgMTYuODE4IDIwLjYzNiAxNC4wOTEgMjAuNjM2IDE0LjA5MSAxNS4zMTggMTEuMzY0IDE4LjcyNyA4LjYzNiAxNS4zMTggOC42MzYgMjAuNjM2IDUuOTA5IDIwLjYzNiIgc3R5bGU9ImZpbGw6Izc1NTgzOCIvPjxwb2x5Z29uIHBvaW50cz0iMjIuOTU1IDIwLjYzNiAxOC44NjQgMTYuMTM2IDIxLjU5MSAxNi4xMzYgMjEuNTkxIDExLjM2NCAyNC4zMTggMTEuMzY0IDI0LjMxOCAxNi4xMzYgMjcuMDQ1IDE2LjEzNiAyMi45NTUgMjAuNjM2IiBzdHlsZT0iZmlsbDojNzU1ODM4Ii8+PC9zdmc+"}),");\n}\n",(0,l.jsx)(e.span,{className:"hljs-selector-class",children:".file-row"}),(0,l.jsx)(e.span,{className:"hljs-selector-pseudo",children:":hover"})," {\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"background-color"}),":",(0,l.jsx)(e.span,{className:"hljs-number",children:"#EBEBEB"}),";\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"cursor"}),":pointer;\n}\n\n",(0,l.jsx)(e.span,{className:"hljs-selector-class",children:".tree-view"})," {\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"width"}),": ",(0,l.jsx)(e.span,{className:"hljs-number",children:"400px"}),";\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"height"}),": ",(0,l.jsx)(e.span,{className:"hljs-number",children:"500px"}),";\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"overflow"}),": auto;\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"background-color"}),": white;\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"color"}),": black;\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"padding"}),": ",(0,l.jsx)(e.span,{className:"hljs-number",children:"10px"}),";\n}\n\n\n",(0,l.jsx)(e.span,{className:"hljs-selector-class",children:".tree-view"})," ",(0,l.jsx)(e.span,{className:"hljs-selector-tag",children:"ul"})," {\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"padding"}),": ",(0,l.jsx)(e.span,{className:"hljs-number",children:"0"}),";\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"margin"}),": ",(0,l.jsx)(e.span,{className:"hljs-number",children:"0"}),";\n ",(0,l.jsx)(e.span,{className:"hljs-attribute",children:"padding-left"}),": ",(0,l.jsx)(e.span,{className:"hljs-number",children:"10px"}),";\n}\n"]})}),"\n",(0,l.jsx)(e.p,{children:'"final" look'}),"\n",(0,l.jsx)(e.p,{children:(0,l.jsx)(e.img,{src:"/file_tree_3.png",alt:"File tree vsCode",title:"File Tree VSCode"})}),"\n",(0,l.jsx)(e.hr,{}),"\n",(0,l.jsxs)(e.p,{children:["This article was originally published in ",(0,l.jsx)(e.a,{href:"https://devtoolsdaily.com/blog/gatsby-contact-form-firebase-database",children:"DevToolsDaily blog"})]})]})}function N(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,l.jsx)(r,{...s,children:(0,l.jsx)(M,{...s})})}},47185:function(s,e,n){"use strict";n.d(e,{Z:function(){return M}});var l=n(85893),a=n(43078),i=n(9008),j=n.n(i),c=n(11163);n(48097);let r="https://www.devtoolsdaily.com";function M(s){let{date:e,children:n,title:i,useContainer:M=!0,articleSchema:N}=s,t=(0,c.useRouter)(),h=((null==t?void 0:t.asPath)||"").split("?")[0].split("#")[0],d="".concat(r).concat(h),x=N?JSON.stringify({"@context":"https://schema.org","@type":N.type||"TechArticle",headline:N.title,...N.description?{description:N.description}:{}
1,...N.keywords?{keywords:N.keywords}:{},...N.date?{datePublished:N.date,dateModified:N.date}:{},mainEntityOfPage:{"@type":"WebPage","@id":d},author:{"@type":"Organization",name:"DevTools Daily",url:r},publisher:{"@type":"Organization",name:"DevTools Daily",url:r}}).replace(/</g,"\\u003c"):null,p=h.startsWith("/blog/")&&"/blog/"!==h&&"/blog"!==h?JSON.stringify({"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:[{"@type":"ListItem",position:1,name:"DevTools Daily",item:"".concat(r,"/")},{"@type":"ListItem",position:2,name:"Blog",item:"".concat(r,"/blog/")},{"@type":"ListItem",position:3,name:i,item:d}]}).replace(/</g,"\\u003c"):null,u=M?(0,l.jsxs)(a.W,{className:"blog-article",children:[(0,l.jsx)("h1",{children:i}),(0,l.jsx)("div",{className:"text-sm italic date pb-1 pt-1",children:e}),n]}):(0,l.jsxs)("div",{className:"blog-article",children:[(0,l.jsx)("h1",{children:i}),n]});return(0,l.jsxs)(l.Fragment,{children:[(x||p)&&(0,l.jsxs)(j(),{children:[x&&(0,l.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:x}}),p&&(0,l.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:p}})]}),u]})}},91644:function(s,e,n){"use strict";function l(s){return{...s}}n.d(e,{a:function(){return l}})},48097:function(){},43078:function(s,e,n){"use strict";n.d(e,{W:function(){return d}});var l=n(85893);n(67294);var a=n(69429),i=n(13637),j=n(90987),c=n(46976),r=n(33583),M=n(9535),N={root:"m_7485cace"};let t={},h=(0,i.Z)((s,{size:e,fluid:n})=>({root:{"--container-size":n?void 0:(0,a.ap)(e,"container-size")}})),d=(0,M.d5)((s,e)=>{let n=(0,j.w)("Container",t,s),{classNames:a,className:i,style:M,styles:d,unstyled:x,vars:p,fluid:u,mod:g,...D}=n,m=(0,c.y)({name:"Container",classes:N,props:n,className:i,style:M,classNames:a,styles:d,unstyled:x,vars:p,varsResolver:h});return(0,l.jsx)(r.x,{ref:e,mod:[{fluid:u},g],...m("root"),...D})});d.classes=N,d.displayName="@mantine/core/Container"}},function(s){s.O(0,[92888,49774,40179],function(){return s(s.s=81536)}),_N_E=s.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.