feat: 🎸 added file explorer question

added file explorer question

Author: Pratham82

2024 Prep/machine_coding/react/src/components/FileExplorer.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react'
+
+interface IFileExplorerData {
+  name: string
+  type: string
+  children?: IChildren[] | null
+}
+export interface IChildren {
+  name: string
+  type: string
+  children?: IChildren[] | null
+}
+
+export default function FileExplorer({ data }: { data: IFileExplorerData }) {
+  const { name = '', children, type = '' } = data
+  const [collapse, setCollapse] = useState(false)
+  const toggleCollapse = () => setCollapse(!collapse)
+
+  if (type === 'file') {
+    return <div>📄 &nbsp;{name}</div>
+  }
+
+  return (
+    <div
+      style={{
+        width: '100%',
+      }}
+    >
+      <div
+        style={{
+          marginTop: 5,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        {/* Render top level parent i.e folder */}
+        <div
+          style={{
+            marginLeft: 7,
+            border: '1px solid white',
+          }}
+          onClick={toggleCollapse}
+        >
+          📁 &nbsp; {name}
+        </div>
+        {/* Render Children/Items inside the folder */}
+        {collapse && (
+          <div
+            style={{
+              paddingLeft: 20,
+            }}
+          >
+            {children &&
+              children.map((exp: IFileExplorerData) => {
+                return <FileExplorer data={exp} />
+              })}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

2024 Prep/machine_coding/react/src/components/index.ts

@@ -1,3 +1,5 @@
 import Loader from './Loader'
+import InfiniteScroll from './InfiniteScroll'
+import FileExplorer from './FileExplorer'
 
-export { Loader }
+export { Loader, FileExplorer, InfiniteScroll }

2024 Prep/machine_coding/react/src/data/file-explorer.ts

@@ -0,0 +1,94 @@
+export const data = {
+  name: 'Root',
+  type: 'folder',
+  children: [
+    {
+      name: 'Documents',
+      type: 'folder',
+      children: [
+        {
+          name: 'Work',
+          type: 'folder',
+          children: [
+            {
+              name: 'Reports',
+              type: 'folder',
+              children: [
+                {
+                  name: 'Q1',
+                  type: 'file',
+                },
+                {
+                  name: 'Q2',
+                  type: 'file',
+                },
+              ],
+            },
+            {
+              name: 'Presentations',
+              type: 'folder',
+              children: [
+                {
+                  name: 'Client_A',
+                  type: 'file',
+                },
+                {
+                  name: 'Client_B',
+                  type: 'file',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          name: 'Personal',
+          type: 'folder',
+          children: [
+            {
+              name: 'Vacation',
+              type: 'file',
+            },
+            {
+              name: 'Family',
+              type: 'file',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'Photos',
+      type: 'folder',
+      children: [
+        {
+          name: '2019',
+          type: 'folder',
+          children: [
+            {
+              name: 'Summer',
+              type: 'file',
+            },
+            {
+              name: 'Winter',
+              type: 'file',
+            },
+          ],
+        },
+        {
+          name: '2020',
+          type: 'folder',
+          children: [
+            {
+              name: 'Spring',
+              type: 'file',
+            },
+            {
+              name: 'Autumn',
+              type: 'file',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}

2024 Prep/machine_coding/react/src/data/index.ts

@@ -0,0 +1 @@
+export { data as fileExplorerData } from './file-explorer'