feat: sort select with button

public/icons/sort.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z" />
+</svg>

public/question.css

@@ -111,6 +111,42 @@ img {
     margin-bottom: 1rem;
 }
 
+.answers-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.answers-header .sorting form {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+}
+
+.answers-header select {
+    border: 0;
+    border-radius: 5px;
+    padding: 0.5rem;
+    background-color: var(--meta-bg);
+    color: var(--text-color);
+    height: 2rem;
+}
+
+.answers-header button {
+    width: 2rem;
+    border: 0;
+    height: 2rem;
+    border-radius: 5px;
+    background-color: var(--meta-bg);
+    color: var(--text-color);
+    font-size: 1.5rem;
+    cursor: pointer;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 @media only screen and (max-width: 800px) {
     body {
         padding-left: 1rem;

templates/question.html

@@ -38,13 +38,30 @@
                     </p>
                 </div>
                 <div class="card-body">{{ .question.Body }}</div>
-                {{ if .question.Comments }}
+                {{ if .question.Comments }} {{ template "comments.html"
-                    {{ template "comments.html" .question }}
+                .question }} {{end}}
-                {{end}}
-
             </div>
             <hr class="post-divider" />
+            <div class="answers-header">
                 <h2>Answers</h2>
+                <div class="sorting">
+                    <form>
+                        <select name="sort_by">
+                            <option disabled value="votes">Sort answers by...</option>
+                            <option value="votes">Votes</option>
+                            <option value="newest">Trending</option>
+                            <option value="newest">Newest</option>
+                            <option value="oldest">Oldest</option>
+                        </select>
+                        <button type="submit">
+                            <img
+                                src="/static/icons/sort.svg"
+                                alt="Sieve icon"
+                            />
+                        </button>
+                    </form>
+                </div>
+            </div>
             {{ range $answer := .answers }}
             <div class="answer">
                 <div
@@ -65,8 +82,7 @@
                         >
                     </div>
                 </div>
-                {{ if $answer.Comments }}
+                {{ if $answer.Comments }} {{ template "comments.html" $answer }}
-                    {{ template "comments.html" $answer }}
                 {{end}}
             </div>
             <hr class="answer-divider" />