flashを追加

app/assets/stylesheets/application.sass.scss

@@ -5,6 +5,7 @@
 // Configuration
 @import "config/variables";
 @import "config/reset";
+@import "config/animations";
 
 // Components
 @import "components/btn";
@@ -13,6 +14,7 @@
 @import "components/visually_hidden";
 @import "components/quote";
 @import "components/navbar";
+@import "components/flash";
 
 // Layouts
 @import "layouts/container";

app/assets/stylesheets/components/_flash.scss

@@ -0,0 +1,24 @@
+.flash {
+    position: fixed;
+    top: 5rem;
+    left: 50%;
+    transform: translateX(-50%);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-s);
+
+    max-width: 100%;
+    width: max-content;
+    padding: 0 var(--space-m);
+
+    &__message {
+        font-size: var(--font-size-s);
+        color: var(--color-white);
+        padding: var(--space-xs) var(--space-m);
+        background-color: var(--color-dark);
+        animation: appear-then-fade 4s both;
+        border-radius: 999px;
+    }
+}

app/assets/stylesheets/config/_animations.scss

@@ -0,0 +1,12 @@
+@keyframes appear-then-fade {
+
+    0%,
+    100% {
+        opacity: 0
+    }
+
+    5%,
+    60% {
+        opacity: 1
+    }
+}

app/javascript/application.js

@@ -1,3 +1,5 @@
 // Entry point for the build script in your package.json
 import "@hotwired/turbo-rails"
 import "./controllers"
+
+Turbo.session.drive = false

app/views/layouts/_flash.html.erb

@@ -0,0 +1,5 @@
+<% flash.each do |flash_type, message| %>
+  <div class="flash__message">
+    <%= message %>
+  </div>
+<% end %>