Adding the form and the api call

frontend/src/store/qrStore.tsx

@@ -0,0 +1,56 @@
+import React, { createContext, useContext, useReducer } from 'react';
+
+export type QRState = {
+  text: string;
+  size: number;
+  imageUrl: string | null;
+  loading: boolean;
+  error: string | null;
+};
+
+type Action =
+  | { type: 'setText'; payload: string }
+  | { type: 'setSize'; payload: number }
+  | { type: 'setImageUrl'; payload: string | null }
+  | { type: 'setLoading'; payload: boolean }
+  | { type: 'setError'; payload: string | null };
+
+const initialState: QRState = {
+  text: '',
+  size: 300,
+  imageUrl: null,
+  loading: false,
+  error: null,
+};
+
+function reducer(state: QRState, action: Action): QRState {
+  switch (action.type) {
+    case 'setText':
+      return { ...state, text: action.payload };
+    case 'setSize':
+      return { ...state, size: action.payload };
+    case 'setImageUrl':
+      return { ...state, imageUrl: action.payload };
+    case 'setLoading':
+      return { ...state, loading: action.payload };
+    case 'setError':
+      return { ...state, error: action.payload };
+    default:
+      return state;
+  }
+}
+
+const QrContext = createContext<{ state: QRState; dispatch: React.Dispatch<Action> } | undefined>(
+  undefined
+);
+
+export const QrProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  return <QrContext.Provider value={{ state, dispatch }}>{children}</QrContext.Provider>;
+};
+
+export function useQrStore() {
+  const ctx = useContext(QrContext);
+  if (!ctx) throw new Error('useQrStore must be used within QrProvider');
+  return ctx;
+}