Initial commit: Kottgard testing website code

docs/annotated/src/app/shop/layout.annotated.tsx

@@ -0,0 +1,48 @@
+/**
+ * ANNOTATED COPY — every line explained
+ * Source: src/app/shop/layout.tsx
+ * NOT used by the app — read this to learn how the real file works
+ */
+// Import React — core UI library (components, hooks, JSX)
+import { Suspense } from 'react';
+// (blank line — separates logical blocks for readability)
+// Named export constant — shared config/data imported elsewhere
+export const metadata = {
+  // Property or array item — trailing comma allowed in TypeScript
+  title: 'Shop',
+  // Line 5: description:
+  description:
+    // Property or array item — trailing comma allowed in TypeScript
+    'Browse premium halal chicken, beef, lamb, and fish. Customized cuts delivered fresh to your door.',
+// Closing brace — end of block (function, if, object, JSX)
+};
+// (blank line — separates logical blocks for readability)
+// Default export — main component/page Next.js or other files import
+export default function ShopLayout({
+  // Property or array item — trailing comma allowed in TypeScript
+  children,
+// Closing brace — end of block (function, if, object, JSX)
+}: {
+  // Line 12: children: React.ReactNode;
+  children: React.ReactNode;
+// Closing brace — end of block (function, if, object, JSX)
+}) {
+  // Return value from function
+  return <Suspense fallback={<ShopLoading />}>{children}</Suspense>;
+// Closing brace — end of block (function, if, object, JSX)
+}
+// (blank line — separates logical blocks for readability)
+// Function declaration — reusable logic in this file
+function ShopLoading() {
+  // Return JSX — describes UI tree React renders to the DOM
+  return (
+    // JSX element — HTML-like tag becomes React component in browser
+    <div className="flex min-h-[50vh] items-center justify-center">
+      // JSX element — HTML-like tag becomes React component in browser
+      <div className="h-8 w-8 animate-spin rounded-full border-4 border-brand-200 border-t-brand-700" />
+    // JSX element — HTML-like tag becomes React component in browser
+    </div>
+  // Line 22: );
+  );
+// Closing brace — end of block (function, if, object, JSX)
+}