Der erste Commit mit Calendar.tsx

This commit is contained in:
Marco Kittel 2025-06-15 09:12:25 +02:00
commit a2867e5110
15 changed files with 4034 additions and 0 deletions

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
node_modules
dist

34
README.md Normal file
View File

@ -0,0 +1,34 @@
## Usage
Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
```bash
$ npm install # or pnpm install or yarn install
```
### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
## Available Scripts
In the project directory, you can run:
### `npm run dev` or `npm start`
Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.<br>
### `npm run build`
Builds the app for production to the `dist` folder.<br>
It correctly bundles Solid in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.<br>
Your app is ready to be deployed!
## Deployment
You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)

16
index.html Normal file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
<title>Solid App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/src/index.tsx" type="module"></script>
</body>
</html>

2400
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

23
package.json Normal file
View File

@ -0,0 +1,23 @@
{
"name": "vite-template-solid",
"version": "0.0.0",
"description": "",
"type": "module",
"scripts": {
"start": "vite",
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"license": "MIT",
"devDependencies": {
"typescript": "^5.7.2",
"vite": "^6.0.0",
"vite-plugin-solid": "^2.11.6"
},
"dependencies": {
"@tailwindcss/vite": "^4.1.10",
"solid-js": "^1.9.5",
"tailwindcss": "^4.1.10"
}
}

1065
pnpm-lock.yaml Normal file

File diff suppressed because it is too large Load Diff

33
src/App.module.css Normal file
View File

@ -0,0 +1,33 @@
.App {
text-align: center;
}
.logo {
animation: logo-spin infinite 20s linear;
height: 40vmin;
pointer-events: none;
}
.header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.link {
color: #b318f0;
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

16
src/App.tsx Normal file
View File

@ -0,0 +1,16 @@
import type { Component } from 'solid-js';
import logo from './logo.svg';
import styles from './App.module.css';
import { CalendarComponent } from './Calendar';
const App: Component = () => {
return (
<>
<CalendarComponent/>
</>
);
};
export default App;

400
src/Calendar.tsx Normal file
View File

@ -0,0 +1,400 @@
export function CalendarComponent() {
return (
<div class="w-full max-w-sm mx-auto">
<div class="text-center grid grid-cols-7">
<div>M</div>
<div>T</div>
<div>W</div>
<div>T</div>
<div>F</div>
<div>S</div>
<div>S</div>
</div>
<div
class="mt-4 overflow-hidden text-sm border rounded-lg shadow-md bg-base-200 gap-px grid grid-cols-7 shadow-base-500/20">
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
>
<time datetime="#_">29</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
>
<time datetime="#_">30</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
>
<time datetime="#_">29</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
>
<time datetime="#_">31</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">1</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">2</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">3</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">4</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">5</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">6</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">7</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">8</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">9</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">10</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">11</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">12</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto font-medium text-black size-10 hover:text-blue-600"
>
<time datetime="#_">13</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-white bg-blue-600 size-10 hover:bg-blue-700"
>
<time datetime="#_">14</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">15</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">16</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">17</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">18</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">19</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">20</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">21</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">22</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">23</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">24</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">25</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">26</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">27</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">28</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">29</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">30</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto text-black size-10 hover:text-blue-600"
>
<time datetime="#_">31</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
>
<time datetime="#_">1</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
>
<time datetime="#_">2</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
>
<time datetime="#_">3</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
>
<time datetime="#_">4</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
>
<time datetime="#_">5</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
>
<time datetime="#_">6</time>
</button>
</div>
<div class="bg-white">
<button
type="button"
class="flex items-center justify-center w-full mx-auto size-10 text-base-500 hover:text-blue-600"
>
<time datetime="#_">7</time>
</button>
</div>
</div>
<div class="flex items-center mt-4">
<h2 class="flex-auto text-sm font-medium text-black">August 2024</h2>
<div class="flex items-center gap-1">
<button
type="button"
class="flex flex-none hover:border-blue-500 items-center rounded-full hover:bg-blue-600 hover:text-white border justify-center p-1.5 text-base-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-narrow-left size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 12l14 0"></path>
<path d="M5 12l4 4"></path>
<path d="M5 12l4 -4"></path>
</svg>
</button>
<button
type="button"
class="flex flex-none hover:border-blue-500 items-center rounded-full hover:bg-blue-600 hover:text-white border justify-center p-1.5 text-base-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-narrow-right size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 12l14 0"></path>
<path d="M15 16l4 -4"></path>
<path d="M15 8l4 4"></path>
</svg>
</button>
</div>
</div>
</div>
)
}

BIN
src/assets/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

1
src/index.css Normal file
View File

@ -0,0 +1 @@
@import "tailwindcss";

15
src/index.tsx Normal file
View File

@ -0,0 +1,15 @@
/* @refresh reload */
import { render } from 'solid-js/web';
import './index.css';
import App from './App';
const root = document.getElementById('root');
if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
throw new Error(
'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?',
);
}
render(() => <App />, root!);

1
src/logo.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

15
tsconfig.json Normal file
View File

@ -0,0 +1,15 @@
{
"compilerOptions": {
"strict": true,
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"jsx": "preserve",
"jsxImportSource": "solid-js",
"types": ["vite/client"],
"noEmit": true,
"isolatedModules": true
}
}

13
vite.config.ts Normal file
View File

@ -0,0 +1,13 @@
import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [tailwindcss(), solidPlugin()],
server: {
port: 3000,
},
build: {
target: "esnext",
},
});