dymk/redux-scraper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial user search bar scaffold in react

Browse Source
This commit is contained in:
Dylan Knutson
2023-04-02 22:00:56 +09:00
parent 6b4c3c2294
commit d19255a2c9
4 changed files with 63 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
app/javascript/components/UserSearchBar.jsx Normal file
View File

@@ -0,0 +1,47 @@
import React from "react";
import { useState } from "react";
import PropTypes from "prop-types";
function UserSearchBar(props) {
const [userName, setUserName] = useState("yes!");
return (
<div
className="block mx-auto w-full p-2
sm:p-6 sm:border-2 sm:border-slate-100 sm:max-w-md rounded-3xl
focus-within:border-slate-200 focus-within:shadow-md
transition-all duration-75
"
>
<label className="relative block text-slate-500 focus-within:text-slate-900">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="w-6 h-6 pointer-events-none absolute top-1/2 transform -translate-y-1/2 left-3"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
/>
</svg>
<input
className="w-full text-xl font-extralight p-4 pl-10 outline-none rounded-xl
placeholder:italic transition-all duration-75
border-slate-200 border-2 bg-slate-100
focus:border-slate-400"
placeholder="Enter Username"
defaultValue={props.initialValue}
onChange={(v) => setUserName(v.target.value)}
/>
</label>
</div>
);
}
// UserSearchBar.propTypes = {
// initialValue: PropTypes.string,
// };
export default UserSearchBar;

1
app/views/layouts/application.html.erb
View File

@@ -8,7 +8,6 @@
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= yield :head %>
<%= javascript_pack_tag "application" %>
</head>
<body class="h-full mx-0">
<header class="bg-slate-100 border-slate-200 border-b-2">

25
app/views/pages/root.html.erb
View File

@@ -1,23 +1,6 @@
<% content_for :head do %>
<%= javascript_pack_tag "application" %>
<% end %>
<div class='w-full mt-2 sm:mt-6'>
<div class="block mx-auto w-full p-2
sm:p-6 sm:border-2 sm:border-slate-100 sm:max-w-md rounded-3xl
focus-within:border-slate-200 focus-within:shadow-md
transition-all duration-75
">
<label class="relative block text-slate-500 focus-within:text-slate-900">
<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 pointer-events-none absolute top-1/2 transform -translate-y-1/2 left-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
<input class="w-full text-xl font-extralight p-4 pl-10 outline-none rounded-xl
placeholder:italic transition-all duration-75
border-slate-200 border-2 bg-slate-100
focus:border-slate-400"
placeholder="Enter Username" />
</label>
</div>
<%= react_component("UserSearchBar") %>
</div>

24
config/tailwind.config.js
View File

@@ -1,23 +1,23 @@
const defaultTheme = require('tailwindcss/defaultTheme')
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
content: [
'./public/*.html',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
'./app/views/**/*.{erb,haml,html,slim}'
"./public/*.html",
"./app/helpers/**/*.rb",
"./app/javascript/**/*.{jsx,js}",
"./app/views/**/*.{erb,haml,html,slim}",
],
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
sans: ["Inter var", ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/typography'),
require('@tailwindcss/container-queries'),
]
}
require("@tailwindcss/forms"),
require("@tailwindcss/aspect-ratio"),
require("@tailwindcss/typography"),
require("@tailwindcss/container-queries"),
],
};