GitMoji: ✨ Add App component and basic styling

- Created the App component with basic functionality
- Added CSS styles for the App component
- Imported necessary assets and libraries

frontend/package.json

@@ -1,34 +1,33 @@
 {
-  "name": "demo",
-  "version": "0.1.0",
-  "private": false,
+  "name": "kitan",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vkruglikov/react-telegram-web-app": "^2.1.9",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/material": "^5.15.16",
+    "@twa-dev/sdk": "^6.7.1",
+    "@vitejs/plugin-basic-ssl": "^1.0.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "ts-node": "^10.9.2",
-    "antd": "^5.0.1",
-    "react-scripts": "5.0.1"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.56",
-    "@types/react-dom": "^18.2.19",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.56.0",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "typescript": "^5.2.2",
-    "vite": "^5.1.4",
-    "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3"
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
   }
 }

frontend/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

frontend/src/App.tsx

@@ -0,0 +1,54 @@
+import {useState} from 'react'
+import reactLogo from './assets/react.svg'
+import twaLogo from './assets/tapps.png'
+import viteLogo from '/vite.svg'
+import './App.css'
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+
+import WebApp from '@twa-dev/sdk'
+
+function App() {
+    const [count, setCount] = useState(0)
+
+    return (
+        <>
+            <Card>
+                <CardContent>
+                    <Typography variant="body2" component="p">
+                        {WebApp.isExpanded ? 'This is an expanded view' : 'This is a compact view'}
+                    </Typography>
+                </CardContent>
+            </Card>
+            <div className="card">
+                <h2>Powered by</h2>
+            </div>
+            <div>
+                <a href="https://ton.org/dev" target="_blank">
+                    <img src={twaLogo} className="logo" alt="TWA logo"/>
+                </a>
+                <a href="https://vitejs.dev" target="_blank">
+                    <img src={viteLogo} className="logo" alt="Vite logo"/>
+                </a>
+                <a href="https://react.dev" target="_blank">
+                    <img src={reactLogo} className="logo react" alt="React logo"/>
+                </a>
+            </div>
+            <h1>TWA + Vite + React</h1>
+            <div className="card">
+                <button onClick={() => setCount((count) => count + 1)}>
+                    count is {count}
+                </button>
+            </div>
+            {/*  */}
+            <div className="card">
+                <button onClick={() => WebApp.showAlert(`Hello World! Current count is ${count}`)}>
+                    Show Alert
+                </button>
+            </div>
+        </>
+    )
+}
+
+export default App