onValSelect(val)}>\n {/* Val Image (if available) */}\n {val.imageUrl && (\n

{\n // Handle image loading errors\n (e.target as HTMLImageElement).src = 'data:image/svg+xml,';\n }}\n />\n

\n )}\n \n {/* Val Type and Tier Badge */}\n

\n \n {val.type}\n \n \n {val.moiConfig?.tier !== undefined && (\n \n Tier {val.moiConfig.tier}\n \n )}\n

\n \n {/* Val Name */}\n

\n {val.name}\n

\n \n {/* Val Description (truncated) - use moi description if available */}\n

\n {val.moiConfig?.description || val.description || 'No description'}\n

\n \n {/* Tags if available */}\n {val.moiConfig?.tags && val.moiConfig.tags.length > 0 && (\n

\n {val.moiConfig.tags.slice(0, 3).map((tag, index) => (\n \n {tag}\n \n ))}\n {val.moiConfig.tags.length > 3 && (\n \n +{val.moiConfig.tags.length - 3}\n \n )}\n

\n )}\n

\n \n {/* Footer section */}\n

\n {/* Left side: HTTP endpoint indicator */}\n

\n {val.httpEndpoint && (\n \n \n HTTP\n \n )}\n \n {/* Updated date */}\n \n {new Date(val.updatedAt).toLocaleDateString('en-US', { \n month: 'short', \n day: 'numeric' \n })}\n \n

\n \n {/* Right side: Action buttons */}\n

\n {/* Edit button */}\n \n \n {/* View source button */}\n {onOpenVal && (\n \n )}\n

\n );\n };\n \n // Determine which vals to show based on active tab\n const getActiveTabVals = () => {\n if (activeTab === \"posts\") return postsVals;\n if (activeTab === \"unposted\") return unpostedVals;\n if (activeTab === \"public\") return publicVals;\n if (activeTab === \"unlisted\") return unlistedVals;\n if (activeTab === \"private\") return privateVals;\n \n // Custom tab\n return getTabVals(activeTab);\n };\n \n const currentVals = getActiveTabVals();\n \n return (\n

\n {/* Profile Header */}\n

\n {username}'s buildDotMoi Profile Preview\n

\n A preview of how your vals will appear on your build.moi profile. Click any val to add or edit its moi.md file.\n

\n \n {/* Tabs - First show custom tabs from moi files, then standard tabs */}\n

\n {/* Posts Tab (vals with moi.md) */}\n setActiveTab(\"posts\")}\n className={`py-3 border-b-2 font-medium text-sm ${\n activeTab === \"posts\"\n ? \"border-[#00b5de] text-[#00b5de]\"\n : \"border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300\"\n }`}\n >\n Posts {postsVals.length > 0 && `(${postsVals.length})`}\n \n \n {/* Custom tabs from moi.md files */}\n {customTabs.map(tab => (\n setActiveTab(tab)}\n className={`py-3 border-b-2 font-medium text-sm ${\n activeTab === tab\n ? \"border-[#00b5de] text-[#00b5de]\"\n : \"border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300\"\n }`}\n >\n {tab} {getTabVals(tab).length > 0 && `(${getTabVals(tab).length})`}\n \n ))}\n \n {/* Unposted Tab (vals without moi.md) */}\n setActiveTab(\"unposted\")}\n className={`py-3 border-b-2 font-medium text-sm ${\n activeTab === \"unposted\"\n ? \"border-[#00b5de] text-[#00b5de]\"\n : \"border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300\"\n }`}\n >\n Unposted {unpostedVals.length > 0 && `(${unpostedVals.length})`}\n \n \n {/* Standard Privacy Tabs */}\n setActiveTab(\"public\")}\n className={`py-3 border-b-2 font-medium text-sm ${\n activeTab === \"public\"\n ? \"border-[#00b5de] text-[#00b5de]\"\n : \"border-transparent text-gray-400 hover:text-gray-500 hover:border-gray-300\"\n } ml-4`}\n >\n Code (Public) {publicVals.length > 0 && `(${publicVals.length})`}\n \n setActiveTab(\"unlisted\")}\n className={`py-3 border-b-2 font-medium text-sm ${\n activeTab === \"unlisted\"\n ? \"border-[#00b5de] text-[#00b5de]\"\n : \"border-transparent text-gray-400 hover:text-gray-500 hover:border-gray-300\"\n }`}\n >\n Unlisted {unlistedVals.length > 0 && `(${unlistedVals.length})`}\n \n setActiveTab(\"private\")}\n className={`py-3 border-b-2 font-medium text-sm ${\n activeTab === \"private\"\n ? \"border-[#00b5de] text-[#00b5de]\"\n : \"border-transparent text-gray-400 hover:text-gray-500 hover:border-gray-300\"\n }`}\n >\n Private {privateVals.length > 0 && `(${privateVals.length})`}\n \n

\n \n {/* Loading state */}\n {(vals.length === 0 || loadingMoi) && (\n

{vals.length === 0 ? \"Loading vals...\" : \"Loading moi.md files...\"}

\n )}\n \n {/* Current Tab Content */}\n {!loadingMoi && vals.length > 0 && (\n <>\n {currentVals.length > 0 ? (\n

\n {currentVals.map(renderValCard)}\n

\n ) : (\n

\n No vals to display in this tab.\n

\n )}\n \n {/* Notices for non-public vals */}\n {(activeTab === \"unlisted\" || activeTab === \"private\") && (\n

\n Note: Only Public vals with moi.md files will appear on your build.moi profile.\n

\n )}\n \n {/* Notice for unposted vals */}\n {activeTab === \"unposted\" && (\n

\n Note: These vals don't have moi.md files yet. Click on a val to create one.\n

\n )}\n \n {/* Notice for posts tab */}\n {activeTab === \"posts\" && (\n

\n Note: This tab shows public vals with moi.md files that aren't excluded from posts.\n

\n )}\n \n {/* Notice for custom tabs */}\n {customTabs.includes(activeTab) && (\n

\n Note: This tab shows vals with moi.md files that include \"{activeTab}\" in their tabs list.\n

\n )}\n \n )}\n \n {/* Instructions section */}\n

How to Use This Tool:

The Posts tab shows all vals with moi.md files that will appear on your build.moi profile.
Custom tabs from your moi.md files appear between \"Posts\" and \"Unposted\".
The Unposted tab shows vals that don't have moi.md files yet.
Click any val to create or edit its moi.md file.
Use the tabs property in the moi.md frontmatter to categorize vals into custom tabs.
Use the tier property to control the display order (lower tiers appear first).
Use excludeFromPosts: true to keep a val in custom tabs but not in the main Posts tab.

\n \n {/* No vals message */}\n {!loadingMoi && vals.length > 0 && valsWithMoi.length === 0 && (\n

No Vals Found

\n It looks like you don't have any vals yet. Create some vals in Val Town to get started!\n

\n \n Go to Val Town\n \n

\n )}\n

\n );\n};\n\nexport default ProfilePreview;","deleted","label",[173,174,155],"frontend","components","permalink","https://www.val.town/x/dcm31/moiPosterImproved/code/frontend/components/ProfilePreview.tsx","extension","actionData","errors"]