feat(content): Add Context snippet for solidjs (#225)

* feat: add solid context demo

* fix: update filename

README.md

@@ -275,7 +275,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/solid.svg" />
             <b>SolidJS</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -291,12 +291,12 @@ How do we solve this ? Developers love having framework overview by examples. It
 - [x] Lifecycle
   - [x] On mount
   - [x] On unmount
-- [ ] Component composition
+- [x] Component composition
   - [x] Props
   - [x] Emit to parent
   - [x] Slot
   - [x] Slot fallback
-  - [ ] Context
+  - [x] Context
 - [x] Form input
   - [x] Input text
   - [x] Checkbox

content/4-component-composition/5-context/solid/App.jsx

@@ -0,0 +1,26 @@
+import { createSignal } from "solid-js";
+
+import { UserContext } from "./UserContext";
+import UserProfile from "./UserProfile";
+
+export default function App() {
+  // In a real app, you would fetch the user data from an API
+  const [user, setUser] = createSignal({
+    id: 1,
+    username: "unicorn42",
+    email: "unicorn42@example.com",
+  });
+
+  function updateUsername(newUsername) {
+    setUser({ ...user(), username: newUsername });
+  }
+
+  return (
+    <>
+      <h1>Welcome back, {user().username}</h1>
+      <UserContext.Provider value={[user, updateUsername]}>
+        <UserProfile />
+      </UserContext.Provider>
+    </>
+  );
+}

content/4-component-composition/5-context/solid/UserContext.jsx

@@ -0,0 +1,3 @@
+import { createContext } from "solid-js";
+
+export const UserContext = createContext();

content/4-component-composition/5-context/solid/UserProfile.jsx

@@ -0,0 +1,18 @@
+import { useContext } from "solid-js";
+
+import { UserContext } from "./UserContext";
+
+export default function UserProfile() {
+  const [user, updateUsername] = useContext(UserContext);
+
+  return (
+    <div>
+      <h2>My Profile</h2>
+      <p>Username: {user().username}</p>
+      <p>Email: {user().email}</p>
+      <button onClick={() => updateUsername("Jane")}>
+        Update username to Jane
+      </button>
+    </div>
+  );
+}