CSV2ics

commit 24d081bd00f57ec2b3b9a298230616b73b7fd223
parent d1d0a668db87737b00d6fa70d544e4f277d3042a
Author: minerva-jupitr <ryouturn@gmail.com>
Date:   Wed,  1 May 2024 12:19:28 +0900

add header

Diffstat:
M
README.md
 | 
7
+++++++
M
src/App.tsx
 | 
21
++++++---------------
A
src/Tab.tsx
 | 
68
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

3 files changed, 81 insertions(+), 15 deletions(-)
diff --git a/README.md b/README.md
@@ -1,3 +1,10 @@
+#CSV2icl
+## About this app in JP
+このアプリケーションはSCVで記述された時間割表をicl形式に直すことを目的に作成されました。
+画面のタブを左から順番に勧めていくことでiclファイルが完成します。
+
+
+
 # Getting Started with Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,23 +1,14 @@
-import React from 'react';
-import logo from './logo.svg';
+import * as React from 'react';
 import './App.css';
-
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        <h1>CSV2icl</h1>
+        <h2>このアプリケーションはSCVで記述された時間割表をicl形式に直すことを目的に作成されました。
+          画面のタブを左から順番に勧めていくことでiclファイルが完成します。
+          <a href="https://github.com/minerva-jupiter/CSV2icl">from README</a>
+        </h2>
       </header>
     </div>
   );
diff --git a/src/Tab.tsx b/src/Tab.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function CustomTabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+export default function CSV2iclTabs() {
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
+          <Tab label="Item One" {...a11yProps(0)} />
+          <Tab label="Item Two" {...a11yProps(1)} />
+          <Tab label="Item Three" {...a11yProps(2)} />
+        </Tabs>
+      </Box>
+      <CustomTabPanel value={value} index={0}>
+        Item One
+      </CustomTabPanel>
+      <CustomTabPanel value={value} index={1}>
+        Item Two
+      </CustomTabPanel>
+      <CustomTabPanel value={value} index={2}>
+        Item Three
+      </CustomTabPanel>
+    </Box>
+  );
+}+
\ No newline at end of file