From e67b5a5249d6a882c3df615d731cf03ac5005780 Mon Sep 17 00:00:00 2001
From: Chris Kankiewicz <Chris@ChrisKankiewicz.com>
Date: Thu, 12 Dec 2019 21:40:26 -0700
Subject: [PATCH] Extracted file entry to dedicated component

---
 app/themes/default/components/file.twig | 36 +++++++++++++++++++
 app/themes/default/index.twig           | 48 +++----------------------
 2 files changed, 40 insertions(+), 44 deletions(-)
 create mode 100644 app/themes/default/components/file.twig

diff --git a/app/themes/default/components/file.twig b/app/themes/default/components/file.twig
new file mode 100644
index 0000000..6e43096
--- /dev/null
+++ b/app/themes/default/components/file.twig
@@ -0,0 +1,36 @@
+<a
+    href="{% if parentDir %}..{% else %}{{ file.getRelativePathname }}{% endif %}"
+    class="flex justify-between items-center rounded-lg p-4 hover:bg-gray-200 hover:p-4 hover:shadow"
+>
+    <div class="flex-shrink pr-2">
+        {% if parentDir %}
+            <i class="fas fa-level-up-alt fa-fw fa-lg"></i>
+        {% else %}
+            {{ icon(file) | raw }}
+        {% endif %}
+    </div>
+
+    <div class="flex-grow truncate mr-2">
+        {% if parentDir %}
+           ..
+        {% else %}
+            {{ file.getBasename }}
+        {% endif %}
+    </div>
+
+    <div class="hidden whitespace-no-wrap text-right mx-2 w-1/6 sm:block">
+        {% if parentDir or file.isDir %}
+                —
+        {% else %}
+            {{ sizeForHumans(file.getSize) }}
+        {% endif %}
+    </div>
+
+    <div class="hidden whitespace-no-wrap text-right truncate ml-2 w-1/4 sm:block">
+        {% if parentDir %}
+                —
+        {% else %}
+            {{ file.getMTime | date }}
+        {% endif %}
+    </div>
+</a>
diff --git a/app/themes/default/index.twig b/app/themes/default/index.twig
index b2aa87f..ff585c7 100644
--- a/app/themes/default/index.twig
+++ b/app/themes/default/index.twig
@@ -34,53 +34,13 @@
             </div>
 
             {% if not is_root %}
-                <a
-                    href=".."
-                    class="flex justify-between items-center rounded-lg p-4 hover:bg-gray-200 hover:p-4 hover:shadow"
-                >
-                    <div class="flex-shrink text-gray-700 pr-2">
-                        <i class="fas fa-level-up-alt fa-fw fa-lg"></i>
-                    </div>
-
-                    <div class="flex-grow truncate mr-2">
-                        ..
-                    </div>
-
-                    <div class="hidden whitespace-no-wrap text-right mx-2 w-1/6 sm:block">
-                        —
-                    </div>
-
-                    <div class="hidden whitespace-no-wrap text-right truncate ml-2 w-1/4 sm:block">
-                        —
-                    </div>
-                </a>
+                {{ include('components/file.twig', {
+                    parentDir: true
+                }, with_context = false) }}
             {% endif %}
 
             {% for file in files %}
-                <a
-                    href="{{ file.getRelativePathname }}"
-                    class="flex justify-between items-center rounded-lg p-4 hover:bg-gray-200 hover:p-4 hover:shadow"
-                >
-                    <div class="flex-shrink text-gray-700 pr-2">
-                        {{ icon(file) | raw }}
-                    </div>
-
-                    <div class="flex-grow truncate mr-2">
-                        {{ file.getBasename }}
-                    </div>
-
-                    <div class="hidden whitespace-no-wrap text-right mx-2 w-1/6 sm:block">
-                        {% if file.isDir %}
-                            —
-                        {% else %}
-                            {{ sizeForHumans(file.getSize) }}
-                        {% endif %}
-                    </div>
-
-                    <div class="hidden whitespace-no-wrap text-right truncate ml-2 w-1/4 sm:block">
-                        {{ file.getMTime | date }}
-                    </div>
-                </a>
+                {{ include('components/file.twig') }}
             {% endfor %}
         </ul>
     </div>