stx/examples/simple.stx at main · stacksjs/stx · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<script server>
import { defineProps, withDefaults } from 'stx'

interface SimplePageProps {
  message?: string
}

const { message } = withDefaults(
  defineProps<SimplePageProps>(),
  {
    message: 'Hello from stx'
  }
)
</script>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple stx Component Test</title>
</head>
<body class="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white p-8">

<!-- Background Effects -->
<div class="fixed inset-0 overflow-hidden pointer-events-none">
  <div class="absolute top-1/3 left-1/3 w-64 h-64 bg-violet-500/10 rounded-full blur-3xl"></div>
  <div class="absolute bottom-1/3 right-1/3 w-64 h-64 bg-cyan-500/10 rounded-full blur-3xl"></div>
</div>

<div class="relative max-w-xl mx-auto">
  <!-- Header -->
  <h1 class="text-3xl font-bold bg-gradient-to-r from-violet-400 to-cyan-400 bg-clip-text text-transparent mb-8">
    {{ message }}
  </h1>

  <!-- Manual Card -->
  <div class="relative group mb-6">
    <div class="absolute -inset-1 bg-gradient-to-r from-violet-600/20 to-cyan-600/20 rounded-2xl blur-xl opacity-50 group-hover:opacity-75 transition-opacity"></div>
    <div class="relative bg-slate-800/50 backdrop-blur-xl border border-white/10 rounded-2xl p-6">
      <h2 class="text-xl font-semibold text-white mb-3 flex items-center gap-2">
        <span class="w-6 h-6 rounded-lg bg-gradient-to-br from-violet-500 to-cyan-500 flex items-center justify-center text-xs">📦</span>
        Fixed Card Title
      </h2>
      <p class="text-slate-400">This is a test card with fixed content.</p>
    </div>
  </div>

  <!-- Component Card -->
  <SimpleCard title="Component Card" content="This is component content using auto-import." />
</div>

</body>
</html>