Public Access
Changed app from vue to react
This commit is contained in:
Andreas Dahm committed
1 parent
cf7f136e15
commit
f245108eb5
10 files changed
+138
-492
No files matched your search
+67
@@ -0,0 +1,67 @@
|
||||
import React from 'react';
|
||||
|
||||
function App() {
|
||||
// Array to generate the placeholder game cards
|
||||
const mockGames = [1, 2, 3];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 flex flex-col">
|
||||
<header className="border-b shadow-sm bg-white p-4 flex justify-between items-center">
|
||||
<div className="font-bold text-blue-600 flex items-center">
|
||||
<i className="mdi mdi-controller mr-2 text-xl"></i>
|
||||
To Be Played
|
||||
</div>
|
||||
<div>
|
||||
<button className="mr-4">Dashboard</button>
|
||||
<button className="bg-blue-600 text-white px-4 py-2 rounded">Login</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="grow container mx-auto py-20 px-4">
|
||||
<section className="text-center mb-16">
|
||||
<h1 className="text-4xl md:text-5xl font-extrabold text-slate-900 mb-4">
|
||||
Dein Game-Backlog unter Kontrolle.
|
||||
</h1>
|
||||
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
|
||||
Willkommen bei deiner neuen Applikation. Hier werden bald deine Spiele aus dem
|
||||
<code className="bg-slate-200 px-1 rounded text-blue-600 ml-1">game-service</code> gelistet.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{mockGames.map((n) => {
|
||||
return (
|
||||
<div key={n} className="border border-slate-200 rounded-xl bg-white overflow-hidden">
|
||||
<div className="h-48 bg-slate-100">
|
||||
<img
|
||||
src={`https://picsum.photos/500/300?random=${n}`}
|
||||
alt={`Beispiel Spiel ${n}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<h3 className="font-bold text-lg">Beispiel Spiel {n}</h3>
|
||||
<p className="text-sm text-slate-500 mb-2">Status: In Warteschlange</p>
|
||||
<p className="text-slate-500 text-sm">
|
||||
Dies ist ein Platzhalter für ein Spiel in deiner Liste. Später kommen hier echte Daten per API.
|
||||
</p>
|
||||
</div>
|
||||
<div className="border-t p-4">
|
||||
<button className="w-full bg-blue-100 text-blue-700 py-2 rounded font-medium hover:bg-blue-200">
|
||||
Details ansehen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer className="bg-white border-t py-4 text-center text-slate-400 text-sm">
|
||||
© 2026 To Be Played — Entwickelt mit React & Tailwind v4
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
-69
@@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<v-app-bar flat class="border-b shadow-sm">
|
||||
<v-container class="d-flex align-center py-0">
|
||||
<v-app-bar-title class="font-weight-bold text-primary">
|
||||
<v-icon icon="mdi-controller" class="mr-2"></v-icon>
|
||||
To Be Played
|
||||
</v-app-bar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn variant="text" class="text-none">Dashboard</v-btn>
|
||||
<v-btn variant="flat" color="primary" class="text-none ml-2">Login</v-btn>
|
||||
</v-container>
|
||||
</v-app-bar>
|
||||
|
||||
<v-main class="bg-slate-50">
|
||||
<v-container class="py-20">
|
||||
|
||||
<!-- Hero Sektion -->
|
||||
<section class="text-center mb-16">
|
||||
<h1 class="text-4xl md:text-5xl font-extrabold text-slate-900 mb-4">
|
||||
Dein Game-Backlog unter Kontrolle.
|
||||
</h1>
|
||||
<p class="text-lg text-slate-600 max-w-2xl mx-auto">
|
||||
Willkommen bei deiner neuen Applikation. Hier werden bald deine Spiele aus dem
|
||||
<code class="bg-slate-200 px-1 rounded text-primary">game-service</code> gelistet.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<v-row>
|
||||
<v-col v-for="n in 3" :key="n" cols="12" md="4">
|
||||
<v-card variant="outlined" class="rounded-xl border-slate-200 bg-white">
|
||||
<v-img
|
||||
height="200"
|
||||
src="https://picsum.photos/500/300?random="
|
||||
cover
|
||||
class="bg-slate-100"
|
||||
></v-img>
|
||||
<v-card-item>
|
||||
<v-card-title>Beispiel Spiel {{ n }}</v-card-title>
|
||||
<v-card-subtitle>Status: In Warteschlange</v-card-subtitle>
|
||||
</v-card-item>
|
||||
<v-card-text class="text-slate-500">
|
||||
Dies ist ein Platzhalter für ein Spiel in deiner Liste. Später kommen hier echte Daten per API.
|
||||
</v-card-text>
|
||||
<v-divider class="mx-4"></v-divider>
|
||||
<v-card-actions class="pa-4">
|
||||
<v-btn variant="tonal" color="primary" block>Details ansehen</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-container>
|
||||
</v-main>
|
||||
|
||||
<!-- Footer -->
|
||||
<v-footer class="bg-white border-t py-4">
|
||||
<v-container class="text-center text-slate-400 text-sm">
|
||||
© 2026 To Be Played — Entwickelt mit Vue 3, Vuetify & Tailwind v4
|
||||
</v-container>
|
||||
</v-footer>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -1,93 +0,0 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import viteLogo from '../assets/vite.svg'
|
||||
import heroImg from '../assets/hero.png'
|
||||
import vueLogo from '../assets/vue.svg'
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section id="center">
|
||||
<div class="hero">
|
||||
<img :src="heroImg" class="base" width="170" height="179" alt="" />
|
||||
<img :src="vueLogo" class="framework" alt="Vue logo" />
|
||||
<img :src="viteLogo" class="vite" alt="Vite logo" />
|
||||
</div>
|
||||
<div>
|
||||
<h1>Get started</h1>
|
||||
<p>Edit <code>src/App.vue</code> and save to test <code>HMR</code></p>
|
||||
</div>
|
||||
<button class="counter" @click="count++">Count is {{ count }}</button>
|
||||
</section>
|
||||
|
||||
<div class="ticks"></div>
|
||||
|
||||
<section id="next-steps">
|
||||
<div id="docs">
|
||||
<svg class="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#documentation-icon"></use>
|
||||
</svg>
|
||||
<h2>Documentation</h2>
|
||||
<p>Your questions, answered</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vite.dev/" target="_blank">
|
||||
<img class="logo" :src="viteLogo" alt="" />
|
||||
Explore Vite
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://vuejs.org/" target="_blank">
|
||||
<img class="button-icon" :src="vueLogo" alt="" />
|
||||
Learn more
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="social">
|
||||
<svg class="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#social-icon"></use>
|
||||
</svg>
|
||||
<h2>Connect with us</h2>
|
||||
<p>Join the Vite community</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#github-icon"></use>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vite.dev/" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#discord-icon"></use>
|
||||
</svg>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://x.com/vite_js" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#x-icon"></use>
|
||||
</svg>
|
||||
X.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#bluesky-icon"></use>
|
||||
</svg>
|
||||
Bluesky
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="ticks"></div>
|
||||
<section id="spacer"></section>
|
||||
</template>
|
||||
-18
@@ -1,18 +0,0 @@
|
||||
import { createApp } from 'vue';
|
||||
import App from './App.vue';
|
||||
import './style.css';
|
||||
import 'vuetify/styles';
|
||||
import { createVuetify } from 'vuetify';
|
||||
import '@mdi/font/css/materialdesignicons.css';
|
||||
|
||||
const vuetify = createVuetify({
|
||||
theme: {
|
||||
defaultTheme: 'light',
|
||||
},
|
||||
});
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(vuetify);
|
||||
|
||||
app.mount('#app');
|
||||
@@ -0,0 +1,11 @@
|
||||
import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import App from './App.jsx';
|
||||
import './style.css';
|
||||
import '@mdi/font/css/materialdesignicons.css';
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>
|
||||
);
|
||||
Reference in new issue
Block a user