-
Notifications
You must be signed in to change notification settings - Fork 0
入力画面への遷移 #13
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
入力画面への遷移 #13
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| "use client"; | ||
|
|
||
| import React, { useState } from "react"; | ||
| import Link from "next/link"; | ||
|
|
||
| export default function First() { | ||
| const [time, setTime] = useState(""); | ||
|
|
||
| return ( | ||
| <div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "60vh", padding: "2rem" }}> | ||
| <div style={{ width: 320, border: "2px solid #ccc", borderRadius: 12, padding: "1.25rem", boxShadow: "0 2px 8px rgba(0,0,0,0.06)" }}> | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
Comment on lines
+12
to
+15
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
| <div style={{ marginTop: 12 }}> | ||
| <Link href="/second">目標を入力する</Link> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,103 +1,12 @@ | ||
| import Image from "next/image"; | ||
| import Goal from "./goal/goal"; | ||
|
|
||
|
|
||
| export default function Home() { | ||
| return ( | ||
| <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20"> | ||
| <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start"> | ||
| <Image | ||
| className="dark:invert" | ||
| src="/next.svg" | ||
| alt="Next.js logo" | ||
| width={180} | ||
| height={38} | ||
| priority | ||
| /> | ||
| <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left"> | ||
| <li className="mb-2 tracking-[-.01em]"> | ||
| Get started by editing{" "} | ||
| <code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded"> | ||
| src/app/page.tsx | ||
| </code> | ||
| . | ||
| </li> | ||
| <li className="tracking-[-.01em]"> | ||
| Save and see your changes instantly. | ||
| </li> | ||
| </ol> | ||
|
|
||
| <div className="flex gap-4 items-center flex-col sm:flex-row"> | ||
| <a | ||
| className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto" | ||
| href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <Image | ||
| className="dark:invert" | ||
| src="/vercel.svg" | ||
| alt="Vercel logomark" | ||
| width={20} | ||
| height={20} | ||
| /> | ||
| Deploy now | ||
| </a> | ||
| <a | ||
| className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]" | ||
| href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| Read our docs | ||
| </a> | ||
| </div> | ||
| <div className="min-h-screen p-8 flex items-start justify-center"> | ||
| <main> | ||
| <Goal /> | ||
| </main> | ||
| <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center"> | ||
| <a | ||
| className="flex items-center gap-2 hover:underline hover:underline-offset-4" | ||
| href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <Image | ||
| aria-hidden | ||
| src="/file.svg" | ||
| alt="File icon" | ||
| width={16} | ||
| height={16} | ||
| /> | ||
| Learn | ||
| </a> | ||
| <a | ||
| className="flex items-center gap-2 hover:underline hover:underline-offset-4" | ||
| href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <Image | ||
| aria-hidden | ||
| src="/window.svg" | ||
| alt="Window icon" | ||
| width={16} | ||
| height={16} | ||
| /> | ||
| Examples | ||
| </a> | ||
| <a | ||
| className="flex items-center gap-2 hover:underline hover:underline-offset-4" | ||
| href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <Image | ||
| aria-hidden | ||
| src="/globe.svg" | ||
| alt="Globe icon" | ||
| width={16} | ||
| height={16} | ||
| /> | ||
| Go to nextjs.org → | ||
| </a> | ||
| </footer> | ||
| </div> | ||
| ); | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| "use client"; | ||
|
|
||
| import React, { useState } from "react"; | ||
|
|
||
| export default function GoalInput() { | ||
| // 目標時間入力 | ||
| const [time, setTime] = useState("00:00"); | ||
|
|
||
| return ( | ||
| <div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "60vh", padding: "2rem" }}> | ||
| <div style={{ width: 320, border: "2px solid #ccc", borderRadius: 12, padding: "1.25rem", boxShadow: "0 2px 8px rgba(0,0,0,0.06)" }}> | ||
| <label htmlFor="time-input" style={{ display: "block", marginBottom: ".5rem", fontWeight: 600 }}> | ||
| 時刻を入力 | ||
| </label> | ||
| <input | ||
| id="time-input" | ||
| type="time" | ||
| value={time} | ||
| onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTime(e.target.value)} | ||
| style={{ width: "100%", padding: ".5rem .75rem", fontSize: "1rem", borderRadius: 8, border: "1px solid #ddd" }} | ||
| /> | ||
| <p style={{ marginTop: ".75rem", color: "#333" }}>選択: {time || "未選択"}</p> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| "use client"; | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
|
|
||
| import React from "react"; | ||
| import Link from "next/link"; | ||
| import GoalInput from "./goal_input"; | ||
|
|
||
| export default function Second() { | ||
| return ( | ||
| <div> | ||
| {/* 戻るボタン */} | ||
| <h1>Second</h1> | ||
| <GoalInput /> | ||
|
Comment on lines
+11
to
+12
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
| <Link href="/">完了</Link> | ||
|
|
||
|
|
||
|
Comment on lines
+14
to
+15
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
| </div> | ||
| ); | ||
|
|
||
|
|
||
|
Comment on lines
+18
to
+19
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
| } | ||
|
|
||
|
|
||
|
Comment on lines
+21
to
+22
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
UIコンポーネントは
/src/componentsディレクトリに入れた方がよさそう/src/app以下は、ページルーティングに関わる部分のみを置いておきたいかもしれない