diff options
| author | Adam <[email protected]> | 2025-11-07 12:48:12 -0600 |
|---|---|---|
| committer | Adam <[email protected]> | 2025-11-07 12:48:17 -0600 |
| commit | 3a1d1a6284b66aaf385c3c97bb842a8e1d8985cb (patch) | |
| tree | 29d1d3e919aee5d34051582b7354706ad3cf0481 /theme-test.tsx | |
| parent | 4463d319c97ab167022b056aa199396bd97762e4 (diff) | |
| download | opencode-3a1d1a6284b66aaf385c3c97bb842a8e1d8985cb.tar.gz opencode-3a1d1a6284b66aaf385c3c97bb842a8e1d8985cb.zip | |
feat(desktop): custom syntax colors
Diffstat (limited to 'theme-test.tsx')
| -rw-r--r-- | theme-test.tsx | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/theme-test.tsx b/theme-test.tsx index 16559bf70..61837473e 100644 --- a/theme-test.tsx +++ b/theme-test.tsx @@ -29,6 +29,8 @@ class Repository<T> { } public find(id: number): T | undefined { + const x = undefined + type x = { foo: undefined } return this.items.find((item) => item.id === id) } @@ -66,6 +68,72 @@ const sql = ` AND created_at > '${new Date().toISOString()}' ` +// String source examples (CSS-in-JS, GraphQL, etc.) +const styledComponent = css` + .container { + display: flex; + justify-content: center; + align-items: center; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + padding: 2rem; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + + &:hover { + transform: translateY(-2px); + box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15); + } + + .title { + font-size: 1.5rem; + font-weight: bold; + color: white; + margin-bottom: 1rem; + } + } +` + +const graphqlQuery = ` + query GetUserProfile($userId: ID!) { + user(id: $userId) { + id + name + email + avatar + createdAt + posts { + id + title + content + publishedAt + comments { + id + author + content + createdAt + } + } + } + } +` + +const htmlTemplate = ` + <div class="user-card"> + <img src="${user.avatar}" alt="${user.name}" class="avatar" /> + <div class="user-info"> + <h3>${user.name}</h3> + <p>${user.email}</p> + <span class="status ${user.active ? "active" : "inactive"}"> + ${user.active ? "Active" : "Inactive"} + </span> + </div> + <div class="actions"> + <button onclick="editUser(${user.id})">Edit</button> + <button onclick="deleteUser(${user.id})" class="danger">Delete</button> + </div> + </div> +` + // Arrow functions const debounce = <T extends (...args: any[]) => any>( func: T, |
