From 82f08d67485d34d326d13d649cde3f946bac26a7 Mon Sep 17 00:00:00 2001 From: Tetracontane <144820358+tetracontinental@users.noreply.github.com> Date: Thu, 16 May 2024 11:55:50 +0900 Subject: [PATCH] create docs --- docs/App.css | 49 +++++++++++++++++++++++++++++ docs/App.test.tsx | 9 ++++++ docs/App.tsx | 67 ++++++++++++++++++++++++++++++++++++++++ docs/favicon.ico | Bin 0 -> 3870 bytes docs/index.css | 13 ++++++++ docs/index.tsx | 19 ++++++++++++ docs/logo.svg | 1 + docs/react-app-env.d.ts | 1 + docs/reportWebVitals.ts | 15 +++++++++ docs/setupTests.ts | 5 +++ 10 files changed, 179 insertions(+) create mode 100644 docs/App.css create mode 100644 docs/App.test.tsx create mode 100644 docs/App.tsx create mode 100644 docs/favicon.ico create mode 100644 docs/index.css create mode 100644 docs/index.tsx create mode 100644 docs/logo.svg create mode 100644 docs/react-app-env.d.ts create mode 100644 docs/reportWebVitals.ts create mode 100644 docs/setupTests.ts diff --git a/docs/App.css b/docs/App.css new file mode 100644 index 0000000..79831ae --- /dev/null +++ b/docs/App.css @@ -0,0 +1,49 @@ +.App { + text-align: center; + margin-top: 2rem; + font-family: sans-serif; +} + +input[type='number'] { + padding: 0.5rem; + font-size: 1rem; + margin-right: 1rem; + border-radius: 4px; + border: 1px solid #ccc; +} + +select { + padding: 0.5rem; + font-size: 1rem; + margin-right: 1rem; + border-radius: 4px; + border: 1px solid #ccc; +} + +button { + padding: 0.5rem 1rem; + font-size: 1rem; + background-color: #4caf50; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #45a049; +} + +p { + margin-top: 1rem; + font-size: 1.2rem; +} + +@media (max-width: 600px) { + input[type='number'], + select, + button { + margin-bottom: 0.5rem; + } +} \ No newline at end of file diff --git a/docs/App.test.tsx b/docs/App.test.tsx new file mode 100644 index 0000000..2a68616 --- /dev/null +++ b/docs/App.test.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + render(); + const linkElement = screen.getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/docs/App.tsx b/docs/App.tsx new file mode 100644 index 0000000..e1db178 --- /dev/null +++ b/docs/App.tsx @@ -0,0 +1,67 @@ +import React, { useState } from 'react'; +import './App.css'; + +function App() { + const [inputValue, setInputValue] = useState(0); + const [displayValue, setDisplayValue] = useState(0); + const [unit, setUnit] = useState('東京ドーム'); + const [localUnit, setLocalUnit] = useState('地元の図書館'); + + const handleInputChange = (e: React.ChangeEvent) => { + const value = parseFloat(e.target.value); + setInputValue(value); + }; + + const handleUnitChange = (e: React.ChangeEvent) => { + setUnit(e.target.value); + }; + + const handleLocalUnitChange = (e: React.ChangeEvent) => { + setLocalUnit(e.target.value); + }; + + const handleButtonClick = () => { + let convertedValue = inputValue; + switch (unit) { + case '東京ドーム': + convertedValue = inputValue * 46755; // 東京ドームの面積を46755m^2に設定 + break; + default: + break; + } + + let localUnitValue = 0; + switch (localUnit) { + case '地元の図書館': + localUnitValue = 500; // 地元の図書館の面積を500m^2と仮定 + break; + case '地元の公園': + localUnitValue = 10000; // 地元の公園の面積を10000m^2と仮定 + break; + default: + break; + } + + const result = convertedValue / localUnitValue; + setDisplayValue(result); + }; + + return ( +
+

東京ドームから地元の建物への変換アプリ

+ + + + +

入力値: {inputValue} {unit}

+

表示値: {displayValue.toFixed(2)} {localUnit}個分

+
+ ); +} + +export default App; \ No newline at end of file diff --git a/docs/favicon.ico b/docs/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..a11777cc471a4344702741ab1c8a588998b1311a GIT binary patch literal 3870 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 baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@ literal 0 HcmV?d00001 diff --git a/docs/index.css b/docs/index.css new file mode 100644 index 0000000..ec2585e --- /dev/null +++ b/docs/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/docs/index.tsx b/docs/index.tsx new file mode 100644 index 0000000..032464f --- /dev/null +++ b/docs/index.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './App'; +import reportWebVitals from './reportWebVitals'; + +const root = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement +); +root.render( + + + +); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); diff --git a/docs/logo.svg b/docs/logo.svg new file mode 100644 index 0000000..9dfc1c0 --- /dev/null +++ b/docs/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/react-app-env.d.ts b/docs/react-app-env.d.ts new file mode 100644 index 0000000..6431bc5 --- /dev/null +++ b/docs/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/docs/reportWebVitals.ts b/docs/reportWebVitals.ts new file mode 100644 index 0000000..49a2a16 --- /dev/null +++ b/docs/reportWebVitals.ts @@ -0,0 +1,15 @@ +import { ReportHandler } from 'web-vitals'; + +const reportWebVitals = (onPerfEntry?: ReportHandler) => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/docs/setupTests.ts b/docs/setupTests.ts new file mode 100644 index 0000000..8f2609b --- /dev/null +++ b/docs/setupTests.ts @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom';