summaryrefslogtreecommitdiffhomepage
path: root/theme-test.tsx
diff options
context:
space:
mode:
authorAdam <[email protected]>2025-11-07 12:48:12 -0600
committerAdam <[email protected]>2025-11-07 12:48:17 -0600
commit3a1d1a6284b66aaf385c3c97bb842a8e1d8985cb (patch)
tree29d1d3e919aee5d34051582b7354706ad3cf0481 /theme-test.tsx
parent4463d319c97ab167022b056aa199396bd97762e4 (diff)
downloadopencode-3a1d1a6284b66aaf385c3c97bb842a8e1d8985cb.tar.gz
opencode-3a1d1a6284b66aaf385c3c97bb842a8e1d8985cb.zip
feat(desktop): custom syntax colors
Diffstat (limited to 'theme-test.tsx')
-rw-r--r--theme-test.tsx68
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,