diff --git a/desktop/src/globals.css b/desktop/src/globals.css index beffa638..fbc756a6 100644 --- a/desktop/src/globals.css +++ b/desktop/src/globals.css @@ -42,12 +42,12 @@ h4 { @apply text-lg font-medium; } } .page-animation-enter-active, .page-animation-leave-active { - transition: opacity 160ms, transform 175ms; + transition: opacity 130ms, transform 155ms; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } -.page-animation-enter, .page-animation-leave-to { - opacity: 0; +.page-animation-enter { + opacity: 0.1; transform: translateX(-75px); } @@ -56,6 +56,11 @@ h4 { @apply text-lg font-medium; } transform: translateX(0); } +.page-animation-leave-to { + opacity: 0; + transform: translateX(75px); +} + .noti-animation-enter-active, .noti-animation-leave-active { transition: opacity 160ms, transform 175ms; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); diff --git a/desktop/src/types/global.d.ts b/desktop/src/types/global.d.ts index 441a7929..04a2db47 100644 --- a/desktop/src/types/global.d.ts +++ b/desktop/src/types/global.d.ts @@ -1,4 +1,17 @@ declare namespace globalThis { export type WithIndex = T & { index: number } export type MakeOptional = Omit & Partial> +} + +// TODO remove in place for specta-generated types +interface Mod { + id: string; + name: string; + description: string; + author: string; + icon_url: string; + provider: Provider; + page_url: string; + downloads: number; + ratings: number; } \ No newline at end of file diff --git a/desktop/src/ui/components/content/ModCard.tsx b/desktop/src/ui/components/content/ModCard.tsx new file mode 100644 index 00000000..01bc3e0a --- /dev/null +++ b/desktop/src/ui/components/content/ModCard.tsx @@ -0,0 +1,62 @@ +import { Download01Icon, HeartIcon } from '@untitled-theme/icons-solid'; +import { useNavigate } from '@solidjs/router'; +import { abbreviateNumber } from '../../../utils/primitives'; +import BrowserMod from '~ui/pages/browser/BrowserMod'; + +// TODO: Remove in place for specta generated types +export enum Provider { + Curseforge, + Modrinth, + Polyfrost, + Skyclient, +} + +function ModCard(props: Mod) { + const navigate = useNavigate(); + + function redirect() { + navigate(BrowserMod.getUrl({ + id: props.id, + provider: Provider[props.provider] || 'unknown', + })); + } + + return ( +
+
+ {`Icon + {`Icon +
+
+
+
{props.name}
+

+ By + {' '} + {props.author} + {' '} + on + {' '} + {Provider[props.provider]} +

+
+ +

{props.description}

+ +
+
+ + {abbreviateNumber(props.downloads)} +
+ +
+ + {abbreviateNumber(props.ratings)} +
+
+
+
+ ); +} + +export default ModCard; diff --git a/desktop/src/ui/pages/browser/BrowserMain.tsx b/desktop/src/ui/pages/browser/BrowserMain.tsx index 5b9b7051..c249edc2 100644 --- a/desktop/src/ui/pages/browser/BrowserMain.tsx +++ b/desktop/src/ui/pages/browser/BrowserMain.tsx @@ -1,10 +1,9 @@ -import { Download01Icon, FileCode01Icon, FilterLinesIcon, HeartIcon, SearchMdIcon } from '@untitled-theme/icons-solid'; -import { type Accessor, For, type Setter, createEffect, createSignal } from 'solid-js'; +import { Download01Icon, FileCode01Icon, FilterLinesIcon, SearchMdIcon } from '@untitled-theme/icons-solid'; +import { For, createSignal } from 'solid-js'; import Button from '~ui/components/base/Button'; import Dropdown from '~ui/components/base/Dropdown'; import TextField from '~ui/components/base/TextField'; -import ScrollableContainer from '~ui/components/ScrollableContainer'; -import { abbreviateNumber } from '~utils/primitives'; +import ModCard, { Provider } from '~ui/components/content/ModCard'; import createSortable from '~utils/sorting'; interface CardProps { @@ -15,13 +14,6 @@ interface CardProps { provider: Provider; }; -enum Provider { - Curseforge, - Modrinth, - Polyfrost, - Skyclient, -} - interface BrowserFilters { provider: Provider[]; // TODO: Change with Provider types from Rust } @@ -90,22 +82,25 @@ function BrowserMain() { ); } +export const modStore: Mod[] = [ + { + id: '1yIQcc2b', + name: 'EvergreenHUD', + description: 'Improves your heads up display.', + author: 'Polyfrost', + icon_url: 'https://cdn.modrinth.com/data/1yIQcc2b/icon.png', + page_url: 'https://modrinth.com/mod/evergreenhud', + provider: Provider.Modrinth, + downloads: 281700, + ratings: 220, + }, +]; + const _modRowData: ModsRowProps[] = [ { header: 'Highly Endorsed', category: 'endorsed', - mods: [ - { - name: 'EvergreenHUD', - description: 'Improves your heads up display.', - author: 'Polyfrost', - icon_url: 'https://cdn.modrinth.com/data/1yIQcc2b/icon.png', - page_url: 'https://modrinth.com/mod/evergreenhud', - provider: Provider.Modrinth, - downloads: 281700, - ratings: 220, - }, - ], + mods: modStore, }, ]; @@ -115,17 +110,6 @@ interface ModsRowProps { mods: Mod[]; }; -interface Mod { - name: string; - description: string; - author: string; - icon_url: string; - provider: Provider; - page_url: string; - downloads: number; - ratings: number; -} - function ModsRow(props: ModsRowProps) { return (
@@ -144,43 +128,4 @@ function ModsRow(props: ModsRowProps) { ); } -function ModCard(props: Mod) { - return ( -
-
- {`Icon - {`Icon -
-
-
-
{props.name}
-

- By - {' '} - {props.author} - {' '} - on - {' '} - {Provider[props.provider]} -

-
- -

{props.description}

- -
-
- - {abbreviateNumber(props.downloads)} -
- -
- - {abbreviateNumber(props.ratings)} -
-
-
-
- ); -} - export default BrowserMain; diff --git a/desktop/src/ui/pages/browser/BrowserMod.tsx b/desktop/src/ui/pages/browser/BrowserMod.tsx new file mode 100644 index 00000000..9091ec95 --- /dev/null +++ b/desktop/src/ui/pages/browser/BrowserMod.tsx @@ -0,0 +1,32 @@ +import { type Params, useSearchParams } from '@solidjs/router'; +import { Match, Switch } from 'solid-js'; + +interface BrowserModParams extends Params { + id: string; + provider: string; +} + +function BrowserMod() { + const [params] = useSearchParams(); + const isInvalid = !params.id || !params.provider; + + return ( + + + {/* TODO */} +
uh oh this doesnt exist
+ + +
+ {JSON.stringify(params)} +
+ + + ); +} + +BrowserMod.getUrl = function (params: BrowserModParams): string { + return `/browser/mod?id=${params.id}&fprovider=${params.provider}`; +}; + +export default BrowserMod; diff --git a/desktop/src/ui/pages/browser/BrowserRoot.tsx b/desktop/src/ui/pages/browser/BrowserRoot.tsx index bf12b62b..b41d4d43 100644 --- a/desktop/src/ui/pages/browser/BrowserRoot.tsx +++ b/desktop/src/ui/pages/browser/BrowserRoot.tsx @@ -2,12 +2,14 @@ import { Route } from '@solidjs/router'; import type { ParentProps } from 'solid-js'; import BrowserMain from './BrowserMain'; import BrowserCategory from './BrowserCategory'; +import BrowserMod from './BrowserMod'; function BrowserRoutes() { return ( <> + ); }