start

browser/src/App.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react'
+import { AtUriBrowser, useAtUriBrowser } from './components/AtUriBrowser'
+import './App.css'
+
+function BrowserContent() {
+  const [atUri, setAtUri] = useState('')
+  const { navigate, currentRecord } = useAtUriBrowser()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (atUri) {
+      await navigate(atUri)
+    }
+  }
+
+  return (
+    <div className="container">
+      <h1>AT Protocol Browser</h1>
+
+      <form onSubmit={handleSubmit} className="input-section">
+        <input
+          type="text"
+          placeholder="at://did:plc:xxx/ai.syui.log.post/rkey"
+          value={atUri}
+          onChange={(e) => setAtUri(e.target.value)}
+          className="at-uri-input"
+        />
+        <button type="submit">Browse</button>
+      </form>
+
+      {!currentRecord && (
+        <div className="info-section">
+          <h2>About</h2>
+          <p>Browse AT Protocol records directly from the PDS.</p>
+          <ul>
+            <li>Enter an AT URI to view its content</li>
+            <li>Example: at://did:plc:xxx/ai.syui.log.post/xxx</li>
+            <li>Supports syu.is PDS environment</li>
+          </ul>
+        </div>
+      )}
+
+      <a href="/" className="back-link">← Back to Blog</a>
+    </div>
+  )
+}
+
+function App() {
+  return (
+    <AtUriBrowser>
+      <BrowserContent />
+    </AtUriBrowser>
+  )
+}
+
+export default App