initial commit after project creation

src/components/tina-markdown/standard-elements/code-block/code-block-skeleton.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+
+export const CodeBlockSkeleton = ({ hasTabs = false }) => {
+  // Use deterministic values to prevent hydration issues
+  const skeletonLines = React.useMemo(() => {
+    const lines: Array<{ width: string; delay: string }> = [];
+    const widths = ["35%", "45%", "50%", "60%", "65%", "75%", "80%"];
+    const numberOfLines = 6; // Fixed number to prevent hydration issues
+
+    for (let i = 0; i < numberOfLines; i++) {
+      const widthIndex = i % widths.length;
+      lines.push({
+        width: widths[widthIndex],
+        delay: `${i * 0.1}s`,
+      });
+    }
+    return lines;
+  }, []);
+
+  const secondaryLines = [
+    { width: "30%", delay: "0.05s" },
+    { width: "25%", delay: "0.15s" },
+    { width: "35%", delay: "0.25s" },
+    { width: "20%", delay: "0.35s" },
+  ];
+
+  return (
+    <div className={`relative w-full ${hasTabs ? "" : "my-2"}`}>
+      {!hasTabs && <InlineCopyButton />}
+      <div
+        className={`shiki w-full overflow-x-auto bg-background-brand-code py-4 px-2 text-sm shadow-sm rounded-lg ${
+          hasTabs ? "" : "border border-neutral-border-subtle"
+        }`}
+      >
+        <div className="space-y-2">
+          {skeletonLines.map((line, index) => (
+            <div key={index} className="flex items-center space-x-4">
+              <div className="w-8 h-4 bg-neutral-border-subtle rounded animate-pulse flex-shrink-0" />
+
+              <div className="flex-1 space-y-1">
+                <div
+                  className="h-4 bg-neutral-border-subtle rounded animate-pulse"
+                  style={{
+                    width: line.width,
+                    animationDelay: line.delay,
+                  }}
+                />
+                {index % 3 === 0 && (
+                  <div
+                    className="h-4 bg-neutral-border-subtle rounded animate-pulse"
+                    style={{
+                      width:
+                        secondaryLines[
+                          Math.floor(index / 3) % secondaryLines.length
+                        ]?.width || "25%",
+                      animationDelay:
+                        secondaryLines[
+                          Math.floor(index / 3) % secondaryLines.length
+                        ]?.delay || "0.05s",
+                    }}
+                  />
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const InlineCopyButton = () => {
+  return (
+    <div className="absolute top-0 right-0 z-10 px-4 py-1 text-xs font-mono text-neutral-text-secondary">
+      <div className="w-8 h-3 bg-neutral-border-subtle rounded animate-pulse" />
+    </div>
+  );
+};