Skip to content
This repository has been archived by the owner on Dec 17, 2024. It is now read-only.

Commit

Permalink
use image component again
Browse files Browse the repository at this point in the history
  • Loading branch information
greg6775 committed Nov 20, 2024
1 parent 9333509 commit 6370994
Show file tree
Hide file tree
Showing 5 changed files with 127 additions and 112 deletions.
13 changes: 6 additions & 7 deletions components/nav.ts
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import { delay } from "@std/async";
import { activeUser, IsLoggedIn, permCheck, showProfilePicture } from "shared/helper.ts";
import { API } from "shared/mod.ts";
import { Box, Component, Empty, Grid, Label, MaterialIcon, Popover, PrimaryButton } from "webgen/mod.ts";
import { Box, Component, Empty, Grid, Image, Label, MaterialIcon, Popover, PrimaryButton } from "webgen/mod.ts";
import "./nav.css";
import { activeTitle, pages } from "./pages.ts";

const navMenuPopover = Popover(
Box(
Label("sdf"),
activeUser.permission.map((perm) =>
Grid(
Label("SWITCH TO").addClass("title"),
...pages.map(([logo, permission, route, login]) =>
permCheck(...permission) && (!login || (login == 1 && IsLoggedIn()) || (login == 2 && !IsLoggedIn()))
? Grid(
// Image(logo, "Logo"),
// Spacer(),
Image(logo, "Logo"),
MaterialIcon("arrow_forward_ios"),
)
.addClass("small-entry")
Expand All @@ -24,7 +24,6 @@ const navMenuPopover = Popover(
perm.length
? Grid(
Label("Go to Settings"),
// Spacer(),
MaterialIcon("arrow_forward_ios"),
).addClass("small-entry", "settings")
.onClick(() => location.href = "/settings")
Expand Down Expand Up @@ -64,15 +63,14 @@ export function DynaNavigation(type: "Home" | "Music" | "Settings" | "Hosting" |
),
)
.setGap(".5rem")
.setDirection("row")
.setTemplateColumns("max-content max-content")
.setAlignItems("center")
.setJustifyContent("center")
.addClass("clickable")
.setAnchorName("--nav-menu-popover")
.onClick(() => {
navMenuPopover.showPopover();
}),
// Spacer(),
(activeUser.email.map((email) =>
email
? Grid(
Expand All @@ -92,7 +90,8 @@ export function DynaNavigation(type: "Home" | "Music" | "Settings" | "Hosting" |
.addClass("login-button")
: Empty())
).value) ?? null,
),
)
.setTemplateColumns("1fr max-content"),
IsLoggedIn() && IsLoggedIn()!.profile.verified?.email != true
? Grid(
Label("Your Email is not verified. Please check your Inbox/Spam folder.").addClass("label"),
Expand Down
2 changes: 1 addition & 1 deletion deno.jsonc
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"shared/": "./pages/shared/",
"zod/": "https://deno.land/x/[email protected]/",
// "webgen/": "../WebGen/"
"webgen/": "https://raw.githubusercontent.com/lucsoft/WebGen/f53d3dd/"
"webgen/": "https://raw.githubusercontent.com/lucsoft/WebGen/3616d3b/"
},
"lock": false,
"compilerOptions": {
Expand Down
45 changes: 23 additions & 22 deletions pages/music-landing/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -214,19 +214,19 @@ appendBody(
.addClass("opacity-60"),
)
.setMargin("10px 0 40px"),
Grid(
Grid(images())
.setGap("38px")
.addClass("icon-carousel")
.setDirection("column"),
Grid(...images().reverse())
.setGap("38px")
.addClass("icon-carousel")
.addClass("icon-carousel-reversed")
.setDirection("column"),
)
.setGap("35px")
.addClass("icon-carousel-container"),
// Grid(
// Grid(images())
// .setGap("38px")
// .addClass("icon-carousel")
// .setDirection("column"),
// Grid(...images().reverse())
// .setGap("38px")
// .addClass("icon-carousel")
// .addClass("icon-carousel-reversed")
// .setDirection("column"),
// )
// .setGap("35px")
// .addClass("icon-carousel-container"),
)
.setAlignContent("center")
.setHeight("380px")
Expand Down Expand Up @@ -331,10 +331,10 @@ appendBody(
.addClass("italic-text")
.setFontWeight("bold"),
Grid(
Image(redz, "Avatar of Redz")
// .setBorderRadius("complete")
.setAspectRatio("1/1")
.resizeToBox(),
Image(redz, "Avatar of Redz"),
// .setBorderRadius("complete")
// .setAspectRatio("1/1")
// .resizeToBox(),
Label("Redz")
.setFontWeight("bold")
.setTextSize("xl"),
Expand All @@ -352,10 +352,10 @@ appendBody(
.addClass("italic-text")
.setFontWeight("bold"),
Grid(
Image(criticz, "Avatar of Criticz")
// .setBorderRadius("complete")
.setAspectRatio("1/1")
.resizeToBox(),
Image(criticz, "Avatar of Criticz"),
// .setBorderRadius("complete")
// .setAspectRatio("1/1")
// .resizeToBox(),
Label("Criticz")
.setFontWeight("bold")
.setTextSize("xl"),
Expand All @@ -371,6 +371,7 @@ appendBody(
.setPadding("95px 0 95px 0"),
).setMaxWidth("680px"),
FullWidthSection(Footer()),
).setMaxWidth("1230px"),
)
.setMaxWidth("1230px"),
),
);
161 changes: 86 additions & 75 deletions pages/shared/footer.ts
Original file line number Diff line number Diff line change
@@ -1,86 +1,97 @@
import { Box, Component, Grid, Label } from "webgen/core/mod.ts";
// import { splash } from "../../assets/imports.ts";
import { BootstrapIcon, PrimaryButton, SecondaryButton, TextButton } from "webgen/mod.ts";
import { BootstrapIcon, Image, PrimaryButton, SecondaryButton, TextButton } from "webgen/mod.ts";
import { splash } from "../../assets/imports.ts";
import "./footer.css";

export function Footer() {
return Box(
Box(
// Image(splash, "Splash Image").addClass("splash-image"),
Box(
Box(
Label("Looks Dope?\nJoin now!").addClass("title"),
Label("Delivering Excellence. Empowering Businesses and\nIndividuals with Premium Services")
.addClass("subtitle"),
).addClass("text-section"),
PrimaryButton("Get started")
.onClick(() => location.href = "/signin")
.addClass("round-button", "large-button"),
).addClass("area-fg"),
return Grid(
Grid(
Box(
Box(
...[
["Company", [
["About Us", "/"],
["Terms and Conditions", "/p/terms"],
["Privacy Policy", "/p/privacy-policy"],
["Imprint", "/p/imprint"],
]] as const,
Label("Looks Dope?\nJoin now!").addClass("title"),
Label("Delivering Excellence. Empowering Businesses and\nIndividuals with Premium Services")
.addClass("subtitle"),
).addClass("text-section"),
PrimaryButton("Get started")
.onClick(() => location.href = "/signin")
.addClass("round-button", "large-button"),
Image(splash, "Splash Image").setWidth("572px"),
).addClass("area-fg"),
Box(
Grid(
...[
["Company", [
["About Us", "/"],
["Terms and Conditions", "/p/terms"],
["Privacy Policy", "/p/privacy-policy"],
["Imprint", "/p/imprint"],
]] as const,

["Products", [
["Music", "/music"],
["Hosting", "/hosting"],
]] as const,
["Products", [
["Music", "/music"],
["Hosting", "/hosting"],
]] as const,

["Use Cases", [
["Newcomers", "/music"],
["Personal", "/hosting"],
["Small Business", "/hosting"],
]] as const,
// ["Use Cases", [
// ["Newcomers", "/music"],
// ["Personal", "/hosting"],
// ["Small Business", "/hosting"],
// ]] as const,

["Resources", [
["Status Page", "https://status.bbn.one/"],
["Support", "mailto:[email protected]"],
]] as const,
].map(([text, items]) =>
Grid(
Label(text)
.addClass("title"),
...items.map(([title, link]) =>
TextButton(title)
.onClick(() => location.href = link)
.addClass("link")
// .setStyle(ButtonStyle.Inline)
),
).addClass("column")
) as unknown as [Component],
).addClass("grouped-links"),
Grid(
["Resources", [
["Status Page", "https://status.bbn.one/"],
["Support", "mailto:[email protected]"],
]] as const,
].map(([text, items]) =>
Grid(
...[
// ["youtube", "Youtube", "https://www.youtube.com/@bbn6775"],
// ["twitter", "Twiter", "https://twitter.com/BBN_Holding"],
// ["facebook", "Facebook", "https://www.facebook.com/bbn.holding/"],
["discord", "Discord", "https://discord.gg/dJevjw2fCe"],
["instagram", "Instagram", "https://www.instagram.com/bbn.music/"],
["mastodon", "Mastodon", "https://chaos.social/@bbn"],
// ["github", "GitHub", "https://github.com/bbn-holding/"],
]
.map(([icon, aria, link]) =>
TextButton("").addPrefix(BootstrapIcon(icon))
.onClick(() => location.href = link)
.addClass("icon")
) as unknown as [Component],
).addClass("icons"),
SecondaryButton("Join Now")
.onClick(() => location.href = "/signin")
.addClass("round-button"),
PrimaryButton("Contact Us")
.onClick(() => location.href = "mailto:[email protected]")
.addClass("round-button"),
Label(text)
.addClass("title"),
...items.map(([title, link]) =>
TextButton(title)
.onClick(() => location.href = link)
.addClass("link")
// .setStyle(ButtonStyle.Inline)
),
).addClass("column")
) as unknown as [Component],
)
.setDynamicColumns(20)
.addClass("grouped-links"),
Grid(
Grid(
...[
// ["youtube", "Youtube", "https://www.youtube.com/@bbn6775"],
// ["twitter", "Twiter", "https://twitter.com/BBN_Holding"],
// ["facebook", "Facebook", "https://www.facebook.com/bbn.holding/"],
["discord", "Discord", "https://discord.gg/dJevjw2fCe"],
["instagram", "Instagram", "https://www.instagram.com/bbn.music/"],
["mastodon", "Mastodon", "https://chaos.social/@bbn"],
// ["github", "GitHub", "https://github.com/bbn-holding/"],
]
.map(([icon, aria, link]) =>
TextButton("").addPrefix(BootstrapIcon(icon))
.onClick(() => location.href = link)
.addClass("icon")
) as unknown as [Component],
)
.addClass("icon-bar"),
).addClass("area-bg"),
).addClass("footer"),
).addClass("footer-space");
.setAutoFlow("column")
.setAutoColumn("max-content")
.addClass("icons"),
SecondaryButton("Join Now")
.onClick(() => location.href = "/signin")
.addClass("round-button"),
PrimaryButton("Contact Us")
.onClick(() => location.href = "mailto:[email protected]")
.addClass("round-button"),
)
.setGap()
.setTemplateColumns("auto max-content max-content")
.addClass("icon-bar"),
).addClass("area-bg"),
)
.setAutoFlow("row")
.setGap();
// .setMargin("calc(var(--spacing) * 2) auto var(--spacing)")
// .setMaxWidth("1235px")
// .setWidth("calc(100vw - 5rem)")
// .setJustifyItems("start");
}
18 changes: 11 additions & 7 deletions pages/shared/helper.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import { API, fileCache, Permission, stupidErrorAlert } from "shared/mod.ts";
import { asRefRecord, Component, Empty, Sheets } from "webgen/mod.ts";
import { asRefRecord, Component, Empty, Image, ImageComponent, Sheets } from "webgen/mod.ts";
import { loginRequired } from "../../components/pages.ts";
import { Drop } from "../../spec/music.ts";

// @deno-types="https://raw.githubusercontent.com/lucsoft-DevTeam/lucsoft.de/master/custom.d.ts"
import spotify from "../music-landing/assets/spotify.svg";
// @deno-types="https://raw.githubusercontent.com/lucsoft-DevTeam/lucsoft.de/master/custom.d.ts"
import deezer from "../music-landing/assets/deezer.svg";
// @deno-types="https://raw.githubusercontent.com/lucsoft-DevTeam/lucsoft.de/master/custom.d.ts"
import tidal from "../music-landing/assets/tidal.svg";
// @deno-types="https://raw.githubusercontent.com/lucsoft-DevTeam/lucsoft.de/master/custom.d.ts"
import apple from "../music-landing/assets/apple.svg";

export const allowedAudioFormats = ["audio/flac", "audio/wav", "audio/mp3"];
export const allowedImageFormats = ["image/png", "image/jpeg"];
Expand Down Expand Up @@ -244,12 +248,12 @@ export function showProfilePicture(x: ProfileData) {
// );
}

// export const streamingImages: Record<string, ImageComponent> = {
// spotify: Image(spotify, "Spotify"),
// deezer: Image(deezer, "Deezer"),
// tidal: Image(tidal, "Tidal"),
// apple: Image(apple, "Apple Music"),
// };
export const streamingImages: Record<string, ImageComponent> = {
spotify: Image(spotify, "Spotify").draw(),
deezer: Image(deezer, "Deezer").draw(),
tidal: Image(tidal, "Tidal").draw(),
apple: Image(apple, "Apple Music").draw(),
};

// export const ExistingSongDialog = (dropSongs: StateHandler<Song[]>, songs: Reference<Song[]>) => {
// const selected = asRef(<undefined | Song> undefined);
Expand Down

0 comments on commit 6370994

Please sign in to comment.