Use api

.codesandbox/tasks.json

@@ -0,0 +1,33 @@
+{
+  // These tasks will run in order when initializing your CodeSandbox project.
+  "setupTasks": [
+    {
+      "command": "yarn install",
+      "name": "Install Dependencies"
+    }
+  ],
+
+  // These tasks can be run from CodeSandbox. Running one will open a log in the app.
+  "tasks": {
+    "start": {
+      "name": "start",
+      "command": "yarn start",
+      "runAtStart": true
+    },
+    "build": {
+      "name": "build",
+      "command": "yarn build",
+      "runAtStart": false
+    },
+    "test": {
+      "name": "test",
+      "command": "yarn test",
+      "runAtStart": false
+    },
+    "eject": {
+      "name": "eject",
+      "command": "yarn eject",
+      "runAtStart": false
+    }
+  }
+}

src/App.css

@@ -3,7 +3,7 @@
 }
 
 .App-logo {
-  height: 40vmin;
+  height: 20vmin;
   pointer-events: none;
 }
 

src/App.js

@@ -1,22 +1,72 @@
-import logo from './logo.svg';
-import './App.css';
+import logo from "./logo.svg";
+import "./App.css";
+import { useState } from "react";
+import { useEffect } from "react";
 
 function App() {
+  let [goodcount, setgoodCount] = useState(0);
+  let [badcount, setbadCount] = useState(0);
+  const [data, setData] = useState(undefined);
+
+  useEffect(() => {
+    fetch("https://api.github.com/users/IsogaiEito")
+      .then((res) => res.json())
+      .then((json) => setData(json));
+  }, []);
+
   return (
     <div className="App">
-      <header className="App-header bg-wed">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p className="text-wed-dark">
-          Welcome to <code>WED</code> Community.
+      <header className="App-header bg-mediumpurple">
+        <img
+          src="https://illust8.com/wp-content/uploads/2018/10/animal_panda_illust_1664.png"
+          className="App-logo"
+          alt="logo"
+        />
+        <p className="text-aquamarine text-3xl">
+          <code>WED</code> Communityにようこそ！
         </p>
         <a
-          className="text-wed-dark underline"
+          className="text-navy underline"
           href="https://wed.company/"
           target="_blank"
           rel="noopener noreferrer"
         >
           Learn WED
         </a>
+        <a href="/newpage" className="text-aquamarine underline">
+          コミュニティページ
+        </a>
+        <p
+          className="text-aquamarine text-3xl bg-navy p-1 m-2 rounded-lg hover:text-4xl"
+          onClick={() => {
+            setgoodCount(goodcount + 1);
+          }}
+        >
+          <button>👍</button>
+          {goodcount}
+        </p>
+
+        <p
+          className="text-aquamarine text-3xl bg-navy p-1 m-2 rounded-lg hover:text-4xl"
+          onClick={() => {
+            setbadCount(badcount + 1);
+          }}
+        >
+          <button>👎</button>
+          {badcount}
+        </p>
+        {data ? (
+          <>
+            <img
+              className="w-32 rounded-full mt-10"
+              alt="icon"
+              src={data.avatar_ur}
+              />
+              <p className="text-aquamarine">{data.login}</p>
+            </>
+        ) : (
+          <p>no data</p>
+        )}
       </header>
     </div>
   );

src/index.js

@@ -4,13 +4,15 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import NewPage from './NewPage';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<App />} />
+        <Route path="/newpage" element={<NewPage />} />
       </Routes>
     </BrowserRouter>
   </React.StrictMode>

src/newpage.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+function NewPage() {
+    return(
+        <div className="NewPage">
+            <h1>コミュニティーページ</h1>
+            <a>10月のイベントについて</a>
+        </div>
+    );
+}
+
+export default NewPage;

tailwind.config.js

@@ -1,16 +1,15 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./src/**/*.{js,jsx}",
-  ],
+  content: ["./src/**/*.{js,jsx}"],
   theme: {
     colors: {
-      wed: '#D2D2C6',
-      'wed-dark': '#6D695D',
-    },
-    extend: {
+      wed: "#D2D2C6",
+      "wed-dark": "#6D695D",
+      "mediumpurple": "#9370db",
+      "aquamarine": "#7fffd4",
+      "navy": "#000080",
     },
+    extend: {},
   },
   plugins: [],
-}
-
+};