feat(snippets): filter by language (#402)

* feat(snippets): add height-50 logos for every languages

* feat(snippets): add filter button to snippets

* fix(snippets): mobile query

* fix(snippets): moved h3 and add hover effect

app/controllers/snippets_controller.rb

@@ -6,10 +6,14 @@ class SnippetsController < ApplicationController
   def show
     @day = params[:day]
     @challenge = params[:challenge]
+    @language = params[:language]
 
     @snippet = Snippets::Builder.call(language: current_user.favourite_language)
     @snippets = Snippet.includes(:user, :reactions).where(day: @day, challenge: @challenge).order(created_at: :desc)
 
+    @languages = @snippets.pluck(:language).uniq.sort
+    @snippets = @snippets.where(language: @language) if @language
+
     @text_area_placeholder = <<~TEXT
       This box is super smart.
       Paste your code directly here, it will work.

app/views/snippets/show.html.erb

@@ -16,6 +16,16 @@
 
 <hr class="border-aoc-gray-darker">
 
+<div class="mt-4 flex items-center gap-4 flex-wrap">
+  <h3>Filter by language</h3>
+
+  <% @languages.each do |language| %>
+    <%= link_to snippet_path(day: @day, challenge: @challenge, id: @snippet.id, language: @language == language ? nil : language), class: "h-4 lg:h-8" do %>
+      <%= image_tag "languages/#{language}.png", class: "h-full transition-all hover:opacity-100 #{'opacity-50' if @language.present? && @language != language}" %>
+    <% end %>
+  <% end %>
+</div>
+
 <div class="my-8 flex flex-col gap-y-4">
   <%= render Snippets::BoxComponent.with_collection(@snippets, user: current_user) %>
 </div>