@linktr.ee/linkapp 0.0.21 → 0.0.22

package/dev-server/components/SettingsPreview.tsx

@@ -0,0 +1,330 @@
+import { LinkAppSettings, SettingsElement } from "../../src/types";
+
+interface SettingsPreviewProps {
+  settings: LinkAppSettings;
+}
+
+export function SettingsPreview({ settings }: SettingsPreviewProps) {
+  return (
+    <div className="max-w-4xl mx-auto p-6 space-y-6">
+      {/* Header */}
+      <div className="space-y-2">
+        <h2 className="text-2xl font-bold">{settings.title}</h2>
+        {settings.overview && (
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+            {settings.overview.title && (
+              <h3 className="font-semibold text-blue-900 mb-1">
+                {settings.overview.title}
+              </h3>
+            )}
+            <p className="text-blue-800 text-sm">
+              {settings.overview.description}
+            </p>
+          </div>
+        )}
+      </div>
+
+      {/* Metadata */}
+      <div className="grid grid-cols-2 gap-4 bg-gray-50 border border-gray-200 rounded-lg p-4">
+        <div>
+          <span className="text-sm font-medium text-gray-600">Uses URL:</span>
+          <span className="ml-2 text-sm">
+            {settings.uses_url || settings.has_url ? "Yes" : "No"}
+          </span>
+        </div>
+        <div>
+          <span className="text-sm font-medium text-gray-600">
+            Supports Featured Layout:
+          </span>
+          <span className="ml-2 text-sm">
+            {settings.supports_featured_layout ? "Yes" : "No"}
+          </span>
+        </div>
+        {settings.icon && (
+          <div>
+            <span className="text-sm font-medium text-gray-600">Icon:</span>
+            <span className="ml-2 text-sm">{settings.icon}</span>
+          </div>
+        )}
+        {settings.settings_tab_title && (
+          <div>
+            <span className="text-sm font-medium text-gray-600">
+              Settings Tab Title:
+            </span>
+            <span className="ml-2 text-sm">{settings.settings_tab_title}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Setup Instructions */}
+      {settings.setup_instructions && (
+        <div className="bg-green-50 border border-green-200 rounded-lg p-4">
+          {settings.setup_instructions.title && (
+            <h3 className="font-semibold text-green-900 mb-1">
+              {settings.setup_instructions.title}
+            </h3>
+          )}
+          <p className="text-green-800 text-sm">
+            {settings.setup_instructions.description}
+          </p>
+        </div>
+      )}
+
+      {/* Settings Elements */}
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Settings Elements</h3>
+        {settings.elements.length === 0 ? (
+          <p className="text-gray-500 italic">No settings elements defined</p>
+        ) : (
+          <div className="space-y-4">
+            {settings.elements.map((element, index) => (
+              <SettingsElementCard key={element.id} element={element} index={index} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface SettingsElementCardProps {
+  element: SettingsElement;
+  index: number;
+}
+
+function SettingsElementCard({ element, index }: SettingsElementCardProps) {
+  return (
+    <div className="border border-gray-300 rounded-lg p-4 bg-white shadow-sm">
+      <div className="flex items-start justify-between mb-3">
+        <div className="flex-1">
+          <div className="flex items-center gap-2">
+            <span className="text-xs font-mono bg-gray-100 px-2 py-1 rounded">
+              {index + 1}
+            </span>
+            <h4 className="font-semibold text-lg">{element.title || element.label}</h4>
+          </div>
+          <p className="text-sm text-gray-600 mt-1">
+            <span className="font-mono text-xs bg-blue-100 text-blue-800 px-1.5 py-0.5 rounded">
+              {element.id}
+            </span>
+          </p>
+        </div>
+        <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
+          {element.inputType}
+        </span>
+      </div>
+
+      {element.description && (
+        <p className="text-sm text-gray-700 mb-3">{element.description}</p>
+      )}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+        {element.placeholder && (
+          <div>
+            <span className="font-medium text-gray-600">Placeholder:</span>
+            <span className="ml-2 text-gray-800">{element.placeholder}</span>
+          </div>
+        )}
+
+        {element.defaultValue !== undefined && (
+          <div>
+            <span className="font-medium text-gray-600">Default Value:</span>
+            <span className="ml-2 text-gray-800 font-mono text-xs">
+              {typeof element.defaultValue === "boolean"
+                ? element.defaultValue.toString()
+                : Array.isArray(element.defaultValue)
+                  ? `[${element.defaultValue.join(", ")}]`
+                  : element.defaultValue}
+            </span>
+          </div>
+        )}
+
+        {element.validation && (
+          <div className="col-span-2">
+            <span className="font-medium text-gray-600">Validation:</span>
+            <div className="ml-2 mt-1 space-y-1">
+              {element.validation.required && (
+                <div className="text-xs">
+                  <span className="bg-red-100 text-red-800 px-2 py-0.5 rounded">
+                    Required
+                  </span>
+                </div>
+              )}
+              {element.validation.minLength !== undefined && (
+                <div className="text-xs text-gray-600">
+                  Min Length: {element.validation.minLength}
+                </div>
+              )}
+              {element.validation.maxLength !== undefined && (
+                <div className="text-xs text-gray-600">
+                  Max Length: {element.validation.maxLength}
+                </div>
+              )}
+              {element.validation.min !== undefined && (
+                <div className="text-xs text-gray-600">
+                  Min: {element.validation.min}
+                </div>
+              )}
+              {element.validation.max !== undefined && (
+                <div className="text-xs text-gray-600">
+                  Max: {element.validation.max}
+                </div>
+              )}
+              {element.validation.maxSize !== undefined && (
+                <div className="text-xs text-gray-600">
+                  Max Size: {element.validation.maxSize}
+                </div>
+              )}
+              {element.validation.pattern && (
+                <div className="text-xs text-gray-600 font-mono">
+                  Pattern: {element.validation.pattern}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {element.options && element.options.length > 0 && (
+          <div className="col-span-2">
+            <span className="font-medium text-gray-600">Options:</span>
+            <div className="ml-2 mt-1 space-y-1">
+              {element.options.map((option) => (
+                <div key={option.value} className="text-xs bg-gray-50 px-2 py-1 rounded">
+                  <span className="font-mono text-blue-700">{option.value}</span>
+                  <span className="mx-1 text-gray-400">→</span>
+                  <span>{option.label}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {element.linkBehaviorLabels && (
+          <div className="col-span-2">
+            <span className="font-medium text-gray-600">Link Behavior Labels:</span>
+            <div className="ml-2 mt-1 space-y-1">
+              <div className="text-xs">
+                <span className="font-medium">Embed:</span> {element.linkBehaviorLabels.embedLabel}
+              </div>
+              <div className="text-xs">
+                <span className="font-medium">Link Off:</span> {element.linkBehaviorLabels.linkOffLabel}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {element.accept && element.accept.length > 0 && (
+          <div className="col-span-2">
+            <span className="font-medium text-gray-600">Accepted Files:</span>
+            <span className="ml-2 text-xs font-mono">
+              {element.accept.join(", ")}
+            </span>
+          </div>
+        )}
+
+        {element.multiple && (
+          <div>
+            <span className="bg-orange-100 text-orange-800 px-2 py-0.5 rounded text-xs">
+              Multiple values allowed
+            </span>
+          </div>
+        )}
+
+        {element.capability && (
+          <div>
+            <span className="font-medium text-gray-600">Integration Capability:</span>
+            <span className="ml-2 text-xs">{element.capability}</span>
+          </div>
+        )}
+
+        {element.vendor && (
+          <div>
+            <span className="font-medium text-gray-600">Vendor:</span>
+            <span className="ml-2 text-xs">{element.vendor}</span>
+          </div>
+        )}
+
+        {element.array_options && (
+          <div className="col-span-2">
+            <span className="font-medium text-gray-600">Array Options:</span>
+            <div className="ml-2 mt-1 space-y-1 text-xs">
+              {element.array_options.add_item_button_text && (
+                <div>Add Button: "{element.array_options.add_item_button_text}"</div>
+              )}
+              {element.array_options.add_item_title && (
+                <div>Add Title: "{element.array_options.add_item_title}"</div>
+              )}
+              {element.array_options.edit_item_title && (
+                <div>Edit Title: "{element.array_options.edit_item_title}"</div>
+              )}
+              {element.array_options.item_format && (
+                <div>Item Format: "{element.array_options.item_format}"</div>
+              )}
+              {element.array_options.min !== undefined && (
+                <div>Min Items: {element.array_options.min}</div>
+              )}
+              {element.array_options.max !== undefined && (
+                <div>Max Items: {element.array_options.max}</div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {element.array_elements && element.array_elements.length > 0 && (
+          <div className="col-span-2">
+            <span className="font-medium text-gray-600">Array Elements:</span>
+            <div className="ml-2 mt-2 space-y-2">
+              {element.array_elements.map((arrayElement, arrayIndex) => (
+                <div key={arrayElement.id} className="bg-gray-50 border border-gray-200 rounded p-3">
+                  <div className="text-xs font-mono text-blue-700 mb-1">
+                    {arrayElement.id}
+                  </div>
+                  <div className="text-xs">
+                    <span className="font-medium">Type:</span> {arrayElement.inputType}
+                  </div>
+                  {arrayElement.label && (
+                    <div className="text-xs">
+                      <span className="font-medium">Label:</span> {arrayElement.label}
+                    </div>
+                  )}
+                  {arrayElement.placeholder && (
+                    <div className="text-xs">
+                      <span className="font-medium">Placeholder:</span> {arrayElement.placeholder}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {element.conditionalDisplay && (
+          <div className="col-span-2">
+            <span className="font-medium text-gray-600">Conditional Display:</span>
+            <div className="ml-2 mt-1 text-xs bg-yellow-50 border border-yellow-200 rounded p-2">
+              Depends on <span className="font-mono">{element.conditionalDisplay.dependsOn}</span>
+              {" "}
+              {element.conditionalDisplay.operator || "equals"}
+              {" "}
+              <span className="font-mono">{String(element.conditionalDisplay.value)}</span>
+            </div>
+          </div>
+        )}
+
+        {element.action && (
+          <div className="col-span-2">
+            <span className="font-medium text-gray-600">Action:</span>
+            <div className="ml-2 mt-1 text-xs">
+              On {element.action.on}: {element.action.type}
+              {element.action.data && (
+                <div className="font-mono text-xs mt-1 bg-gray-50 p-1 rounded">
+                  {JSON.stringify(element.action.data, null, 2)}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/dev-server/components/ui/dialog.tsx

@@ -45,12 +45,15 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          'bg-background fixed top-[50%] left-[50%] z-50 w-full translate-x-[-50%] translate-y-[-50%] rounded-3xl duration-200',
           className
         )}
         {...props}
       >
-        {children}
+        <div className="flex h-full flex-col">
+          {children}
+        </div>
+
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
@@ -69,7 +72,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      className={cn(className)}
       {...props}
     />
   )