Skip to content

Commit

Permalink
Create reusable newsletter signup component
Browse files Browse the repository at this point in the history
  • Loading branch information
JoshAntBrown committed Apr 29, 2024
1 parent e87b920 commit 82135a8
Show file tree
Hide file tree
Showing 9 changed files with 66 additions and 1 deletion.
7 changes: 7 additions & 0 deletions app/controllers/signups_controller.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
class SignupsController < ApplicationController
def new
end

def create
end
end
7 changes: 7 additions & 0 deletions app/helpers/signups_helper.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
module SignupsHelper
def render_signup_form
turbo_frame_tag "signup_form" do
render "signups/form"
end
end
end
3 changes: 2 additions & 1 deletion app/views/pages/index.html.erb
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="text-center">
<div class="max-w-xl pt-8 mx-auto text-3xl">
<div class="max-w-xl pt-8 mx-auto text-3xl mb-4">
Maybe <%= image_tag("icon-maybe-color.svg", alt: "Maybe Logo", class: "inline") %> is a <em class="relative"><span class="border-b-2 border-dotted border-neutral-400">fully</span><sup>*</sup> <span class="absolute w-64 text-xs text-left left-16 -top-7 -rotate-3 text-neutral-400"><sup>*</sup>your finances are secure</span></em> open-source
<div class="inline-flex border rounded-md shadow-[0_1px_8px_0_rgba(0,0,0,0.04)] border-neutral-200">
<%= link_to "https://github.com/maybe-finance/maybe", class: "px-2 py-1.5 border-r shadow-[inset_0_-2px_5px_0_rgba(0,0,0,0.07)] bg-neutral-100 rounded-l-md border-neutral-200 flex items-center justify-center" do %>
Expand All @@ -9,4 +9,5 @@
</div>
OS for your personal finances <%= image_tag("icon-chart.svg", alt: "Chart", class: "inline") %> built by a small team <%= image_tag("icon-team.png", alt: "Maybe Team", class: "inline h-9") %> alongside an incredible community <%= image_tag("icon-discord.svg", alt: "Discord", class: "inline") %>
</div>
<%= render_signup_form %>
</div>
13 changes: 13 additions & 0 deletions app/views/signups/_form.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<%=
form_with(
url: signups_path,
) do |f|
%>
<div class="inline-flex flex-row border rounded-xl bg-white p-1 w-full max-w-96 mb-4 shadow-xs">
<%= f.email_field :email, placeholder: "Enter your email address", class: "flex-1 border-0 px-2 focus:ring-0 text-sm" %>
<%= f.submit "Join waitlist", class: "py-2 px-3 font-medium text-white bg-neutral-900 rounded-lg hover:bg-neutral-800 border border-neutral-900 text-sm" %>
</div>

<p class="text-xs text-[#737373] max-w-96 mx-auto">This waitlist is for a hosted version of the app. Don't want to wait? <a href="https://github.com/maybe-finance/maybe" class="text-[#141414] underline">Self-host</a> an early version of Maybe.</p>
<% end %>

3 changes: 3 additions & 0 deletions app/views/signups/create.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<turbo-frame id="signup_form">
<p>Success! You're on the waitlist.</p>
</turbo-frame>
3 changes: 3 additions & 0 deletions app/views/signups/new.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<turbo-frame id="signup_form">
<%= render "form" %>
</turbo-frame>
1 change: 1 addition & 0 deletions config/routes.rb
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
Rails.application.routes.draw do
# Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html
resources :signups, only: [:new, :create]

Check failure on line 3 in config/routes.rb

View workflow job for this annotation

GitHub Actions / lint

Layout/SpaceInsideArrayLiteralBrackets: Use space inside array brackets.

Check failure on line 3 in config/routes.rb

View workflow job for this annotation

GitHub Actions / lint

Layout/SpaceInsideArrayLiteralBrackets: Use space inside array brackets.

# Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500.
# Can be used by load balancers and uptime monitors to verify that the app is live.
Expand Down
23 changes: 23 additions & 0 deletions config/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,29 @@ module.exports = {
'./app/views/**/*.{erb,haml,html,slim}'
],
theme: {
boxShadow: {
none: "0 0 #0000",
inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
xs: "0px 1px 2px 0px rgba(11, 11, 11, 0.05)",
sm: "0px 1px 2px 0px rgba(11, 11, 11, 0.06), 0px 1px 3px 0px rgba(11, 11, 11, 0.10)",
md: "0px 2px 4px -2px rgba(11, 11, 11, 0.06), 0px 4px 8px -2px rgba(11, 11, 11, 0.10)",
lg: "0px 4px 6px -2px rgba(11, 11, 11, 0.03), 0px 12px 16px -4px rgba(11, 11, 11, 0.08)",
xl: "0px 8px 8px -4px rgba(11, 11, 11, 0.03), 0px 20px 24px -4px rgba(11, 11, 11, 0.08)",
"2xl": "0px 24px 48px -12px rgba(11, 11, 11, 0.12)",
"3xl": "0px 32px 64px -12px rgba(11, 11, 11, 0.14)",
},
borderRadius: {
none: "0",
full: "9999px",
xs: "2px",
sm: "4px",
md: "8px",
DEFAULT: "8px",
lg: "10px",
xl: "12px",
"2xl": "16px",
"3xl": "24px",
},
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
Expand Down
7 changes: 7 additions & 0 deletions test/controllers/signups_controller_test.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
require "test_helper"

class SignupsControllerTest < ActionDispatch::IntegrationTest
# test "the truth" do
# assert true
# end
end

0 comments on commit 82135a8

Please sign in to comment.