dashboards/Cookbook/pages/browse.ps1
|
$browse = New-UDPage -Name "Browse" -Url "/browse" -Content { New-UDStyle -Style @" :root { --lilac: #B58CFF; --lilac-dark: #8E6BFF; --border: rgba(181, 140, 255, 0.22); --text: #241A37; } .browse-wrap { padding: 18px; border-radius: 18px; background: radial-gradient(circle at 20% 0%, rgba(181,140,255,0.14) 0%, transparent 42%), radial-gradient(circle at 100% 25%, rgba(181,140,255,0.10) 0%, transparent 45%), linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,248,255,1) 100%); } .recipe-card { border-radius: 18px !important; border: 1px solid var(--border) !important; box-shadow: 0 14px 34px rgba(0,0,0,0.07) !important; overflow: hidden; background: rgba(255,255,255,0.92) !important; } .recipe-card-header { padding: 12px 12px 10px 12px; } .btn-primary button { border-radius: 14px !important; background: var(--lilac-dark) !important; color: white !important; font-weight: 950 !important; text-transform: none !important; } .btn-ghost button { border-radius: 14px !important; background: rgba(181, 140, 255, 0.08) !important; border: 1px solid rgba(181, 140, 255, 0.25) !important; color: var(--lilac-dark) !important; font-weight: 950 !important; text-transform: none !important; } "@ -Content { New-UDElement -Tag "div" -Attributes @{ className="browse-wrap" } -Content { New-UDStack -Direction row -JustifyContent space-between -AlignItems center -Content { New-UDStack -Direction column -Spacing 0 -Content { New-UDTypography -Text "Browse Recipes" -Variant h4 -Style @{ fontWeight="950"; color="#241A37"; margin="0" } New-UDTypography -Text "Add, edit, and upload images directly in the modal." -Variant body2 -Style @{ color="rgba(36,26,55,0.72)" marginTop="4px" } } New-UDButton -Text "Add Recipe" -ClassName "btn-primary" -OnClick { Show-RecipeModal -SyncId @("recipeCards") } } New-UDHtml -Markup "<div style='height:16px;'></div>" New-UDDynamic -Id "recipeCards" -Content { $recipes = Get-Recipe -Search "" -Tag "" -FavoriteOnly:$false if (-not $recipes) { New-UDTypography -Text "No recipes yet. Click Add Recipe." -Variant h6 -Style @{ fontWeight="900"; color="#241A37" } return } New-UDGrid -Container -Spacing 2 -Content { foreach ($r in @($recipes)) { New-UDGrid -Item -ExtraSmallSize 12 -SmallSize 6 -MediumSize 4 -LargeSize 3 -Content { New-UDCard -ClassName "recipe-card" -Content { $imgPath = Get-RecipeImagePath -RecipeId $r.RecipeId if ($imgPath) { New-UDImage -Path $imgPath -Height 92 -Attributes @{ style = @{ width = "100%" objectFit = "cover" } } } else { New-UDElement -Tag "div" -Attributes @{ style = @{ height = "92px" background = "linear-gradient(120deg, rgba(181,140,255,0.28), rgba(142,107,255,0.10))" } } -Content { } } New-UDElement -Tag "div" -Attributes @{ className="recipe-card-header" } -Content { New-UDTypography -Text $r.Title -Variant h6 -Style @{ fontWeight="950" color="#241A37" margin="0" lineHeight="1.2" } if ($r.Description) { $desc = $r.Description if ($desc.Length -gt 120) { $desc = $desc.Substring(0,120) + "…" } New-UDTypography -Text $desc -Variant body2 -Style @{ color="rgba(36,26,55,0.72)" marginTop="6px" lineHeight="1.35" } } New-UDHtml -Markup "<div style='height:10px;'></div>" New-UDStack -Direction row -JustifyContent flex-end -Spacing 1 -Content { New-UDButton -Text "Edit" -ClassName "btn-ghost" -OnClick { Show-RecipeModal -RecipeId $r.RecipeId -SyncId @("recipeCards") } New-UDButton -Text "View" -ClassName "btn-ghost" -OnClick { Invoke-UDRedirect -Url "/recipe/$($r.RecipeId)" } } } } } } } } } } } |