feat: ✨ Generate short url view

stimulus links controller, tailwindcss setup, links controller post route, tests updated

Generate short links view

app/views/layouts/application.html.erb

@@ -5,7 +5,7 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
-    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
   </head>
 

app/views/links/_form.html.erb

@@ -0,0 +1,14 @@
+<%= form_with model: Link.new, url: links_path(@link), data: { action: 'ajax:success->links#onSuccess ajax:error->links#onError' } do |form| %>
+	<div class="col-span-3 sm:col-span-2">
+		<label for="company_website" class="block text-sm font-medium text-gray-700">
+			Website
+		</label>
+		<div class="mt-1 flex rounded-md shadow-sm">
+			<%= form.text_field :url, data: { target: "links.url" }, placeholder: true, class: "focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-md sm:text-sm border-gray-300"%>
+		</div>
+	</div>
+
+	<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
+		<%= form.submit "Generate", class: "inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
+	</div>
+<% end %>

app/views/links/_show.html.erb

@@ -0,0 +1,13 @@
+<div class="col-span-3 sm:col-span-2">
+	<label for="about" class="block text-sm font-medium text-gray-700">
+		Short url
+	</label>
+	<a data-links-target="shortUrl" href="<%= link.short %>" class="mt-1 text-sm text-gray-600" target="_blank" rel="noreferrer"><%= link.short %></a>
+</div>
+
+<div class="col-span-3 sm:col-span-2">
+	<label for="about" class="block text-sm font-medium text-gray-700">
+		Click counter
+	</label>
+	<p class="mt-2 text-sm text-gray-500"><%= link.click_counter %></p>
+</div>

app/views/links/home.html.erb

@@ -1,3 +0,0 @@
-<%= content_tag :div, nil, data: {controller: "hello"} do %>
-  <div class="btn btn-primary">Say Hello</div>
-<% end %>

app/views/links/index.html.erb

@@ -0,0 +1,12 @@
+<div data-controller="links" class="flex flex-col">
+  <div class="py-2 align-middle inline-block sm:px-6 lg:px-8">
+    <div class="shadow sm:rounded-md sm:overflow-hidden">
+      <div class="px-4 py-5 bg-white space-y-6 sm:p-6">
+        <div class="grid grid-cols-3 gap-6">
+          <%= render partial: "links/form" %>
+          <div data-links-target="output"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>