diff --git a/packages/solid/bun.lock b/packages/solid/bun.lock index ad6e313..262ecaf 100644 --- a/packages/solid/bun.lock +++ b/packages/solid/bun.lock @@ -4,7 +4,7 @@ "": { "name": "example-basic", "dependencies": { - "@m3-components/solid": "0.1.17", + "@m3-components/solid": "0.2.0", "@solid-primitives/media": "^2.3.3", "@solidjs/meta": "^0.29.4", "@solidjs/router": "^0.15.3", @@ -184,7 +184,7 @@ "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.25", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ=="], - "@m3-components/solid": ["@m3-components/solid@0.1.17", "", { "dependencies": { "@solid-primitives/event-listener": "^2.4.3", "animejs": "^4.0.2", "solid-js": "^1.9.5", "tailwind-variants": "^1.0.0" } }, "sha512-KXNovjVIl0Tr0WhASn71t07DFO98S2VyDMa0453Q6Z4CA8FA91h65uaGkMxL4r9SmUdMOraxMeKNG8GJgV/bZQ=="], + "@m3-components/solid": ["@m3-components/solid@0.2.0", "", { "dependencies": { "@solid-primitives/event-listener": "^2.4.3", "animejs": "^4.0.2", "solid-js": "^1.9.5", "tailwind-variants": "^1.0.0" } }, "sha512-kJ2dPUeJlMJFVAUBBkeAbDkVt409LD0aT+hkilnUT5en6IfQCE4EUzk9BPPbYfzMa4B8nutMlfAyRwcYREbJ9A=="], "@mapbox/node-pre-gyp": ["@mapbox/node-pre-gyp@2.0.0", "", { "dependencies": { "consola": "^3.2.3", "detect-libc": "^2.0.0", "https-proxy-agent": "^7.0.5", "node-fetch": "^2.6.7", "nopt": "^8.0.0", "semver": "^7.5.3", "tar": "^7.4.0" }, "bin": { "node-pre-gyp": "bin/node-pre-gyp" } }, "sha512-llMXd39jtP0HpQLVI37Bf1m2ADlEb35GYSh1SDSLsBhR+5iCxiNGlT31yqbNtVHygHAtMy6dWFERpU2JgufhPg=="], diff --git a/packages/solid/package.json b/packages/solid/package.json index b578d64..761f74b 100644 --- a/packages/solid/package.json +++ b/packages/solid/package.json @@ -8,7 +8,7 @@ "version": "vinxi version" }, "dependencies": { - "@m3-components/solid": "0.1.17", + "@m3-components/solid": "0.2.0", "@solid-primitives/media": "^2.3.3", "@solidjs/meta": "^0.29.4", "@solidjs/router": "^0.15.3", diff --git a/packages/solid/src/app.tsx b/packages/solid/src/app.tsx index 6437e76..8e1ab36 100644 --- a/packages/solid/src/app.tsx +++ b/packages/solid/src/app.tsx @@ -4,7 +4,7 @@ import { FileRoutes } from "@solidjs/start/router"; import { onMount, Suspense } from "solid-js"; import "./app.css"; import "@m3-components/solid/index.css"; -import { setActiveTab, tabMap } from "./components/shell/Navigation"; +import { setActiveTab, tabMap } from "./components/layout/Navigation"; import { minimatch } from "minimatch"; export const refreshTab = (path: string) => { diff --git a/packages/solid/src/components/common.d.ts b/packages/solid/src/components/common.d.ts index 5b7998d..662bab0 100644 --- a/packages/solid/src/components/common.d.ts +++ b/packages/solid/src/components/common.d.ts @@ -1,3 +1,4 @@ import { JSX } from "solid-js"; -export type DivProps = JSX.HTMLAttributes \ No newline at end of file +export type DivProps = JSX.HTMLAttributes; +export type ElementProps = JSX.HTMLAttributes; diff --git a/packages/solid/src/components/icons/Edit.tsx b/packages/solid/src/components/icons/Edit.tsx new file mode 100644 index 0000000..da93209 --- /dev/null +++ b/packages/solid/src/components/icons/Edit.tsx @@ -0,0 +1,12 @@ +import { SVGIconComponent } from "./types"; + +export const EditIcon: SVGIconComponent = (props) => { + return ( + + + + ); +}; diff --git a/packages/solid/src/components/icons/index.tsx b/packages/solid/src/components/icons/index.tsx new file mode 100644 index 0000000..71dca9b --- /dev/null +++ b/packages/solid/src/components/icons/index.tsx @@ -0,0 +1,5 @@ +export * from "./Home"; +export * from "./Music"; +export * from "./Album"; +export * from "./Search"; +export * from "./Edit"; \ No newline at end of file diff --git a/packages/solid/src/components/layout/Body.tsx b/packages/solid/src/components/layout/Body.tsx new file mode 100644 index 0000000..1041878 --- /dev/null +++ b/packages/solid/src/components/layout/Body.tsx @@ -0,0 +1,10 @@ +import { Component } from "solid-js"; +import { DivProps } from "~/components/common"; + +export const BodyRegion: Component = (props) => { + return ( +
+ {props.children} +
+ ); +}; diff --git a/packages/solid/src/components/layout/Navigation/Desktop.tsx b/packages/solid/src/components/layout/Navigation/Desktop.tsx new file mode 100644 index 0000000..f3a0cbf --- /dev/null +++ b/packages/solid/src/components/layout/Navigation/Desktop.tsx @@ -0,0 +1,31 @@ +import { Component } from "solid-js"; +import LogoLight from "/icons/zh/appbar_desktop_light.svg"; +import LogoDark from "/icons/zh/appbar_desktop_dark.svg"; +import { DynamicImage } from "~/components/utils/DynamicImage"; +import { + AppBar, + AppBarLeadingElement, + AppBarSearchBox, + AppBarSearchContainer, + AppBarTrailingElement, + AppBarTrailingElementGroup, + IconButton +} from "@m3-components/solid"; + +export const NavigationDesktop: Component = () => { + return ( + + ); +}; diff --git a/packages/solid/src/components/shell/Navigation.tsx b/packages/solid/src/components/layout/Navigation/Mobile.tsx similarity index 64% rename from packages/solid/src/components/shell/Navigation.tsx rename to packages/solid/src/components/layout/Navigation/Mobile.tsx index 3721343..c3ce821 100644 --- a/packages/solid/src/components/shell/Navigation.tsx +++ b/packages/solid/src/components/layout/Navigation/Mobile.tsx @@ -1,6 +1,4 @@ -import { Component, createEffect, createMemo, createSignal, For, on, onMount } from "solid-js"; -import { HomeIcon } from "../icons/Home"; -import { MusicIcon } from "../icons/Music"; +import { Component, createEffect, createSignal, For } from "solid-js"; import { NavigationRailFAB, NavigationRail, @@ -12,78 +10,14 @@ import { AppBarSearchBox, AppBarTrailingElementGroup, AppBarTrailingElement, - IconButton, AppBarSearchContainer + IconButton, + AppBarSearchContainer } from "@m3-components/solid"; import { A } from "@solidjs/router"; -import { AlbumIcon } from "~/components/icons/Album"; -import { SearchIcon } from "../icons/Search"; +import { SearchIcon } from "~/components/icons/Search"; import { Portal } from "solid-js/web"; -import { animate, createTimer, utils } from "animejs"; -import { tv } from "tailwind-variants"; - -export const [activeTab, setActiveTab] = createSignal(-1); -export const [navigationExpanded, setNavigationExpanded] = createSignal(false); - -interface Action { - icon: Component; - label: string; - href: string; -} - -export const actions: Action[] = [ - { - icon: HomeIcon, - label: "主页", - href: "/" - }, - { - icon: MusicIcon, - label: "歌曲", - href: "/songs" - }, - { - icon: AlbumIcon, - label: "专辑", - href: "/albums" - } -]; - -export const actionsEn: Action[] = [ - { - icon: HomeIcon, - label: "Home", - href: "/en/" - }, - { - icon: MusicIcon, - label: "Songs", - href: "/en/songs" - }, - { - icon: AlbumIcon, - label: "Albums", - href: "/en/albums" - } -]; - -export const tabMap = { - "/": 0, - "/song*": 1, - "/song/**/*": 1, - "/albums": 2, - "/album/**/*": 2, - "/en/": 0, - "/en/songs": 1, - "/en/song*": 1, - "/en/song/**/*": 1, - "/en/albums": 2, - "/en/album/**/*": 2 -}; - -const searchT = { - zh: "搜索", - en: "Search" -}; +import { animate } from "animejs"; +import { actions, actionsEn, activeTab, navigationExpanded, searchT, setActiveTab, setNavigationExpanded } from "."; export const NavigationMobile: Component<{ lang?: "zh" | "en" }> = (props) => { const [el, setEl] = createSignal(null); @@ -119,7 +53,7 @@ export const NavigationMobile: Component<{ lang?: "zh" | "en" }> = (props) => { - + @@ -166,4 +100,4 @@ export const NavigationMobile: Component<{ lang?: "zh" | "en" }> = (props) => { ); -}; \ No newline at end of file +}; diff --git a/packages/solid/src/components/layout/Navigation/index.tsx b/packages/solid/src/components/layout/Navigation/index.tsx new file mode 100644 index 0000000..991a1b2 --- /dev/null +++ b/packages/solid/src/components/layout/Navigation/index.tsx @@ -0,0 +1,66 @@ +import { Component, createSignal } from "solid-js"; +import { AlbumIcon, HomeIcon, MusicIcon } from "~/components/icons"; + +export const [activeTab, setActiveTab] = createSignal(-1); +export const [navigationExpanded, setNavigationExpanded] = createSignal(false); + +interface Action { + icon: Component; + label: string; + href: string; +} + +export const actions: Action[] = [ + { + icon: HomeIcon, + label: "主页", + href: "/" + }, + { + icon: MusicIcon, + label: "歌曲", + href: "/songs" + }, + { + icon: AlbumIcon, + label: "专辑", + href: "/albums" + } +]; + +export const actionsEn: Action[] = [ + { + icon: HomeIcon, + label: "Home", + href: "/en/" + }, + { + icon: MusicIcon, + label: "Songs", + href: "/en/songs" + }, + { + icon: AlbumIcon, + label: "Albums", + href: "/en/albums" + } +]; + +export const tabMap = { + "/": 0, + "/song*": 1, + "/song/**/*": 1, + "/albums": 2, + "/album/**/*": 2, + "/en/": 0, + "/en/songs": 1, + "/en/song*": 1, + "/en/song/**/*": 1, + "/en/albums": 2, + "/en/album/**/*": 2 +}; + +export const searchT = { + zh: "搜索", + en: "Search" +}; diff --git a/packages/solid/src/components/layout/index.tsx b/packages/solid/src/components/layout/index.tsx new file mode 100644 index 0000000..13e52a0 --- /dev/null +++ b/packages/solid/src/components/layout/index.tsx @@ -0,0 +1,28 @@ +import { NavigationMobile } from "./Navigation/Mobile"; +import { DivProps } from "../common"; +import { Component } from "solid-js"; +import { BeforeLeaveEventArgs, useBeforeLeave } from "@solidjs/router"; +import { refreshTab } from "~/app"; +import { NavigationDesktop } from "./Navigation/Desktop"; +import { BodyRegion } from "./Body"; + +interface LayoutProps extends DivProps { + lang?: "zh" | "en"; +} + +export const Layout: Component = (props) => { + useBeforeLeave((e: BeforeLeaveEventArgs) => { + if (typeof e.to === "number") { + refreshTab(e.to.toString()); + return; + } + refreshTab(e.to); + }); + return ( +
+ + + {props.children} +
+ ); +}; diff --git a/packages/solid/src/components/shell/Layout.tsx b/packages/solid/src/components/shell/Layout.tsx deleted file mode 100644 index 2dc68cb..0000000 --- a/packages/solid/src/components/shell/Layout.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { NavigationMobile } from "./Navigation"; -import { DivProps } from "../common"; -import { Component } from "solid-js"; -import { BeforeLeaveEventArgs, useBeforeLeave } from "@solidjs/router"; -import { refreshTab } from "~/app"; -import LogoLight from "/icons/zh/appbar_desktop_light.svg"; -import LogoDark from "/icons/zh/appbar_desktop_dark.svg"; -import { DynamicImage } from "~/components/utils/DynamicImage"; -import { - AppBar, - AppBarLeadingElement, - AppBarSearchBox, - AppBarSearchContainer, - AppBarTrailingElement, - AppBarTrailingElementGroup, - IconButton -} from "@m3-components/solid"; - -export const BodyRegion: Component = (props) => { - return ( -
- {props.children} -
- ); -}; - -interface LayoutProps extends DivProps { - lang?: "zh" | "en"; -} - -export const Layout: Component = (props) => { - useBeforeLeave((e: BeforeLeaveEventArgs) => { - if (typeof e.to === "number") { - refreshTab(e.to.toString()); - return; - } - refreshTab(e.to); - }); - return ( -
- - - {props.children} -
- ); -}; diff --git a/packages/solid/src/components/song/TabSwitcher.tsx b/packages/solid/src/components/song/TabSwitcher.tsx index 7026ae9..6f0d1d8 100644 --- a/packages/solid/src/components/song/TabSwitcher.tsx +++ b/packages/solid/src/components/song/TabSwitcher.tsx @@ -1,21 +1,14 @@ import { Button } from "@m3-components/solid"; import { A } from "@solidjs/router"; -import { tv } from "tailwind-variants"; -import { navigationExpanded } from "~/components/shell/Navigation"; +import { Component, splitProps } from "solid-js"; +import { ElementProps } from "../common"; + +export const TabSwitcher: Component = (props) => { + const [_v, rest] = splitProps(props, ["class"]); -export const TabSwitcher = () => { - const tabsContainerStyle = tv({ - base: "w-full lg:w-48 gap-4 flex lg:flex-col items-center", - variants: { - expanded: { - true: "lg:self-start xl:self-center", - false: "self-center" - } - } - }); return ( -