chore(devx): migrate eslint config
This commit is contained in:
Pauline
parent
0743d4479a
commit
f9ac49223d
40 changed files with 2392 additions and 6100 deletions
|
|
@ -1,40 +0,0 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:solid/typescript',
|
||||
'airbnb-base',
|
||||
'airbnb-typescript/base',
|
||||
],
|
||||
parser: '@typescript-eslint/parser',
|
||||
parserOptions: { project: ['./tsconfig.json'] },
|
||||
plugins: [
|
||||
'@typescript-eslint',
|
||||
'@stylistic/ts',
|
||||
'solid',
|
||||
],
|
||||
rules: {
|
||||
indent: 'off',
|
||||
'@typescript-eslint/indent': 'off',
|
||||
'@stylistic/ts/indent': ['error', 4],
|
||||
'@typescript-eslint/no-unused-vars': 'warn',
|
||||
'@typescript-eslint/no-namespace': 'off',
|
||||
'import/extensions': [
|
||||
'error',
|
||||
{
|
||||
ts: 'never',
|
||||
tsx: 'never',
|
||||
},
|
||||
],
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
extends: ['plugin:@typescript-eslint/disable-type-checked'],
|
||||
files: [
|
||||
'*',
|
||||
'!src/',
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -289,3 +289,5 @@ $RECYCLE.BIN/
|
|||
# .pnp.*
|
||||
|
||||
# End of https://www.toptal.com/developers/gitignore/api/node,rust,yarn,linux,macos,windows,rust-analyzer,visualstudiocode,git
|
||||
|
||||
src-tauri/gen/**
|
||||
|
|
|
|||
12
.vscode/extensions.json
vendored
12
.vscode/extensions.json
vendored
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"recommendations": [
|
||||
"tauri-apps.tauri-vscode",
|
||||
"rust-lang.rust-analyzer",
|
||||
"bradlc.vscode-tailwindcss",
|
||||
"recommendations": [
|
||||
"tauri-apps.tauri-vscode",
|
||||
"rust-lang.rust-analyzer",
|
||||
"bradlc.vscode-tailwindcss",
|
||||
// "oscarbeaumont.rspc-vscode",
|
||||
"EditorConfig.EditorConfig",
|
||||
// "prisma.prisma",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"dbaeumer.vscode-eslint"
|
||||
// "astro-build.astro-vscode"
|
||||
]
|
||||
]
|
||||
}
|
||||
|
|
|
|||
122
.vscode/settings.json
vendored
122
.vscode/settings.json
vendored
|
|
@ -1,63 +1,63 @@
|
|||
{
|
||||
"files.associations": {
|
||||
"*.scss": "tailwindcss",
|
||||
"*.css": "tailwindcss"
|
||||
},
|
||||
"[rust]": {
|
||||
"editor.defaultFormatter": "rust-lang.rust-analyzer"
|
||||
},
|
||||
"rust-analyzer.procMacro.enable": true,
|
||||
"rust-analyzer.diagnostics.experimental.enable": false,
|
||||
"search.exclude": {
|
||||
"**/node_modules": true,
|
||||
"**/bower_components": true,
|
||||
"**/*.code-search": true,
|
||||
"**/pnpm-lock.yaml": true,
|
||||
"**/.gitignore": true,
|
||||
"/packages/ctjs/types/*": true,
|
||||
"**/dist": true
|
||||
},
|
||||
"eslint.experimental.useFlatConfig": true,
|
||||
"prettier.enable": false,
|
||||
"editor.formatOnSave": false,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": "explicit",
|
||||
"source.organizeImports": "never"
|
||||
},
|
||||
"eslint.validate": [
|
||||
"javascript",
|
||||
"javascriptreact",
|
||||
"typescript",
|
||||
"typescriptreact",
|
||||
"vue",
|
||||
"html",
|
||||
"markdown",
|
||||
"json",
|
||||
"jsonc",
|
||||
"yaml",
|
||||
"astro",
|
||||
"toml",
|
||||
"solid"
|
||||
],
|
||||
"css.customData": [
|
||||
".vscode/tailwind.json"
|
||||
],
|
||||
"eslint.lintTask.enable": true,
|
||||
"eslint.workingDirectories": [],
|
||||
"explorer.fileNesting.enabled": true,
|
||||
"explorer.fileNesting.patterns": {
|
||||
"*.ts": "${capture}.js",
|
||||
"*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
|
||||
"*.jsx": "${capture}.js",
|
||||
"*.tsx": "${capture}.ts",
|
||||
".npmrc": ".nvmrc, .yarnrc.yml",
|
||||
".gitignore": ".eslintignore, .prettierignore",
|
||||
"README.md": "CONTRIBUTING.md, CODE_OF_CONDUCT.md, LICENSE",
|
||||
"Cargo.toml": "Cargo.lock",
|
||||
".eslintrc.js": ".eslintcache",
|
||||
".prettierrc.*": ".rustfmt.toml, .gitattributes, .editorconfig, .clippy.toml",
|
||||
"package.json": "package-lock.json, yarn.lock, pnpm-lock.yaml, pnpm-workspace.yaml, .pnp.cjs, .pnp.loader.mjs",
|
||||
"tsconfig.json": "tsconfig.*.json",
|
||||
"flake.nix": "shell.nix, flake.lock, Cargo.nix"
|
||||
}
|
||||
"files.associations": {
|
||||
"*.scss": "tailwindcss",
|
||||
"*.css": "tailwindcss"
|
||||
},
|
||||
"[rust]": {
|
||||
"editor.defaultFormatter": "rust-lang.rust-analyzer"
|
||||
},
|
||||
"rust-analyzer.procMacro.enable": true,
|
||||
"rust-analyzer.diagnostics.experimental.enable": false,
|
||||
"search.exclude": {
|
||||
"**/node_modules": true,
|
||||
"**/bower_components": true,
|
||||
"**/*.code-search": true,
|
||||
"**/pnpm-lock.yaml": true,
|
||||
"**/.gitignore": true,
|
||||
"/packages/ctjs/types/*": true,
|
||||
"**/dist": true
|
||||
},
|
||||
"eslint.experimental.useFlatConfig": true,
|
||||
"prettier.enable": false,
|
||||
"editor.formatOnSave": false,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": "explicit",
|
||||
"source.organizeImports": "never"
|
||||
},
|
||||
"eslint.validate": [
|
||||
"javascript",
|
||||
"javascriptreact",
|
||||
"typescript",
|
||||
"typescriptreact",
|
||||
"vue",
|
||||
"html",
|
||||
"markdown",
|
||||
"json",
|
||||
"jsonc",
|
||||
"yaml",
|
||||
"astro",
|
||||
"toml",
|
||||
"solid"
|
||||
],
|
||||
"css.customData": [
|
||||
".vscode/tailwind.json"
|
||||
],
|
||||
"eslint.lintTask.enable": true,
|
||||
"eslint.workingDirectories": [],
|
||||
"explorer.fileNesting.enabled": true,
|
||||
"explorer.fileNesting.patterns": {
|
||||
"*.ts": "${capture}.js",
|
||||
"*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
|
||||
"*.jsx": "${capture}.js",
|
||||
"*.tsx": "${capture}.ts",
|
||||
".npmrc": ".nvmrc, .yarnrc.yml",
|
||||
".gitignore": ".eslintignore, .prettierignore",
|
||||
"README.md": "CONTRIBUTING.md, CODE_OF_CONDUCT.md, LICENSE",
|
||||
"Cargo.toml": "Cargo.lock",
|
||||
".eslintrc.js": ".eslintcache",
|
||||
".prettierrc.*": ".rustfmt.toml, .gitattributes, .editorconfig, .clippy.toml",
|
||||
"package.json": "package-lock.json, yarn.lock, pnpm-lock.yaml, pnpm-workspace.yaml, .pnp.cjs, .pnp.loader.mjs",
|
||||
"tsconfig.json": "tsconfig.*.json",
|
||||
"flake.nix": "shell.nix, flake.lock, Cargo.nix"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
8
eslint.config.js
Normal file
8
eslint.config.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
// @ts-check
|
||||
|
||||
import petal from '@flowr/eslint-config';
|
||||
|
||||
export default petal({
|
||||
typescript: true,
|
||||
solid: true,
|
||||
});
|
||||
78
package.json
78
package.json
|
|
@ -1,45 +1,41 @@
|
|||
{
|
||||
"name": "polyfrost-launcher",
|
||||
"version": "0.0.0",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"serve": "vite preview",
|
||||
"tauri": "tauri",
|
||||
"lint": "eslint . --cache",
|
||||
"format": "pnpm lint --fix"
|
||||
},
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@fontsource/poppins": "^5.0.12",
|
||||
"@solidjs/router": "^0.13.0",
|
||||
"@tauri-apps/api": "2.0.0-beta.5",
|
||||
"@tauri-apps/plugin-shell": "2.0.0-beta.2",
|
||||
"@untitled-theme/icons-solid": "^0.6.0",
|
||||
"solid-js": "^1.8.15",
|
||||
"solid-transition-group": "^0.2.3",
|
||||
"name": "polyfrost-launcher",
|
||||
"type": "module",
|
||||
"version": "0.0.0",
|
||||
"description": "",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"serve": "vite preview",
|
||||
"tauri": "tauri",
|
||||
"lint": "eslint . --cache",
|
||||
"format": "pnpm lint --fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource/poppins": "^5.0.12",
|
||||
"@solidjs/router": "^0.13.0",
|
||||
"@tauri-apps/api": "2.0.0-beta.5",
|
||||
"@tauri-apps/plugin-shell": "2.0.0-beta.2",
|
||||
"@untitled-theme/icons-solid": "^0.6.0",
|
||||
"solid-js": "^1.8.15",
|
||||
"solid-transition-group": "^0.2.3",
|
||||
"uuid": "^9.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@solid/eslint-config-base": "^0.6.0",
|
||||
"@stylistic/eslint-plugin-ts": "^1.7.0",
|
||||
"@tauri-apps/cli": "2.0.0-beta.9",
|
||||
},
|
||||
"devDependencies": {
|
||||
"@flowr/eslint-config": "^2.2.1",
|
||||
"@tauri-apps/cli": "2.0.0-beta.9",
|
||||
"@types/uuid": "^9.0.8",
|
||||
"@typescript-eslint/parser": "^7.2.0",
|
||||
"autoprefixer": "^10.4.18",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"eslint-config-airbnb-typescript": "^18.0.0",
|
||||
"eslint-plugin-solid": "^0.13.1",
|
||||
"postcss": "^8.4.35",
|
||||
"postcss-easings": "^4.0.0",
|
||||
"sass": "^1.72.0",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.4.2",
|
||||
"vite": "^5.1.6",
|
||||
"vite-plugin-solid": "^2.10.2"
|
||||
}
|
||||
"autoprefixer": "^10.4.18",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-solid": "^0.13.1",
|
||||
"postcss": "^8.4.35",
|
||||
"postcss-easings": "^4.0.0",
|
||||
"sass": "^1.72.0",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.4.2",
|
||||
"vite": "^5.1.6",
|
||||
"vite-plugin-solid": "^2.10.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1663
pnpm-lock.yaml
generated
1663
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,14 +1,13 @@
|
|||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import postcssEasings from 'postcss-easings';
|
||||
import tailwind from 'tailwindcss';
|
||||
import autoprefixer from 'autoprefixer';
|
||||
|
||||
const config = {
|
||||
plugins: [
|
||||
tailwind,
|
||||
autoprefixer,
|
||||
postcssEasings
|
||||
]
|
||||
plugins: [
|
||||
tailwind,
|
||||
autoprefixer,
|
||||
postcssEasings,
|
||||
],
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
|
|
|||
|
|
@ -2,20 +2,19 @@
|
|||
name = "polyfrost-launcher"
|
||||
version = "0.0.0"
|
||||
description = "A Tauri App"
|
||||
authors = ["Polyfrost"]
|
||||
authors = [ "Polyfrost" ]
|
||||
edition = "2021"
|
||||
|
||||
|
||||
[build-dependencies]
|
||||
tauri-build = { version = "2.0.0-beta", features = [] }
|
||||
|
||||
[dependencies]
|
||||
tauri = { version = "2.0.0-beta", features = [] }
|
||||
serde = { version = "1", features = ["derive"] }
|
||||
serde = { version = "1", features = [ "derive" ] }
|
||||
serde_json = "1"
|
||||
tauri-plugin-shell = "2.0.0-beta.2"
|
||||
tauri-plugin-http = "2.0.0-beta"
|
||||
|
||||
[features]
|
||||
# This feature is used for production builds or when a dev server is not specified, DO NOT REMOVE!!
|
||||
custom-protocol = ["tauri/custom-protocol"]
|
||||
custom-protocol = [ "tauri/custom-protocol" ]
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
{
|
||||
"$schema": "../gen/schemas/desktop-schema.json",
|
||||
"identifier": "migrated",
|
||||
"description": "permissions that were migrated from v1",
|
||||
"local": true,
|
||||
"windows": [
|
||||
"main"
|
||||
],
|
||||
"permissions": [
|
||||
"window:allow-close",
|
||||
"window:allow-destroy",
|
||||
"window:allow-minimize",
|
||||
"window:allow-start-dragging",
|
||||
"event:default"
|
||||
]
|
||||
}
|
||||
"$schema": "../gen/schemas/desktop-schema.json",
|
||||
"identifier": "migrated",
|
||||
"description": "permissions that were migrated from v1",
|
||||
"local": true,
|
||||
"windows": [
|
||||
"main"
|
||||
],
|
||||
"permissions": [
|
||||
"window:allow-close",
|
||||
"window:allow-destroy",
|
||||
"window:allow-minimize",
|
||||
"window:allow-start-dragging",
|
||||
"event:default"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
{"migrated":{"identifier":"migrated","description":"permissions that were migrated from v1","local":true,"windows":["main"],"permissions":["window:allow-close","window:allow-destroy","window:allow-minimize","window:allow-start-dragging","event:default"]}}
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,3 +1,3 @@
|
|||
[default]
|
||||
description = "Default permissions for the plugin"
|
||||
permissions = ["allow-login-msa"]
|
||||
permissions = [ "allow-login-msa" ]
|
||||
|
|
|
|||
|
|
@ -1,41 +1,41 @@
|
|||
{
|
||||
"build": {
|
||||
"beforeDevCommand": "pnpm dev",
|
||||
"beforeBuildCommand": "pnpm build",
|
||||
"frontendDist": "../dist",
|
||||
"devUrl": "http://localhost:1420"
|
||||
},
|
||||
"bundle": {
|
||||
"active": true,
|
||||
"targets": "all",
|
||||
"icon": [
|
||||
"icons/32x32.png",
|
||||
"icons/128x128.png",
|
||||
"icons/128x128@2x.png",
|
||||
"icons/icon.icns",
|
||||
"icons/icon.ico"
|
||||
]
|
||||
},
|
||||
"productName": "polyfrost-launcher",
|
||||
"version": "0.0.0",
|
||||
"identifier": "org.polyfrost.launcher",
|
||||
"plugins": {},
|
||||
"app": {
|
||||
"withGlobalTauri": true,
|
||||
"security": {
|
||||
"csp": null,
|
||||
"capabilities": []
|
||||
},
|
||||
"windows": [
|
||||
{
|
||||
"title": "polyfrost-launcher",
|
||||
"width": 1280,
|
||||
"height": 800,
|
||||
"resizable": false,
|
||||
"center": true,
|
||||
"decorations": false,
|
||||
"shadow": true
|
||||
}
|
||||
]
|
||||
}
|
||||
"build": {
|
||||
"beforeDevCommand": "pnpm dev",
|
||||
"beforeBuildCommand": "pnpm build",
|
||||
"frontendDist": "../dist",
|
||||
"devUrl": "http://localhost:1420"
|
||||
},
|
||||
"bundle": {
|
||||
"active": true,
|
||||
"targets": "all",
|
||||
"icon": [
|
||||
"icons/32x32.png",
|
||||
"icons/128x128.png",
|
||||
"icons/128x128@2x.png",
|
||||
"icons/icon.icns",
|
||||
"icons/icon.ico"
|
||||
]
|
||||
},
|
||||
"productName": "polyfrost-launcher",
|
||||
"version": "0.0.0",
|
||||
"identifier": "org.polyfrost.launcher",
|
||||
"plugins": {},
|
||||
"app": {
|
||||
"withGlobalTauri": true,
|
||||
"security": {
|
||||
"csp": null,
|
||||
"capabilities": []
|
||||
},
|
||||
"windows": [
|
||||
{
|
||||
"title": "polyfrost-launcher",
|
||||
"width": 1280,
|
||||
"height": 800,
|
||||
"resizable": false,
|
||||
"center": true,
|
||||
"decorations": false,
|
||||
"shadow": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,20 +2,19 @@ import { invoke } from '@tauri-apps/api/core';
|
|||
import { listen } from '@tauri-apps/api/event';
|
||||
|
||||
type MicrosoftLoginCallback = (msg: string, stage: number) => never;
|
||||
const loginMicrosoft = async (cb?: MicrosoftLoginCallback): Promise<auth.Account> => {
|
||||
if (cb) {
|
||||
const unlisten = await listen<[string, number, boolean]>('msa:status', (event) => {
|
||||
cb(event.payload[0], event.payload[1]);
|
||||
async function loginMicrosoft(cb?: MicrosoftLoginCallback): Promise<auth.Account> {
|
||||
if (cb) {
|
||||
const unlisten = await listen<[string, number, boolean]>('msa:status', (event) => {
|
||||
cb(event.payload[0], event.payload[1]);
|
||||
|
||||
if (event.payload[2]) {
|
||||
unlisten();
|
||||
}
|
||||
});
|
||||
}
|
||||
if (event.payload[2])
|
||||
unlisten();
|
||||
});
|
||||
}
|
||||
|
||||
return await invoke('plugin:auth|login_msa');
|
||||
};
|
||||
return await invoke('plugin:auth|login_msa');
|
||||
}
|
||||
|
||||
export default {
|
||||
loginMicrosoft,
|
||||
loginMicrosoft,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@ import BrowserPage from './ui/pages/Browser';
|
|||
import UpdatesPage from './ui/pages/Updates';
|
||||
|
||||
render(() => (
|
||||
<Router root={App}>
|
||||
<Route component={HomePage} path={'/'} />
|
||||
<Route component={BrowserPage} path={'/browser'} />
|
||||
<Route component={UpdatesPage} path={'/updates'} />
|
||||
</Router>
|
||||
<Router root={App}>
|
||||
<Route component={HomePage} path="/" />
|
||||
<Route component={BrowserPage} path="/browser" />
|
||||
<Route component={UpdatesPage} path="/updates" />
|
||||
</Router>
|
||||
), document.getElementById('root') as HTMLElement);
|
||||
|
|
|
|||
22
src/types/auth.d.ts
vendored
22
src/types/auth.d.ts
vendored
|
|
@ -1,14 +1,14 @@
|
|||
declare namespace auth {
|
||||
export interface Account {
|
||||
username: string,
|
||||
uuid: string,
|
||||
skins: AccountSkin[]
|
||||
}
|
||||
export interface Account {
|
||||
username: string;
|
||||
uuid: string;
|
||||
skins: AccountSkin[];
|
||||
}
|
||||
|
||||
export interface AccountSkin {
|
||||
id: string,
|
||||
state: 'active' | 'something',
|
||||
url: string,
|
||||
variant: 'CLASSIC' | 'SLIM'
|
||||
}
|
||||
export interface AccountSkin {
|
||||
id: string;
|
||||
state: 'active' | 'something';
|
||||
url: string;
|
||||
variant: 'CLASSIC' | 'SLIM';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
131
src/ui/App.tsx
131
src/ui/App.tsx
|
|
@ -1,85 +1,80 @@
|
|||
import { ParentProps } from 'solid-js';
|
||||
import type { ParentProps } from 'solid-js';
|
||||
import { Transition } from 'solid-transition-group';
|
||||
import environment from '../utils/environment';
|
||||
import WindowFrame from './components/native/WindowFrame';
|
||||
import Navbar from './components/Navbar';
|
||||
import environment from '../utils/environment';
|
||||
|
||||
function App(props: ParentProps) {
|
||||
if (!environment.isDev()) {
|
||||
document.addEventListener('contextmenu', (event) => {
|
||||
event.preventDefault();
|
||||
});
|
||||
}
|
||||
if (!environment.isDev()) {
|
||||
document.addEventListener('contextmenu', (event) => {
|
||||
event.preventDefault();
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<main class='flex flex-col bg-primary min-h-screen text-white overflow-hidden'>
|
||||
<WindowFrame />
|
||||
<div class='flex flex-col flex-1 overflow-hidden px-8'>
|
||||
<Navbar />
|
||||
|
||||
{/* // TODO fix overflow */}
|
||||
<div class=''>
|
||||
{ /* eslint-disable-next-line @typescript-eslint/no-use-before-define */ }
|
||||
<AnimatedRoutes>
|
||||
{props.children}
|
||||
</AnimatedRoutes>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
return (
|
||||
<main class="flex flex-col bg-primary min-h-screen text-white">
|
||||
<WindowFrame />
|
||||
<div class="flex flex-col flex-1 overflow-x-hidden px-8">
|
||||
<Navbar />
|
||||
<AnimatedRoutes>
|
||||
{props.children}
|
||||
</AnimatedRoutes>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
function AnimatedRoutes(props: ParentProps) {
|
||||
const keyframesEnter = [
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'translateX(-100px)',
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
transform: 'translateX(0px)',
|
||||
},
|
||||
];
|
||||
const keyframesEnter = [
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'translateX(-100px)',
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
transform: 'translateX(0px)',
|
||||
},
|
||||
];
|
||||
|
||||
const keyframesExit = [
|
||||
{
|
||||
opacity: 1,
|
||||
transform: 'translateX(0px)',
|
||||
},
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'translateX(100px)',
|
||||
},
|
||||
];
|
||||
const keyframesExit = [
|
||||
{
|
||||
opacity: 1,
|
||||
transform: 'translateX(0px)',
|
||||
},
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'translateX(100px)',
|
||||
},
|
||||
];
|
||||
|
||||
const properties: KeyframeAnimationOptions = {
|
||||
duration: 100,
|
||||
easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
|
||||
};
|
||||
const properties: KeyframeAnimationOptions = {
|
||||
duration: 100,
|
||||
easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
|
||||
};
|
||||
|
||||
return (
|
||||
<Transition
|
||||
mode='outin'
|
||||
onEnter={(element, done) => {
|
||||
const animation = element.animate(
|
||||
keyframesEnter,
|
||||
properties,
|
||||
);
|
||||
return (
|
||||
<Transition
|
||||
mode="outin"
|
||||
onEnter={(element, done) => {
|
||||
const animation = element.animate(
|
||||
keyframesEnter,
|
||||
properties,
|
||||
);
|
||||
|
||||
animation.onfinish = done;
|
||||
}}
|
||||
onExit={(element, done) => {
|
||||
const animation = element.animate(
|
||||
keyframesExit,
|
||||
properties,
|
||||
);
|
||||
animation.onfinish = done;
|
||||
}}
|
||||
onExit={(element, done) => {
|
||||
const animation = element.animate(
|
||||
keyframesExit,
|
||||
properties,
|
||||
);
|
||||
|
||||
animation.onfinish = done;
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
</Transition>
|
||||
);
|
||||
animation.onfinish = done;
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
</Transition>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,53 +3,53 @@ import { createSignal } from 'solid-js';
|
|||
import PolyfrostFull from './logos/PolyfrostFull';
|
||||
import AccountPopup from './overlay/AccountPopup';
|
||||
|
||||
type NavbarLinkProps = {
|
||||
path: string,
|
||||
label: string,
|
||||
};
|
||||
interface NavbarLinkProps {
|
||||
path: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
function NavbarLink(props: NavbarLinkProps) {
|
||||
return (
|
||||
<A
|
||||
href={props.path}
|
||||
class='text-lg px-4 py-1 hover:bg-component-bg-hover rounded-lg hover:text-fg-primary-hover'
|
||||
inactiveClass='text-fg-secondary'
|
||||
activeClass='text-fg-primary'
|
||||
end
|
||||
>
|
||||
{props.label}
|
||||
</A>
|
||||
);
|
||||
return (
|
||||
<A
|
||||
href={props.path}
|
||||
class="text-lg px-4 py-1 hover:bg-component-bg-hover rounded-lg hover:text-fg-primary-hover"
|
||||
inactiveClass="text-fg-secondary"
|
||||
activeClass="text-fg-primary"
|
||||
end
|
||||
>
|
||||
{props.label}
|
||||
</A>
|
||||
);
|
||||
}
|
||||
|
||||
function Navbar() {
|
||||
const [profileMenuOpen, setProfileMenuOpen] = createSignal(false);
|
||||
let profileButton!: HTMLButtonElement;
|
||||
const [profileMenuOpen, setProfileMenuOpen] = createSignal(false);
|
||||
let profileButton!: HTMLButtonElement;
|
||||
|
||||
return (
|
||||
<div class='flex flex-row *:flex-1 items-center h-15 mx-2'>
|
||||
<div>
|
||||
<PolyfrostFull />
|
||||
</div>
|
||||
<div class='flex flex-row items-center justify-center gap-x-10 py-1'>
|
||||
<NavbarLink path="/" label="Home" />
|
||||
<NavbarLink path="/browser" label="Browser" />
|
||||
<NavbarLink path="/updates" label="Updates" />
|
||||
</div>
|
||||
<div class='flex flex-row justify-end relative'>
|
||||
<button ref={profileButton} onClick={() => setProfileMenuOpen(!profileMenuOpen())}>
|
||||
<img class='w-7 h-7 rounded-md hover:opacity-70' src="https://crafatar.com/avatars/f247be7c5b8241c69148793ded77e71f?size=100" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
return (
|
||||
<div class="flex flex-row *:flex-1 items-center h-15 mx-2">
|
||||
<div>
|
||||
<PolyfrostFull />
|
||||
</div>
|
||||
<div class="flex flex-row items-center justify-center gap-x-10 py-1">
|
||||
<NavbarLink path="/" label="Home" />
|
||||
<NavbarLink path="/browser" label="Browser" />
|
||||
<NavbarLink path="/updates" label="Updates" />
|
||||
</div>
|
||||
<div class="flex flex-row justify-end relative">
|
||||
<button ref={profileButton} onClick={() => setProfileMenuOpen(!profileMenuOpen())}>
|
||||
<img class="w-7 h-7 rounded-md hover:opacity-70" src="https://crafatar.com/avatars/f247be7c5b8241c69148793ded77e71f?size=100" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<AccountPopup
|
||||
visible={profileMenuOpen}
|
||||
setVisible={setProfileMenuOpen}
|
||||
mount={profileButton}
|
||||
class='right-0 top-full mt-2'
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
<AccountPopup
|
||||
visible={profileMenuOpen}
|
||||
setVisible={setProfileMenuOpen}
|
||||
mount={profileButton}
|
||||
class="right-0 top-full mt-2"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Navbar;
|
||||
|
|
|
|||
|
|
@ -31,4 +31,4 @@
|
|||
|
||||
.icon > * {
|
||||
@apply w-4;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,24 @@
|
|||
import {
|
||||
JSX, ParentProps, mergeProps, splitProps,
|
||||
} from 'solid-js';
|
||||
import type { JSX, ParentProps } from 'solid-js';
|
||||
import { mergeProps, splitProps } from 'solid-js';
|
||||
import styles from './Button.module.scss';
|
||||
|
||||
type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & ParentProps & {
|
||||
iconLeft?: JSX.Element,
|
||||
iconRight?: JSX.Element,
|
||||
styleType?: 'primary' | 'secondary' | 'danger' | 'icon' | 'ghost',
|
||||
iconLeft?: JSX.Element;
|
||||
iconRight?: JSX.Element;
|
||||
styleType?: 'primary' | 'secondary' | 'danger' | 'icon' | 'ghost';
|
||||
};
|
||||
|
||||
function Button(props: ButtonProps) {
|
||||
const [buttonProps, rest] = splitProps(props, ['iconLeft', 'iconRight', 'styleType', 'class']);
|
||||
const merged = mergeProps({ styleType: 'primary' }, buttonProps);
|
||||
const [buttonProps, rest] = splitProps(props, ['iconLeft', 'iconRight', 'styleType', 'class']);
|
||||
const merged = mergeProps({ styleType: 'primary' }, buttonProps);
|
||||
|
||||
return (
|
||||
<button class={`${styles.button} ${styles[`button__${merged.styleType}`]} ${buttonProps.class || ''}`} {...rest}>
|
||||
{merged.iconLeft && <span class={styles.icon}>{merged.iconLeft}</span>}
|
||||
{props.children}
|
||||
{merged.iconRight && <span class={styles.icon}>{merged.iconRight}</span>}
|
||||
</button>
|
||||
);
|
||||
return (
|
||||
<button class={`${styles.button} ${styles[`button__${merged.styleType}`]} ${buttonProps.class || ''}`} {...rest}>
|
||||
{merged.iconLeft && <span class={styles.icon}>{merged.iconLeft}</span>}
|
||||
{props.children}
|
||||
{merged.iconRight && <span class={styles.icon}>{merged.iconRight}</span>}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default Button;
|
||||
|
|
|
|||
|
|
@ -5,4 +5,4 @@
|
|||
|
||||
.icon > * {
|
||||
@apply w-4;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
import { JSX, ParentProps } from 'solid-js';
|
||||
import type { JSX, ParentProps } from 'solid-js';
|
||||
import styles from './Tag.module.scss';
|
||||
|
||||
type TagProps = ParentProps & {
|
||||
iconLeft?: JSX.Element,
|
||||
iconRight?: JSX.Element,
|
||||
iconLeft?: JSX.Element;
|
||||
iconRight?: JSX.Element;
|
||||
};
|
||||
|
||||
function Tag(props: TagProps) {
|
||||
return (
|
||||
<span class={styles.tag}>
|
||||
{props.iconLeft && <span class={styles.icon}>{props.iconLeft}</span>}
|
||||
{props.children && props.children}
|
||||
{props.iconRight && <span class={styles.icon}>{props.iconRight}</span>}
|
||||
</span>
|
||||
);
|
||||
return (
|
||||
<span class={styles.tag}>
|
||||
{props.iconLeft && <span class={styles.icon}>{props.iconLeft}</span>}
|
||||
{props.children && props.children}
|
||||
{props.iconRight && <span class={styles.icon}>{props.iconRight}</span>}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default Tag;
|
||||
|
|
|
|||
|
|
@ -18,4 +18,4 @@
|
|||
@apply w-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,23 @@
|
|||
import { JSX, createUniqueId, splitProps } from 'solid-js';
|
||||
import type { JSX } from 'solid-js';
|
||||
import { createUniqueId, splitProps } from 'solid-js';
|
||||
import styles from './TextField.module.scss';
|
||||
|
||||
type TextFieldProps = {
|
||||
iconLeft?: JSX.Element;
|
||||
iconRight?: JSX.Element;
|
||||
iconLeft?: JSX.Element;
|
||||
iconRight?: JSX.Element;
|
||||
} & JSX.InputHTMLAttributes<HTMLInputElement>;
|
||||
|
||||
function TextField(props: TextFieldProps) {
|
||||
const [fieldProps, rest] = splitProps(props, ['iconLeft', 'iconRight']);
|
||||
const id = createUniqueId();
|
||||
const [fieldProps, rest] = splitProps(props, ['iconLeft', 'iconRight']);
|
||||
const id = createUniqueId();
|
||||
|
||||
return (
|
||||
<label for={id} class={styles.textfield}>
|
||||
{fieldProps.iconLeft && <span class={styles.icon}>{fieldProps.iconLeft}</span>}
|
||||
<input id={id} type="text" {...rest} />
|
||||
{fieldProps.iconRight && <span class={styles.icon}>{fieldProps.iconRight}</span>}
|
||||
</label>
|
||||
);
|
||||
return (
|
||||
<label for={id} class={styles.textfield}>
|
||||
{fieldProps.iconLeft && <span class={styles.icon}>{fieldProps.iconLeft}</span>}
|
||||
<input id={id} type="text" {...rest} />
|
||||
{fieldProps.iconRight && <span class={styles.icon}>{fieldProps.iconRight}</span>}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
export default TextField;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
function PolyfrostFull() {
|
||||
return (
|
||||
<svg width="174" height="30" viewBox="0 0 174 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.86 16.6283L13.8843 1.08171C13.0516 -0.36057 11.689 -0.36057 10.8564 1.08171L0.947095 18.2464C-1.74381 22.9075 1.61965 28.7332 7.00145 28.7332H15.8719L22.8601 16.629L29.8482 28.7331H34.7491C38.7858 28.7331 41.3082 24.3637 39.2898 20.8681L31.3646 7.14161C30.532 5.70003 29.1701 5.70003 28.3374 7.14161L22.86 16.6283Z" fill="#0A5BE8"/>
|
||||
<path d="M117.79 11.03H120.95V14.6499H117.92V24.3499H113.26V14.6499H111.32V11.03H113.26V10.6699C113.26 9 113.74 7.66992 114.69 6.67993C115.65 5.67993 117.02 5.17993 118.8 5.17993C119.37 5.17993 119.93 5.23999 120.49 5.35986C121.04 5.47998 121.51 5.65991 121.89 5.8999L120.73 9.31982C120.54 9.19995 120.32 9.09985 120.07 9.02002C119.83 8.94995 119.58 8.90991 119.34 8.90991C118.85 8.90991 118.47 9.05981 118.2 9.35986C117.93 9.6499 117.79 10.1099 117.79 10.72V11.03Z" fill="#0A5BE8"/>
|
||||
<path d="M131.74 10.29V14.6501L131.626 14.6343C131.457 14.6104 131.313 14.5901 131.19 14.5901C131.03 14.5801 130.86 14.5701 130.68 14.5701C129.74 14.5701 128.97 14.8401 128.38 15.3801C127.79 15.9102 127.5 16.79 127.5 17.99V24.3501H122.84V10.52H127.28V12.1799C127.61 11.72 128.03 11.3501 128.53 11.0601C129.41 10.55 130.48 10.29 131.74 10.29Z" fill="#0A5BE8"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M140.19 24.5701C138.74 24.5701 137.44 24.26 136.32 23.6501C135.19 23.04 134.31 22.1899 133.66 21.1101C133.01 20.03 132.69 18.79 132.69 17.4001C132.69 16.01 133.01 14.77 133.66 13.7C134.31 12.6301 135.19 11.79 136.32 11.1899C137.45 10.5901 138.74 10.28 140.19 10.28C141.64 10.28 142.94 10.5801 144.07 11.1899C145.2 11.79 146.09 12.6301 146.73 13.7C147.37 14.77 147.69 16.01 147.69 17.4001C147.69 18.79 147.37 20.03 146.73 21.1101C146.09 22.1899 145.21 23.04 144.07 23.6501C142.94 24.27 141.65 24.5701 140.19 24.5701ZM140.19 20.72C140.73 20.72 141.21 20.5901 141.62 20.3401C142.04 20.0801 142.37 19.71 142.61 19.2C142.85 18.6899 142.98 18.1001 142.98 17.4001C142.98 16.7 142.86 16.1101 142.61 15.6301C142.36 15.1401 142.03 14.77 141.62 14.52C141.403 14.3909 141.172 14.2937 140.926 14.23C140.695 14.1704 140.451 14.1401 140.19 14.1401C139.953 14.1401 139.727 14.167 139.51 14.22C139.252 14.2834 139.008 14.384 138.78 14.52C138.36 14.77 138.03 15.1401 137.78 15.6301C137.53 16.1101 137.4 16.71 137.4 17.4001C137.4 18.0901 137.53 18.7 137.78 19.2C138.03 19.7 138.37 20.0801 138.78 20.3401C139.2 20.5901 139.67 20.72 140.19 20.72Z" fill="#0A5BE8"/>
|
||||
<path d="M154.68 24.5701C153.55 24.5701 152.45 24.4299 151.38 24.1599C150.31 23.8901 149.45 23.55 148.8 23.1401L150.2 19.8201C150.82 20.21 151.55 20.52 152.38 20.75C153.21 20.98 154.03 21.0901 154.83 21.0901C155.61 21.0901 156.16 21.01 156.46 20.8301C156.76 20.6599 156.91 20.4299 156.91 20.1401C156.91 19.8701 156.77 19.6699 156.48 19.54C156.344 19.479 156.191 19.4248 156.018 19.3782C155.821 19.3252 155.6 19.282 155.35 19.25L154.92 19.1873L154.912 19.1858L154.893 19.1831C154.555 19.1339 154.196 19.0816 153.82 19.02C153.529 18.9724 153.235 18.9192 152.938 18.8589C152.674 18.8052 152.408 18.7458 152.14 18.6799C151.58 18.54 151.06 18.3101 150.6 18.02C150.14 17.73 149.76 17.3201 149.48 16.8101C149.2 16.3 149.06 15.6501 149.06 14.8701C149.06 13.99 149.31 13.2 149.81 12.51C150.31 11.8201 151.04 11.28 152 10.8801C152.96 10.48 154.14 10.28 155.53 10.28C155.979 10.28 156.433 10.3035 156.89 10.3489C157.378 10.3977 157.869 10.4719 158.36 10.5701C158.938 10.6855 159.463 10.8418 159.933 11.0339C160.236 11.158 160.515 11.2971 160.77 11.45L159.37 14.74C159.039 14.5415 158.706 14.374 158.372 14.239C158.05 14.1089 157.729 14.0088 157.41 13.9399C156.76 13.8 156.14 13.72 155.55 13.72C154.77 13.72 154.22 13.8101 153.9 14C153.58 14.1899 153.42 14.4199 153.42 14.6899C153.42 14.96 153.56 15.1699 153.84 15.3101C153.894 15.3369 153.95 15.3625 154.01 15.3872C154.265 15.491 154.578 15.5754 154.95 15.6401C155.32 15.7029 155.714 15.7598 156.134 15.8201L156.48 15.8701C156.8 15.9165 157.126 15.9731 157.454 16.042C157.689 16.0916 157.925 16.1472 158.16 16.21C158.401 16.2747 158.635 16.3542 158.86 16.448C159.157 16.5715 159.438 16.7195 159.7 16.8901C160.17 17.1899 160.54 17.5901 160.82 18.0901C161.1 18.5901 161.24 19.23 161.24 20.02C161.24 20.8701 160.99 21.6401 160.49 22.3201C159.99 23 159.26 23.54 158.28 23.95C157.32 24.3701 156.11 24.5701 154.68 24.5701Z" fill="#0A5BE8"/>
|
||||
<path d="M172.91 23.79C172.749 23.9014 172.573 24.0007 172.38 24.0876C172.107 24.2114 171.801 24.3096 171.46 24.3799C171.26 24.4255 171.058 24.4636 170.852 24.4941C170.471 24.5503 170.079 24.5798 169.67 24.5798C167.98 24.5798 166.65 24.1399 165.71 23.26C164.76 22.3899 164.28 21.0598 164.28 19.29V14.6499H162.35V11.03H164.28V7.42993H168.94V11.03H171.98V14.6499H168.94V19.24C168.94 19.74 169.07 20.1199 169.33 20.3999C169.59 20.6799 169.93 20.8298 170.34 20.8298C170.89 20.8298 171.37 20.6799 171.76 20.3899L172.91 23.79Z" fill="#0A5BE8"/>
|
||||
<path d="M87.8901 5.40991V24.3398H92.5503V5.40991H87.8901Z" fill="#0A5BE8"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M68.5298 9.56006C67.9102 8.56006 67.0298 7.80005 65.8999 7.28003C64.7598 6.75 63.4102 6.47998 61.8398 6.47998H54V24.3501H58.8501V19.6799H61.8398C63.4102 19.6799 64.7598 19.4099 65.8999 18.8699C67.0298 18.3401 67.9102 17.5801 68.5298 16.5901C69.1499 15.6001 69.46 14.4399 69.46 13.0901C69.46 11.73 69.1499 10.55 68.5298 9.56006ZM63.8101 15.01C63.3198 15.47 62.5601 15.7 61.5498 15.7H58.8501V10.46H61.5498C62.5601 10.46 63.3198 10.7 63.8101 11.1499C64.3101 11.6099 64.5601 12.26 64.5601 13.0901C64.5601 13.9099 64.3101 14.55 63.8101 15.01Z" fill="#0A5BE8"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M74.3696 23.6501C75.4897 24.26 76.7896 24.5701 78.2397 24.5701C79.6899 24.5701 80.9897 24.27 82.1196 23.6501C83.2598 23.04 84.1396 22.1899 84.7798 21.1101C85.4199 20.03 85.7397 18.79 85.7397 17.4001C85.7397 16.01 85.4199 14.77 84.7798 13.7C84.1396 12.6301 83.2495 11.79 82.1196 11.1899C80.9897 10.5801 79.6899 10.28 78.2397 10.28C76.7896 10.28 75.4995 10.5901 74.3696 11.1899C73.2397 11.79 72.3599 12.6301 71.71 13.7C71.0596 14.77 70.7397 16.01 70.7397 17.4001C70.7397 18.79 71.0596 20.03 71.71 21.1101C72.3599 22.1899 73.2397 23.04 74.3696 23.6501ZM79.6699 20.3401C79.2598 20.5901 78.7798 20.72 78.2397 20.72C77.71 20.72 77.2397 20.5901 76.8296 20.3401C76.4199 20.0801 76.0796 19.7 75.8296 19.2C75.6797 18.9001 75.5728 18.5608 75.5112 18.1882C75.4702 17.9397 75.4497 17.6763 75.4497 17.4001C75.4497 16.71 75.5796 16.1101 75.8296 15.6301C75.9697 15.3555 76.1348 15.1187 76.3267 14.9194C76.3916 14.8521 76.46 14.7888 76.5312 14.73C76.625 14.6526 76.7246 14.5825 76.8296 14.52C77.2495 14.27 77.7197 14.1401 78.2397 14.1401C78.4727 14.1401 78.6924 14.1643 78.9009 14.2119C79.1758 14.2747 79.4307 14.3779 79.6699 14.52C79.7417 14.564 79.811 14.6116 79.8784 14.6628C80.0581 14.8005 80.2202 14.9648 80.3643 15.1555C80.4146 15.2217 80.4624 15.291 80.5083 15.3638C80.5615 15.4482 80.6123 15.5369 80.6597 15.6301C80.7949 15.8894 80.8921 16.1807 80.9526 16.5042C81.0044 16.7795 81.0298 17.0781 81.0298 17.4001C81.0298 18.1001 80.8999 18.6899 80.6597 19.2C80.5703 19.3896 80.4688 19.5601 80.3545 19.7124C80.2446 19.8591 80.1235 19.9895 79.9907 20.1047C79.8901 20.1917 79.7832 20.2698 79.6699 20.3401Z" fill="#0A5BE8"/>
|
||||
<path d="M110.05 10.52L104.31 24.9099C104.09 25.4912 103.852 26.0103 103.595 26.4675C103.326 26.9463 103.037 27.3572 102.73 27.7C102.14 28.3701 101.47 28.8501 100.75 29.1201C100.02 29.3901 99.21 29.53 98.3301 29.53C97.6299 29.53 96.9199 29.4099 96.21 29.1799C95.5 28.95 94.9302 28.6499 94.4902 28.28L96.1001 24.8801C96.3799 25.1401 96.7002 25.3401 97.0698 25.48C97.2769 25.564 97.4805 25.6228 97.6831 25.6582C97.8428 25.6863 98.0015 25.7 98.1602 25.7C98.6699 25.7 99.0698 25.5801 99.3599 25.3401C99.4653 25.2563 99.5654 25.1555 99.6582 25.0378C99.7769 24.8882 99.8848 24.7117 99.98 24.51L94.29 10.52H99.0698L102.33 18.97L105.61 10.52H110.05Z" fill="#0A5BE8"/>
|
||||
</svg>
|
||||
);
|
||||
return (
|
||||
<svg width="174" height="30" viewBox="0 0 174 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.86 16.6283L13.8843 1.08171C13.0516 -0.36057 11.689 -0.36057 10.8564 1.08171L0.947095 18.2464C-1.74381 22.9075 1.61965 28.7332 7.00145 28.7332H15.8719L22.8601 16.629L29.8482 28.7331H34.7491C38.7858 28.7331 41.3082 24.3637 39.2898 20.8681L31.3646 7.14161C30.532 5.70003 29.1701 5.70003 28.3374 7.14161L22.86 16.6283Z" fill="#0A5BE8" />
|
||||
<path d="M117.79 11.03H120.95V14.6499H117.92V24.3499H113.26V14.6499H111.32V11.03H113.26V10.6699C113.26 9 113.74 7.66992 114.69 6.67993C115.65 5.67993 117.02 5.17993 118.8 5.17993C119.37 5.17993 119.93 5.23999 120.49 5.35986C121.04 5.47998 121.51 5.65991 121.89 5.8999L120.73 9.31982C120.54 9.19995 120.32 9.09985 120.07 9.02002C119.83 8.94995 119.58 8.90991 119.34 8.90991C118.85 8.90991 118.47 9.05981 118.2 9.35986C117.93 9.6499 117.79 10.1099 117.79 10.72V11.03Z" fill="#0A5BE8" />
|
||||
<path d="M131.74 10.29V14.6501L131.626 14.6343C131.457 14.6104 131.313 14.5901 131.19 14.5901C131.03 14.5801 130.86 14.5701 130.68 14.5701C129.74 14.5701 128.97 14.8401 128.38 15.3801C127.79 15.9102 127.5 16.79 127.5 17.99V24.3501H122.84V10.52H127.28V12.1799C127.61 11.72 128.03 11.3501 128.53 11.0601C129.41 10.55 130.48 10.29 131.74 10.29Z" fill="#0A5BE8" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M140.19 24.5701C138.74 24.5701 137.44 24.26 136.32 23.6501C135.19 23.04 134.31 22.1899 133.66 21.1101C133.01 20.03 132.69 18.79 132.69 17.4001C132.69 16.01 133.01 14.77 133.66 13.7C134.31 12.6301 135.19 11.79 136.32 11.1899C137.45 10.5901 138.74 10.28 140.19 10.28C141.64 10.28 142.94 10.5801 144.07 11.1899C145.2 11.79 146.09 12.6301 146.73 13.7C147.37 14.77 147.69 16.01 147.69 17.4001C147.69 18.79 147.37 20.03 146.73 21.1101C146.09 22.1899 145.21 23.04 144.07 23.6501C142.94 24.27 141.65 24.5701 140.19 24.5701ZM140.19 20.72C140.73 20.72 141.21 20.5901 141.62 20.3401C142.04 20.0801 142.37 19.71 142.61 19.2C142.85 18.6899 142.98 18.1001 142.98 17.4001C142.98 16.7 142.86 16.1101 142.61 15.6301C142.36 15.1401 142.03 14.77 141.62 14.52C141.403 14.3909 141.172 14.2937 140.926 14.23C140.695 14.1704 140.451 14.1401 140.19 14.1401C139.953 14.1401 139.727 14.167 139.51 14.22C139.252 14.2834 139.008 14.384 138.78 14.52C138.36 14.77 138.03 15.1401 137.78 15.6301C137.53 16.1101 137.4 16.71 137.4 17.4001C137.4 18.0901 137.53 18.7 137.78 19.2C138.03 19.7 138.37 20.0801 138.78 20.3401C139.2 20.5901 139.67 20.72 140.19 20.72Z" fill="#0A5BE8" />
|
||||
<path d="M154.68 24.5701C153.55 24.5701 152.45 24.4299 151.38 24.1599C150.31 23.8901 149.45 23.55 148.8 23.1401L150.2 19.8201C150.82 20.21 151.55 20.52 152.38 20.75C153.21 20.98 154.03 21.0901 154.83 21.0901C155.61 21.0901 156.16 21.01 156.46 20.8301C156.76 20.6599 156.91 20.4299 156.91 20.1401C156.91 19.8701 156.77 19.6699 156.48 19.54C156.344 19.479 156.191 19.4248 156.018 19.3782C155.821 19.3252 155.6 19.282 155.35 19.25L154.92 19.1873L154.912 19.1858L154.893 19.1831C154.555 19.1339 154.196 19.0816 153.82 19.02C153.529 18.9724 153.235 18.9192 152.938 18.8589C152.674 18.8052 152.408 18.7458 152.14 18.6799C151.58 18.54 151.06 18.3101 150.6 18.02C150.14 17.73 149.76 17.3201 149.48 16.8101C149.2 16.3 149.06 15.6501 149.06 14.8701C149.06 13.99 149.31 13.2 149.81 12.51C150.31 11.8201 151.04 11.28 152 10.8801C152.96 10.48 154.14 10.28 155.53 10.28C155.979 10.28 156.433 10.3035 156.89 10.3489C157.378 10.3977 157.869 10.4719 158.36 10.5701C158.938 10.6855 159.463 10.8418 159.933 11.0339C160.236 11.158 160.515 11.2971 160.77 11.45L159.37 14.74C159.039 14.5415 158.706 14.374 158.372 14.239C158.05 14.1089 157.729 14.0088 157.41 13.9399C156.76 13.8 156.14 13.72 155.55 13.72C154.77 13.72 154.22 13.8101 153.9 14C153.58 14.1899 153.42 14.4199 153.42 14.6899C153.42 14.96 153.56 15.1699 153.84 15.3101C153.894 15.3369 153.95 15.3625 154.01 15.3872C154.265 15.491 154.578 15.5754 154.95 15.6401C155.32 15.7029 155.714 15.7598 156.134 15.8201L156.48 15.8701C156.8 15.9165 157.126 15.9731 157.454 16.042C157.689 16.0916 157.925 16.1472 158.16 16.21C158.401 16.2747 158.635 16.3542 158.86 16.448C159.157 16.5715 159.438 16.7195 159.7 16.8901C160.17 17.1899 160.54 17.5901 160.82 18.0901C161.1 18.5901 161.24 19.23 161.24 20.02C161.24 20.8701 160.99 21.6401 160.49 22.3201C159.99 23 159.26 23.54 158.28 23.95C157.32 24.3701 156.11 24.5701 154.68 24.5701Z" fill="#0A5BE8" />
|
||||
<path d="M172.91 23.79C172.749 23.9014 172.573 24.0007 172.38 24.0876C172.107 24.2114 171.801 24.3096 171.46 24.3799C171.26 24.4255 171.058 24.4636 170.852 24.4941C170.471 24.5503 170.079 24.5798 169.67 24.5798C167.98 24.5798 166.65 24.1399 165.71 23.26C164.76 22.3899 164.28 21.0598 164.28 19.29V14.6499H162.35V11.03H164.28V7.42993H168.94V11.03H171.98V14.6499H168.94V19.24C168.94 19.74 169.07 20.1199 169.33 20.3999C169.59 20.6799 169.93 20.8298 170.34 20.8298C170.89 20.8298 171.37 20.6799 171.76 20.3899L172.91 23.79Z" fill="#0A5BE8" />
|
||||
<path d="M87.8901 5.40991V24.3398H92.5503V5.40991H87.8901Z" fill="#0A5BE8" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M68.5298 9.56006C67.9102 8.56006 67.0298 7.80005 65.8999 7.28003C64.7598 6.75 63.4102 6.47998 61.8398 6.47998H54V24.3501H58.8501V19.6799H61.8398C63.4102 19.6799 64.7598 19.4099 65.8999 18.8699C67.0298 18.3401 67.9102 17.5801 68.5298 16.5901C69.1499 15.6001 69.46 14.4399 69.46 13.0901C69.46 11.73 69.1499 10.55 68.5298 9.56006ZM63.8101 15.01C63.3198 15.47 62.5601 15.7 61.5498 15.7H58.8501V10.46H61.5498C62.5601 10.46 63.3198 10.7 63.8101 11.1499C64.3101 11.6099 64.5601 12.26 64.5601 13.0901C64.5601 13.9099 64.3101 14.55 63.8101 15.01Z" fill="#0A5BE8" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M74.3696 23.6501C75.4897 24.26 76.7896 24.5701 78.2397 24.5701C79.6899 24.5701 80.9897 24.27 82.1196 23.6501C83.2598 23.04 84.1396 22.1899 84.7798 21.1101C85.4199 20.03 85.7397 18.79 85.7397 17.4001C85.7397 16.01 85.4199 14.77 84.7798 13.7C84.1396 12.6301 83.2495 11.79 82.1196 11.1899C80.9897 10.5801 79.6899 10.28 78.2397 10.28C76.7896 10.28 75.4995 10.5901 74.3696 11.1899C73.2397 11.79 72.3599 12.6301 71.71 13.7C71.0596 14.77 70.7397 16.01 70.7397 17.4001C70.7397 18.79 71.0596 20.03 71.71 21.1101C72.3599 22.1899 73.2397 23.04 74.3696 23.6501ZM79.6699 20.3401C79.2598 20.5901 78.7798 20.72 78.2397 20.72C77.71 20.72 77.2397 20.5901 76.8296 20.3401C76.4199 20.0801 76.0796 19.7 75.8296 19.2C75.6797 18.9001 75.5728 18.5608 75.5112 18.1882C75.4702 17.9397 75.4497 17.6763 75.4497 17.4001C75.4497 16.71 75.5796 16.1101 75.8296 15.6301C75.9697 15.3555 76.1348 15.1187 76.3267 14.9194C76.3916 14.8521 76.46 14.7888 76.5312 14.73C76.625 14.6526 76.7246 14.5825 76.8296 14.52C77.2495 14.27 77.7197 14.1401 78.2397 14.1401C78.4727 14.1401 78.6924 14.1643 78.9009 14.2119C79.1758 14.2747 79.4307 14.3779 79.6699 14.52C79.7417 14.564 79.811 14.6116 79.8784 14.6628C80.0581 14.8005 80.2202 14.9648 80.3643 15.1555C80.4146 15.2217 80.4624 15.291 80.5083 15.3638C80.5615 15.4482 80.6123 15.5369 80.6597 15.6301C80.7949 15.8894 80.8921 16.1807 80.9526 16.5042C81.0044 16.7795 81.0298 17.0781 81.0298 17.4001C81.0298 18.1001 80.8999 18.6899 80.6597 19.2C80.5703 19.3896 80.4688 19.5601 80.3545 19.7124C80.2446 19.8591 80.1235 19.9895 79.9907 20.1047C79.8901 20.1917 79.7832 20.2698 79.6699 20.3401Z" fill="#0A5BE8" />
|
||||
<path d="M110.05 10.52L104.31 24.9099C104.09 25.4912 103.852 26.0103 103.595 26.4675C103.326 26.9463 103.037 27.3572 102.73 27.7C102.14 28.3701 101.47 28.8501 100.75 29.1201C100.02 29.3901 99.21 29.53 98.3301 29.53C97.6299 29.53 96.9199 29.4099 96.21 29.1799C95.5 28.95 94.9302 28.6499 94.4902 28.28L96.1001 24.8801C96.3799 25.1401 96.7002 25.3401 97.0698 25.48C97.2769 25.564 97.4805 25.6228 97.6831 25.6582C97.8428 25.6863 98.0015 25.7 98.1602 25.7C98.6699 25.7 99.0698 25.5801 99.3599 25.3401C99.4653 25.2563 99.5654 25.1555 99.6582 25.0378C99.7769 24.8882 99.8848 24.7117 99.98 24.51L94.29 10.52H99.0698L102.33 18.97L105.61 10.52H110.05Z" fill="#0A5BE8" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default PolyfrostFull;
|
||||
|
|
|
|||
|
|
@ -1,55 +1,55 @@
|
|||
import { Window } from '@tauri-apps/api/window';
|
||||
import { MinusIcon, XCloseIcon } from '@untitled-theme/icons-solid';
|
||||
import { JSX, createSignal, onMount } from 'solid-js';
|
||||
import type { JSX } from 'solid-js';
|
||||
import { createSignal, onMount } from 'solid-js';
|
||||
import Modal from '../overlay/Modal';
|
||||
import Button from '../base/Button';
|
||||
|
||||
type TitlebarButtonProps = {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
icon: (any: any) => JSX.Element,
|
||||
onClick: (event: MouseEvent) => void,
|
||||
danger?: boolean,
|
||||
};
|
||||
interface TitlebarButtonProps {
|
||||
icon: (any: any) => JSX.Element;
|
||||
onClick: (event: MouseEvent) => void;
|
||||
danger?: boolean;
|
||||
}
|
||||
|
||||
function TitlebarButton(props: TitlebarButtonProps) {
|
||||
return (
|
||||
<button class='flex items-center justify-center w-8 h-8 group' onClick={(e) => props.onClick(e)}>
|
||||
<div class='rounded-lg group-hover:bg-primary p-1'>
|
||||
<props.icon class={`w-[18px] h-[18px] stroke-slate ${props.danger ? 'group-hover:stroke-danger' : 'group-hover:stroke-white'}`} />
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
return (
|
||||
<button class="flex items-center justify-center w-8 h-8 group" onClick={e => props.onClick(e)}>
|
||||
<div class="rounded-lg group-hover:bg-primary p-1">
|
||||
<props.icon class={`w-[18px] h-[18px] stroke-slate ${props.danger ? 'group-hover:stroke-danger' : 'group-hover:stroke-white'}`} />
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function WindowFrame() {
|
||||
const [isModalVisible, setModalVisible] = createSignal(false);
|
||||
const [isModalVisible, setModalVisible] = createSignal(false);
|
||||
|
||||
const minimize = () => Window.getCurrent().minimize();
|
||||
const quit = () => Window.getCurrent().destroy();
|
||||
const minimize = () => Window.getCurrent().minimize();
|
||||
const quit = () => Window.getCurrent().destroy();
|
||||
|
||||
onMount(() => {
|
||||
Window.getCurrent().onCloseRequested((event) => {
|
||||
event.preventDefault();
|
||||
setModalVisible(true);
|
||||
});
|
||||
});
|
||||
onMount(() => {
|
||||
Window.getCurrent().onCloseRequested((event) => {
|
||||
event.preventDefault();
|
||||
setModalVisible(true);
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<div data-tauri-drag-region class="flex flex-row justify-end items-center w-screen h-8 bg-secondary gap-0.5 pr-0.5">
|
||||
<TitlebarButton icon={MinusIcon} onClick={() => minimize()} />
|
||||
<TitlebarButton icon={XCloseIcon} onClick={() => setModalVisible(true)} danger />
|
||||
return (
|
||||
<div data-tauri-drag-region class="flex flex-row justify-end items-center w-screen h-8 bg-secondary gap-0.5 pr-0.5">
|
||||
<TitlebarButton icon={MinusIcon} onClick={() => minimize()} />
|
||||
<TitlebarButton icon={XCloseIcon} onClick={() => setModalVisible(true)} danger />
|
||||
|
||||
<Modal
|
||||
title='Close OneLauncher?'
|
||||
visible={isModalVisible}
|
||||
setVisible={setModalVisible}
|
||||
buttons={[
|
||||
<Button styleType='secondary' onClick={() => setModalVisible(false)}>No</Button>,
|
||||
<Button styleType='danger' onClick={() => quit()}>Yes</Button>,
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
<Modal
|
||||
title="Close OneLauncher?"
|
||||
visible={isModalVisible}
|
||||
setVisible={setModalVisible}
|
||||
buttons={[
|
||||
<Button styleType="secondary" onClick={() => setModalVisible(false)}>No</Button>,
|
||||
<Button styleType="danger" onClick={() => quit()}>Yes</Button>,
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default WindowFrame;
|
||||
|
|
|
|||
|
|
@ -1,64 +1,64 @@
|
|||
import { LogOut01Icon, PlusIcon, Settings01Icon } from '@untitled-theme/icons-solid';
|
||||
import Popup from './Popup';
|
||||
import Button from '../base/Button';
|
||||
import Popup from './Popup';
|
||||
|
||||
type AccountComponentProps = {
|
||||
username: string,
|
||||
headSrc: string,
|
||||
loggedIn?: boolean,
|
||||
};
|
||||
interface AccountComponentProps {
|
||||
username: string;
|
||||
headSrc: string;
|
||||
loggedIn?: boolean;
|
||||
}
|
||||
|
||||
function AccountComponent(props: AccountComponentProps) {
|
||||
return (
|
||||
<div class={`flex flex-row justify-between p-2 rounded-lg ${!props.loggedIn && 'hover:bg-gray-.5 active:bg-gray-.10 hover:text-fg-primary-hover'}`}>
|
||||
<div class='flex flex-row justify-start flex-1 gap-x-3'>
|
||||
<img class='w-8 h-8 rounded-md' src={props.headSrc} alt="" />
|
||||
<div class='flex flex-col items-center justify-center'>
|
||||
<div class='flex flex-col items-start justify-between'>
|
||||
<p class='font-semibold h-[18px]'>{props.username}</p>
|
||||
{props.loggedIn && <p class='text-xs'>Logged in</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{props.loggedIn && (
|
||||
<Button styleType='icon' class='w-8 h-8'>
|
||||
<LogOut01Icon class=' stroke-danger' />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div class={`flex flex-row justify-between p-2 rounded-lg ${!props.loggedIn && 'hover:bg-gray-.5 active:bg-gray-.10 hover:text-fg-primary-hover'}`}>
|
||||
<div class="flex flex-row justify-start flex-1 gap-x-3">
|
||||
<img class="w-8 h-8 rounded-md" src={props.headSrc} alt="" />
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div class="flex flex-col items-start justify-between">
|
||||
<p class="font-semibold h-[18px]">{props.username}</p>
|
||||
{props.loggedIn && <p class="text-xs">Logged in</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{props.loggedIn && (
|
||||
<Button styleType="icon" class="w-8 h-8">
|
||||
<LogOut01Icon class=" stroke-danger" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AccountPopup(props: Popup.PopupProps) {
|
||||
return (
|
||||
<Popup {...props}>
|
||||
<div class='bg-component-bg rounded-xl border border-gray-.10 w-72 p-2 shadow-lg shadow-black/50'>
|
||||
<div class='flex flex-col gap-y-2 text-fg-primary'>
|
||||
<AccountComponent username='Caledonian' headSrc='https://crafatar.com/avatars/f247be7c5b8241c69148793ded77e71f?size=100' loggedIn />
|
||||
return (
|
||||
<Popup {...props}>
|
||||
<div class="bg-component-bg rounded-xl border border-gray-.10 w-72 p-2 shadow-lg shadow-black/50">
|
||||
<div class="flex flex-col gap-y-2 text-fg-primary">
|
||||
<AccountComponent username="Caledonian" headSrc="https://crafatar.com/avatars/f247be7c5b8241c69148793ded77e71f?size=100" loggedIn />
|
||||
|
||||
<div class='w-full h-px bg-gray-.5 rounded-md' />
|
||||
<div class="w-full h-px bg-gray-.5 rounded-md" />
|
||||
|
||||
<AccountComponent username='Caledonian' headSrc='https://crafatar.com/avatars/f247be7c5b8241c69148793ded77e71f?size=100' />
|
||||
<AccountComponent username='Caledonian' headSrc='https://crafatar.com/avatars/f247be7c5b8241c69148793ded77e71f?size=100' />
|
||||
<AccountComponent username='Caledonian' headSrc='https://crafatar.com/avatars/f247be7c5b8241c69148793ded77e71f?size=100' />
|
||||
<AccountComponent username="Caledonian" headSrc="https://crafatar.com/avatars/f247be7c5b8241c69148793ded77e71f?size=100" />
|
||||
<AccountComponent username="Caledonian" headSrc="https://crafatar.com/avatars/f247be7c5b8241c69148793ded77e71f?size=100" />
|
||||
<AccountComponent username="Caledonian" headSrc="https://crafatar.com/avatars/f247be7c5b8241c69148793ded77e71f?size=100" />
|
||||
|
||||
<div class='w-full h-px bg-gray-.5 rounded-md' />
|
||||
<div class="w-full h-px bg-gray-.5 rounded-md" />
|
||||
|
||||
<div class='flex flex-row justify-between'>
|
||||
<div>
|
||||
<Button styleType='ghost' iconLeft={<PlusIcon />}>Add Account</Button>
|
||||
</div>
|
||||
<div class='flex flex-row'>
|
||||
<Button styleType='icon' class='w-9 h-9'>
|
||||
<Settings01Icon class='p-0.5 stroke-fg-primary' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row justify-between">
|
||||
<div>
|
||||
<Button styleType="ghost" iconLeft={<PlusIcon />}>Add Account</Button>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<Button styleType="icon" class="w-9 h-9">
|
||||
<Settings01Icon class="p-0.5 stroke-fg-primary" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Popup>
|
||||
);
|
||||
</div>
|
||||
</div>
|
||||
</Popup>
|
||||
);
|
||||
}
|
||||
|
||||
export default AccountPopup;
|
||||
|
|
|
|||
|
|
@ -1,78 +1,86 @@
|
|||
import {
|
||||
Accessor,
|
||||
ParentProps, Setter, Show, createEffect, createSignal, For,
|
||||
mergeProps,
|
||||
JSX,
|
||||
import type {
|
||||
Accessor,
|
||||
JSX,
|
||||
ParentProps,
|
||||
Setter,
|
||||
} from 'solid-js';
|
||||
import { For, Show, createEffect, createSignal, mergeProps } from 'solid-js';
|
||||
import { Portal } from 'solid-js/web';
|
||||
import Button from '../base/Button';
|
||||
|
||||
type ModalButtonProps = string | JSX.Element;
|
||||
|
||||
function ModalButton(button: { props: ModalButtonProps }) {
|
||||
return <>
|
||||
{typeof button.props === 'string' ? (
|
||||
<Button>
|
||||
{button.props}
|
||||
</Button>
|
||||
) : (
|
||||
button.props
|
||||
)}
|
||||
</>;
|
||||
return (
|
||||
<>
|
||||
{typeof button.props === 'string'
|
||||
? (
|
||||
<Button>
|
||||
{button.props}
|
||||
</Button>
|
||||
)
|
||||
: (
|
||||
button.props
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
type ModalProps = {
|
||||
title: string,
|
||||
visible: Accessor<boolean>,
|
||||
setVisible: Setter<boolean>,
|
||||
buttons?: ModalButtonProps[],
|
||||
title: string;
|
||||
visible: Accessor<boolean>;
|
||||
setVisible: Setter<boolean>;
|
||||
buttons?: ModalButtonProps[];
|
||||
} & ParentProps;
|
||||
|
||||
function Modal(props: ModalProps) {
|
||||
const [localVisible, setLocalVisible] = createSignal(false);
|
||||
const [animate, setAnimate] = createSignal('animate-fade-in');
|
||||
const merged: ModalProps = mergeProps({ buttons: ['Ok'] }, props);
|
||||
const [localVisible, setLocalVisible] = createSignal(false);
|
||||
const [animate, setAnimate] = createSignal('animate-fade-in');
|
||||
const merged: ModalProps = mergeProps({ buttons: ['Ok'] }, props);
|
||||
|
||||
createEffect(() => {
|
||||
if (props.visible()) {
|
||||
setAnimate('animate-fade-in');
|
||||
setLocalVisible(true);
|
||||
} else {
|
||||
setAnimate('animate-fade-out');
|
||||
setTimeout(() => {
|
||||
setLocalVisible(false);
|
||||
}, 150);
|
||||
}
|
||||
});
|
||||
createEffect(() => {
|
||||
if (props.visible()) {
|
||||
setAnimate('animate-fade-in');
|
||||
setLocalVisible(true);
|
||||
}
|
||||
else {
|
||||
setAnimate('animate-fade-out');
|
||||
setTimeout(() => {
|
||||
setLocalVisible(false);
|
||||
}, 150);
|
||||
}
|
||||
});
|
||||
|
||||
function onBackdropClick() {
|
||||
props.setVisible(false);
|
||||
}
|
||||
function onBackdropClick() {
|
||||
props.setVisible(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<Show when={localVisible()}>
|
||||
<Portal>
|
||||
<div class={`fixed z-[1000] top-0 left-0 w-screen h-screen bg-black/60 backdrop-blur-sm backdrop-grayscale ${animate()}`}>
|
||||
<div class='absolute w-full h-full' onClick={() => onBackdropClick()} />
|
||||
return (
|
||||
<Show when={localVisible()}>
|
||||
<Portal>
|
||||
<div class={`fixed z-[1000] top-0 left-0 w-screen h-screen bg-black/60 backdrop-blur-sm backdrop-grayscale ${animate()}`}>
|
||||
<div class="absolute w-full h-full" onClick={() => onBackdropClick()} />
|
||||
|
||||
<div class='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
|
||||
<div class='bg-primary border border-white/5 p-4 rounded-lg text-center flex flex-col gap-y-1'>
|
||||
<h2>{props.title}</h2>
|
||||
<div class='flex flex-col'>
|
||||
{props.children}
|
||||
</div>
|
||||
<div class='flex flex-row gap-x-4 [&>*]:flex-1'>
|
||||
{<For each={merged.buttons}>{(button) => (
|
||||
<ModalButton props={button} />
|
||||
)}</For>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<div class="bg-primary border border-white/5 p-4 rounded-lg text-center flex flex-col gap-y-1">
|
||||
<h2>{props.title}</h2>
|
||||
<div class="flex flex-col">
|
||||
{props.children}
|
||||
</div>
|
||||
<div class="flex flex-row gap-x-4 [&>*]:flex-1">
|
||||
<For each={merged.buttons}>
|
||||
{button => (
|
||||
<ModalButton props={button} />
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Portal>
|
||||
</Show>
|
||||
);
|
||||
</div>
|
||||
</Portal>
|
||||
</Show>
|
||||
);
|
||||
}
|
||||
|
||||
export default Modal;
|
||||
|
|
|
|||
|
|
@ -1,59 +1,64 @@
|
|||
import type {
|
||||
Accessor,
|
||||
ParentProps,
|
||||
Setter,
|
||||
} from 'solid-js';
|
||||
import {
|
||||
Accessor,
|
||||
createEffect, createSignal,
|
||||
ParentProps,
|
||||
Setter,
|
||||
Show,
|
||||
Show,
|
||||
createEffect,
|
||||
createSignal,
|
||||
} from 'solid-js';
|
||||
import { Portal } from 'solid-js/web';
|
||||
|
||||
// eslint-disable-next-line ts/no-namespace
|
||||
declare namespace Popup {
|
||||
interface PopupProps extends ParentProps {
|
||||
visible: Accessor<boolean>,
|
||||
setVisible: Setter<boolean>,
|
||||
class?: string,
|
||||
mount?: Node,
|
||||
}
|
||||
interface PopupProps extends ParentProps {
|
||||
visible: Accessor<boolean>;
|
||||
setVisible: Setter<boolean>;
|
||||
class?: string;
|
||||
mount?: Node;
|
||||
}
|
||||
}
|
||||
|
||||
function Popup(props: Popup.PopupProps) {
|
||||
const [localVisible, setLocalVisible] = createSignal(false);
|
||||
const [animate, setAnimate] = createSignal('animate-fade-in');
|
||||
const [localVisible, setLocalVisible] = createSignal(false);
|
||||
const [animate, setAnimate] = createSignal('animate-fade-in');
|
||||
|
||||
let popupRef!: HTMLDivElement;
|
||||
let popupRef!: HTMLDivElement;
|
||||
|
||||
function onClick(e: MouseEvent) {
|
||||
if (!popupRef || !localVisible()) return;
|
||||
function onClick(e: MouseEvent) {
|
||||
if (!popupRef || !localVisible())
|
||||
return;
|
||||
|
||||
const clicked = e.target === popupRef || popupRef.contains(e.target as Node);
|
||||
if (!clicked) {
|
||||
props.setVisible(false);
|
||||
}
|
||||
}
|
||||
const clicked = e.target === popupRef || popupRef.contains(e.target as Node);
|
||||
if (!clicked)
|
||||
props.setVisible(false);
|
||||
}
|
||||
|
||||
createEffect(() => {
|
||||
if (props.visible()) {
|
||||
document.addEventListener('click', onClick);
|
||||
setAnimate('animate-fade-in');
|
||||
setLocalVisible(true);
|
||||
} else {
|
||||
document.removeEventListener('click', onClick);
|
||||
setAnimate('animate-fade-out');
|
||||
setTimeout(() => {
|
||||
setLocalVisible(false);
|
||||
}, 150);
|
||||
}
|
||||
});
|
||||
createEffect(() => {
|
||||
if (props.visible()) {
|
||||
document.addEventListener('click', onClick);
|
||||
setAnimate('animate-fade-in');
|
||||
setLocalVisible(true);
|
||||
}
|
||||
else {
|
||||
document.removeEventListener('click', onClick);
|
||||
setAnimate('animate-fade-out');
|
||||
setTimeout(() => {
|
||||
setLocalVisible(false);
|
||||
}, 150);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Show when={localVisible()}>
|
||||
<Portal mount={props.mount || document.body}>
|
||||
<div ref={popupRef} class={`absolute z-[1000] ${animate()} ${props.class || ''}`}>
|
||||
{props.children}
|
||||
</div>
|
||||
</Portal>
|
||||
</Show>
|
||||
);
|
||||
return (
|
||||
<Show when={localVisible()}>
|
||||
<Portal mount={props.mount || document.body}>
|
||||
<div ref={popupRef} class={`absolute z-[1000] ${animate()} ${props.class || ''}`}>
|
||||
{props.children}
|
||||
</div>
|
||||
</Portal>
|
||||
</Show>
|
||||
);
|
||||
}
|
||||
|
||||
export default Popup;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
function BrowserPage() {
|
||||
return (
|
||||
<h1>
|
||||
Browser
|
||||
</h1>
|
||||
);
|
||||
return (
|
||||
<h1>
|
||||
Browser
|
||||
</h1>
|
||||
);
|
||||
}
|
||||
|
||||
export default BrowserPage;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,13 @@
|
|||
import {
|
||||
CheckIcon, DotsVerticalIcon, Download01Icon, HeartRoundedIcon, PlayIcon, PlusIcon, SearchMdIcon,
|
||||
CheckIcon,
|
||||
DotsVerticalIcon,
|
||||
Download01Icon,
|
||||
HeartRoundedIcon,
|
||||
PlayIcon,
|
||||
PlusIcon,
|
||||
SearchMdIcon,
|
||||
} from '@untitled-theme/icons-solid';
|
||||
import { createEffect, createSignal, For } from 'solid-js';
|
||||
import { For, createEffect, createSignal } from 'solid-js';
|
||||
import image from '../../assets/images/header.png';
|
||||
import Button from '../components/base/Button';
|
||||
import Tag from '../components/base/Tag';
|
||||
|
|
@ -11,173 +17,248 @@ import { upperFirst } from '../../utils/string';
|
|||
|
||||
// TODO: Replace this into it's own component
|
||||
function OneConfigLogo() {
|
||||
return (
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Group 3544">
|
||||
<g id="Group 3545">
|
||||
<path id="Secondary" d="M15.635 6.4514C15.6593 6.49541 15.6848 6.54148 15.7046 6.58943C16.1185 7.45825 16.1017 8.7122 15.6275 9.56181L13.9018 12.5487C13.3915 11.7689 12.6768 11.0998 11.8176 10.5943C11.8392 10.5607 11.8585 10.5269 11.8753 10.4933C13.3988 7.41013 11.8176 3.33781 8.0003 3.39798C4.11578 3.333 2.58014 7.47994 4.17113 10.604C3.31664 11.1094 2.6067 11.7761 2.09878 12.5535C2.08691 12.5283 1.91791 12.2378 1.68616 11.8394C1.12277 10.8708 0.18813 9.26419 0.235961 9.27782C-0.0841643 8.50283 -0.0793459 7.4438 0.255235 6.67845C0.27533 6.62445 0.300245 6.57238 0.326452 6.52232C0.341024 6.49435 0.356067 6.46697 0.370757 6.44017L2.83046 2.1753C2.8341 2.17043 2.83716 2.1649 2.84021 2.15944C2.84327 2.15409 2.84621 2.1488 2.84973 2.14404C3.35754 1.29925 4.5586 0.613281 5.53813 0.613281H10.4576C11.5744 0.613281 12.607 1.21017 13.163 2.1753C13.1686 2.18241 14.024 3.66317 14.7254 4.87721C15.2115 5.7186 15.6235 6.43183 15.6275 6.43777L15.635 6.4514Z" fill="#DFEAFF" fill-opacity="0.5"/>
|
||||
<g id="Primary">
|
||||
<path d="M5.73802 12.1854C7.03039 12.9171 8.98957 12.9147 10.2532 12.1806C11.3314 12.7149 12.1161 13.6247 12.3591 14.6933C11.8272 15.0856 11.1725 15.3527 10.5804 15.3816C10.542 15.3865 10.4987 15.3865 10.4601 15.3865C10.4265 15.3856 9.7571 15.386 8.9193 15.3865H8.87546C7.43983 15.3874 5.53976 15.3886 5.47807 15.3841C4.87154 15.3696 4.1904 15.1 3.64404 14.6933C3.88237 13.6271 4.66459 12.7197 5.73802 12.1854Z" fill="#DFEAFF" fill-opacity="0.5"/>
|
||||
<path d="M10.4314 8.0023C10.5156 11.3598 5.48535 11.3574 5.56961 8.0023C5.5239 4.62553 10.4747 4.62553 10.4314 8.0023Z" fill="#DFEAFF" fill-opacity="0.5"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
return (
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Group 3544">
|
||||
<g id="Group 3545">
|
||||
<path id="Secondary" d="M15.635 6.4514C15.6593 6.49541 15.6848 6.54148 15.7046 6.58943C16.1185 7.45825 16.1017 8.7122 15.6275 9.56181L13.9018 12.5487C13.3915 11.7689 12.6768 11.0998 11.8176 10.5943C11.8392 10.5607 11.8585 10.5269 11.8753 10.4933C13.3988 7.41013 11.8176 3.33781 8.0003 3.39798C4.11578 3.333 2.58014 7.47994 4.17113 10.604C3.31664 11.1094 2.6067 11.7761 2.09878 12.5535C2.08691 12.5283 1.91791 12.2378 1.68616 11.8394C1.12277 10.8708 0.18813 9.26419 0.235961 9.27782C-0.0841643 8.50283 -0.0793459 7.4438 0.255235 6.67845C0.27533 6.62445 0.300245 6.57238 0.326452 6.52232C0.341024 6.49435 0.356067 6.46697 0.370757 6.44017L2.83046 2.1753C2.8341 2.17043 2.83716 2.1649 2.84021 2.15944C2.84327 2.15409 2.84621 2.1488 2.84973 2.14404C3.35754 1.29925 4.5586 0.613281 5.53813 0.613281H10.4576C11.5744 0.613281 12.607 1.21017 13.163 2.1753C13.1686 2.18241 14.024 3.66317 14.7254 4.87721C15.2115 5.7186 15.6235 6.43183 15.6275 6.43777L15.635 6.4514Z" fill="#DFEAFF" fill-opacity="0.5" />
|
||||
<g id="Primary">
|
||||
<path d="M5.73802 12.1854C7.03039 12.9171 8.98957 12.9147 10.2532 12.1806C11.3314 12.7149 12.1161 13.6247 12.3591 14.6933C11.8272 15.0856 11.1725 15.3527 10.5804 15.3816C10.542 15.3865 10.4987 15.3865 10.4601 15.3865C10.4265 15.3856 9.7571 15.386 8.9193 15.3865H8.87546C7.43983 15.3874 5.53976 15.3886 5.47807 15.3841C4.87154 15.3696 4.1904 15.1 3.64404 14.6933C3.88237 13.6271 4.66459 12.7197 5.73802 12.1854Z" fill="#DFEAFF" fill-opacity="0.5" />
|
||||
<path d="M10.4314 8.0023C10.5156 11.3598 5.48535 11.3574 5.56961 8.0023C5.5239 4.62553 10.4747 4.62553 10.4314 8.0023Z" fill="#DFEAFF" fill-opacity="0.5" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function Banner() {
|
||||
return (
|
||||
<div class='relative w-full h-52'>
|
||||
<img src={image} class='absolute rounded-xl w-full h-52 object-cover' />
|
||||
<div class='relative z-10 h-full px-8 py-6 text-fg-primary flex flex-col justify-between items-start'>
|
||||
<div class='flex flex-col gap-y-2'>
|
||||
<h1>Building worlds</h1>
|
||||
<p>A description would go here if I was smart</p>
|
||||
</div>
|
||||
<div class='flex w-full flex-row justify-between items-end'>
|
||||
<div class='flex flex-row items-center gap-x-4'>
|
||||
<Button iconLeft={<PlayIcon />}>Launch 1.19.2</Button>
|
||||
<Button styleType='icon' class='w-8 h-8'>
|
||||
<DotsVerticalIcon />
|
||||
</Button>
|
||||
</div>
|
||||
<div class='flex flex-row gap-x-2'>
|
||||
<Tag iconLeft={<OneConfigLogo />} />
|
||||
<Tag iconLeft={<CheckIcon />}>Verified</Tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div class="relative w-full h-52">
|
||||
<img src={image} class="absolute rounded-xl w-full h-52 object-cover" />
|
||||
<div class="relative z-10 h-full px-8 py-6 text-fg-primary flex flex-col justify-between items-start">
|
||||
<div class="flex flex-col gap-y-2">
|
||||
<h1>Building worlds</h1>
|
||||
<p>A description would go here if I was smart</p>
|
||||
</div>
|
||||
<div class="flex w-full flex-row justify-between items-end">
|
||||
<div class="flex flex-row items-center gap-x-4">
|
||||
<Button iconLeft={<PlayIcon />}>Launch 1.19.2</Button>
|
||||
<Button styleType="icon" class="w-8 h-8">
|
||||
<DotsVerticalIcon />
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex flex-row gap-x-2">
|
||||
<Tag iconLeft={<OneConfigLogo />} />
|
||||
<Tag iconLeft={<CheckIcon />}>Verified</Tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type InstanceCardProps = {
|
||||
name: string,
|
||||
version: string,
|
||||
client: game.Client,
|
||||
mods?: number,
|
||||
cover?: string,
|
||||
lastPlayed?: number,
|
||||
};
|
||||
interface InstanceCardProps {
|
||||
name: string;
|
||||
version: string;
|
||||
client: game.Client;
|
||||
mods?: number;
|
||||
cover?: string;
|
||||
lastPlayed?: number;
|
||||
}
|
||||
|
||||
function InstanceCard(props: InstanceCardProps) {
|
||||
return (
|
||||
<div class='h-[152px] group flex flex-col rounded-xl bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed border border-gray-.5 overflow-hidden'>
|
||||
<div class='flex-1 relative overflow-hidden'>
|
||||
<div class='absolute h-full w-full group-hover:scale-110 transition-transform'>
|
||||
<img
|
||||
class={`object-cover h-full w-full ${props.cover ? '' : ' filter grayscale'}`}
|
||||
src={props.cover || defaultCover}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class='z-10 p-3 flex flex-row items-center justify-between'>
|
||||
<div class='flex flex-col gap-1.5'>
|
||||
<p class='h-4 font-semibold'>{props.name}</p>
|
||||
<p class='h-4 text-xs'>
|
||||
{upperFirst(props.client)} {props.version} {props.mods && `• ${props.mods} mods`}
|
||||
</p>
|
||||
</div>
|
||||
<Button styleType='icon' class='w-8 h-8'>
|
||||
<DotsVerticalIcon />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div class="h-[152px] group flex flex-col rounded-xl bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed border border-gray-.5 overflow-hidden">
|
||||
<div class="flex-1 relative overflow-hidden">
|
||||
<div class="absolute h-full w-full group-hover:scale-110 transition-transform">
|
||||
<img
|
||||
class={`object-cover h-full w-full ${props.cover ? '' : ' filter grayscale'}`}
|
||||
src={props.cover || defaultCover}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="z-10 p-3 flex flex-row items-center justify-between">
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<p class="h-4 font-semibold">{props.name}</p>
|
||||
<p class="h-4 text-xs">
|
||||
{upperFirst(props.client)}
|
||||
{' '}
|
||||
{props.version}
|
||||
{' '}
|
||||
{props.mods && `• ${props.mods} mods`}
|
||||
</p>
|
||||
</div>
|
||||
<Button styleType="icon" class="w-8 h-8">
|
||||
<DotsVerticalIcon />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type InstanceGroupProps = {
|
||||
title: string,
|
||||
instances: InstanceCardProps[],
|
||||
};
|
||||
interface InstanceGroupProps {
|
||||
title: string;
|
||||
instances: InstanceCardProps[];
|
||||
}
|
||||
|
||||
function InstanceGroup(props: InstanceGroupProps) {
|
||||
const [sorted, setSorted] = createSignal<InstanceCardProps[]>([]);
|
||||
const [sorted, setSorted] = createSignal<InstanceCardProps[]>([]);
|
||||
|
||||
createEffect(() => {
|
||||
setSorted(props.instances.sort((a, b) => {
|
||||
if (a.lastPlayed && b.lastPlayed) {
|
||||
return b.lastPlayed - a.lastPlayed;
|
||||
}
|
||||
createEffect(() => {
|
||||
setSorted(props.instances.sort((a, b) => {
|
||||
if (a.lastPlayed && b.lastPlayed)
|
||||
return b.lastPlayed - a.lastPlayed;
|
||||
|
||||
return 0;
|
||||
}));
|
||||
});
|
||||
return 0;
|
||||
}));
|
||||
});
|
||||
|
||||
return (
|
||||
<div class='flex flex-col gap-y-4'>
|
||||
<h4>{props.title}</h4>
|
||||
<div class='grid grid-cols-4 gap-4'>
|
||||
<For each={sorted()}>{(instance) => (
|
||||
<InstanceCard {...instance} />
|
||||
)}</For>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div class="flex flex-col gap-y-4">
|
||||
<h4>{props.title}</h4>
|
||||
<div class="grid grid-cols-4 gap-4">
|
||||
<For each={sorted()}>
|
||||
{instance => (
|
||||
<InstanceCard {...instance} />
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface InstanceCardProps {
|
||||
name: string;
|
||||
version: string;
|
||||
client: game.Client;
|
||||
mods?: number;
|
||||
cover?: string;
|
||||
lastPlayed?: number;
|
||||
}
|
||||
|
||||
function InstanceCard(props: InstanceCardProps) {
|
||||
return (
|
||||
<div class="h-[152px] group flex flex-col rounded-xl bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed border border-gray-.5 overflow-hidden">
|
||||
<div class="flex-1 relative overflow-hidden">
|
||||
<div class="absolute h-full w-full group-hover:scale-110 transition-transform">
|
||||
<img
|
||||
class={`object-cover h-full w-full ${props.cover ? '' : ' filter grayscale'}`}
|
||||
src={props.cover || defaultCover}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="z-10 p-3 flex flex-row items-center justify-between">
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<p class="h-4 font-semibold">{props.name}</p>
|
||||
<p class="h-4 text-xs">
|
||||
{upperFirst(props.client)}
|
||||
{' '}
|
||||
{props.version}
|
||||
{' '}
|
||||
{props.mods && `• ${props.mods} mods`}
|
||||
</p>
|
||||
</div>
|
||||
<Button styleType="icon" class="w-8 h-8">
|
||||
<DotsVerticalIcon />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface InstanceGroupProps {
|
||||
title: string;
|
||||
instances: InstanceCardProps[];
|
||||
}
|
||||
|
||||
function InstanceGroup(props: InstanceGroupProps) {
|
||||
const [sorted, setSorted] = createSignal<InstanceCardProps[]>([]);
|
||||
|
||||
createEffect(() => {
|
||||
setSorted(props.instances.sort((a, b) => {
|
||||
if (a.lastPlayed && b.lastPlayed)
|
||||
return b.lastPlayed - a.lastPlayed;
|
||||
|
||||
return 0;
|
||||
}));
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="flex flex-col gap-y-4">
|
||||
<h4>{props.title}</h4>
|
||||
<div class="grid grid-cols-4 gap-4">
|
||||
<For each={sorted()}>
|
||||
{instance => (
|
||||
<InstanceCard {...instance} />
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function HomePage() {
|
||||
const myInstances: InstanceCardProps[] = [
|
||||
{
|
||||
name: 'Hypixel',
|
||||
client: 'vanilla',
|
||||
version: '1.8.9',
|
||||
},
|
||||
{
|
||||
name: 'OneConfig ??',
|
||||
client: 'forge',
|
||||
version: '1.8.9',
|
||||
mods: 12,
|
||||
},
|
||||
{
|
||||
name: 'Fabulously Optimised',
|
||||
client: 'fabric',
|
||||
version: '1.20.4',
|
||||
mods: 48,
|
||||
},
|
||||
{
|
||||
name: 'sus client',
|
||||
client: 'other',
|
||||
version: '1.8.9',
|
||||
},
|
||||
{
|
||||
name: 'OneConfig ??',
|
||||
client: 'forge',
|
||||
version: '1.8.9',
|
||||
mods: 12,
|
||||
},
|
||||
{
|
||||
name: 'Fabulously Optimised',
|
||||
client: 'fabric',
|
||||
version: '1.20.4',
|
||||
mods: 48,
|
||||
},
|
||||
{
|
||||
name: 'sus client',
|
||||
client: 'other',
|
||||
version: '1.8.9',
|
||||
},
|
||||
];
|
||||
const myInstances: InstanceCardProps[] = [
|
||||
{
|
||||
name: 'Hypixel',
|
||||
client: 'vanilla',
|
||||
version: '1.8.9',
|
||||
},
|
||||
{
|
||||
name: 'OneConfig ??',
|
||||
client: 'forge',
|
||||
version: '1.8.9',
|
||||
mods: 12,
|
||||
},
|
||||
{
|
||||
name: 'Fabulously Optimised',
|
||||
client: 'fabric',
|
||||
version: '1.20.4',
|
||||
mods: 48,
|
||||
},
|
||||
{
|
||||
name: 'sus client',
|
||||
client: 'other',
|
||||
version: '1.8.9',
|
||||
},
|
||||
{
|
||||
name: 'OneConfig ??',
|
||||
client: 'forge',
|
||||
version: '1.8.9',
|
||||
mods: 12,
|
||||
},
|
||||
{
|
||||
name: 'Fabulously Optimised',
|
||||
client: 'fabric',
|
||||
version: '1.20.4',
|
||||
mods: 48,
|
||||
},
|
||||
{
|
||||
name: 'sus client',
|
||||
client: 'other',
|
||||
version: '1.8.9',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div class='flex flex-col gap-y-4 text-fg-primary'>
|
||||
<Banner />
|
||||
return (
|
||||
<div class="flex flex-col gap-y-4 text-fg-primary">
|
||||
<Banner />
|
||||
|
||||
<div class='flex flex-row justify-between items-center'>
|
||||
<div>
|
||||
<TextField iconLeft={<SearchMdIcon />} placeholder="Search for something..." />
|
||||
</div>
|
||||
<div class='flex flex-row gap-x-4'>
|
||||
<Button styleType='primary' iconLeft={<PlusIcon class='!w-5 stroke-[2.2]' />}>New Instance</Button>
|
||||
<Button styleType='secondary' iconLeft={<Download01Icon />}>From URL</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row justify-between items-center">
|
||||
<div>
|
||||
<TextField iconLeft={<SearchMdIcon />} placeholder="Search for something..." />
|
||||
</div>
|
||||
<div class="flex flex-row gap-x-4">
|
||||
<Button styleType="primary" iconLeft={<PlusIcon class="!w-5 stroke-[2.2]" />}>New Instance</Button>
|
||||
<Button styleType="secondary" iconLeft={<Download01Icon />}>From URL</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InstanceGroup title='Hypixel' instances={myInstances} />
|
||||
<InstanceGroup title='Hypixel' instances={myInstances} />
|
||||
</div>
|
||||
);
|
||||
<InstanceGroup title="Hypixel" instances={myInstances} />
|
||||
<InstanceGroup title="Hypixel" instances={myInstances} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default HomePage;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
function UpdatesPage() {
|
||||
return (
|
||||
<h1>
|
||||
Updates
|
||||
</h1>
|
||||
);
|
||||
return (
|
||||
<h1>
|
||||
Updates
|
||||
</h1>
|
||||
);
|
||||
}
|
||||
|
||||
export default UpdatesPage;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
export function isDev() {
|
||||
return window.location.host.startsWith('localhost:');
|
||||
}
|
||||
export const isDev = () => window.location.host.startsWith('localhost:');
|
||||
|
||||
export default {
|
||||
isDev,
|
||||
};
|
||||
export default { isDev };
|
||||
|
|
|
|||
|
|
@ -1,111 +1,111 @@
|
|||
import type { Config } from 'tailwindcss';
|
||||
|
||||
const config: Config = {
|
||||
content: ['./src/**/*.{js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
fontFamily: {
|
||||
sans: 'Poppins',
|
||||
},
|
||||
content: ['./src/**/*.{js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
fontFamily: {
|
||||
sans: 'Poppins',
|
||||
},
|
||||
|
||||
fontSize: {
|
||||
// Based off 16px
|
||||
xs: '0.688rem',
|
||||
sm: '0.75rem',
|
||||
md: '0.875rem',
|
||||
lg: '1rem',
|
||||
xl: '1.25rem',
|
||||
xxl: '1.5rem',
|
||||
'2xl': '2rem',
|
||||
},
|
||||
fontSize: {
|
||||
// Based off 16px
|
||||
'xs': '0.688rem',
|
||||
'sm': '0.75rem',
|
||||
'md': '0.875rem',
|
||||
'lg': '1rem',
|
||||
'xl': '1.25rem',
|
||||
'xxl': '1.5rem',
|
||||
'2xl': '2rem',
|
||||
},
|
||||
|
||||
colors: {
|
||||
white: '#ffffff',
|
||||
black: '#000000',
|
||||
colors: {
|
||||
white: '#ffffff',
|
||||
black: '#000000',
|
||||
|
||||
gray: {
|
||||
'.5': '#FFFFFF0D',
|
||||
'.10': '#FFFFFF1A',
|
||||
},
|
||||
gray: {
|
||||
'.5': '#FFFFFF0D',
|
||||
'.10': '#FFFFFF1A',
|
||||
},
|
||||
|
||||
fg: {
|
||||
primary: {
|
||||
DEFAULT: '#D5DBFF',
|
||||
hover: '#D5DBFFD9',
|
||||
pressed: '#E1E5FF',
|
||||
disabled: '#E1E5FF80',
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: '#78818D',
|
||||
hover: '#5F6874',
|
||||
pressed: '#828D9B',
|
||||
disabled: '#78818D80',
|
||||
},
|
||||
},
|
||||
fg: {
|
||||
primary: {
|
||||
DEFAULT: '#D5DBFF',
|
||||
hover: '#D5DBFFD9',
|
||||
pressed: '#E1E5FF',
|
||||
disabled: '#E1E5FF80',
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: '#78818D',
|
||||
hover: '#5F6874',
|
||||
pressed: '#828D9B',
|
||||
disabled: '#78818D80',
|
||||
},
|
||||
},
|
||||
|
||||
brand: {
|
||||
DEFAULT: '#2B4BFF',
|
||||
hover: '#2843DD',
|
||||
pressed: '#3957FF',
|
||||
disabled: '#3957FF80',
|
||||
},
|
||||
brand: {
|
||||
DEFAULT: '#2B4BFF',
|
||||
hover: '#2843DD',
|
||||
pressed: '#3957FF',
|
||||
disabled: '#3957FF80',
|
||||
},
|
||||
|
||||
onbrand: {
|
||||
DEFAULT: '#D5DBFF',
|
||||
hover: '#D5DBFFD9',
|
||||
pressed: '#E1E5FF',
|
||||
disabled: '#E1E5FF80',
|
||||
},
|
||||
onbrand: {
|
||||
DEFAULT: '#D5DBFF',
|
||||
hover: '#D5DBFFD9',
|
||||
pressed: '#E1E5FF',
|
||||
disabled: '#E1E5FF80',
|
||||
},
|
||||
|
||||
danger: {
|
||||
DEFAULT: '#FF4444',
|
||||
hover: '#D63434',
|
||||
pressed: '#FF5656',
|
||||
disabled: '#FF444480',
|
||||
},
|
||||
danger: {
|
||||
DEFAULT: '#FF4444',
|
||||
hover: '#D63434',
|
||||
pressed: '#FF5656',
|
||||
disabled: '#FF444480',
|
||||
},
|
||||
|
||||
component: {
|
||||
bg: {
|
||||
DEFAULT: '#1A2229',
|
||||
hover: '#171F25',
|
||||
pressed: '#222C35',
|
||||
disabled: '#1A222980',
|
||||
},
|
||||
},
|
||||
component: {
|
||||
bg: {
|
||||
DEFAULT: '#1A2229',
|
||||
hover: '#171F25',
|
||||
pressed: '#222C35',
|
||||
disabled: '#1A222980',
|
||||
},
|
||||
},
|
||||
|
||||
primary: '#11171C',
|
||||
secondary: '#192026',
|
||||
},
|
||||
extend: {
|
||||
height: {
|
||||
15: '60px',
|
||||
},
|
||||
primary: '#11171C',
|
||||
secondary: '#192026',
|
||||
},
|
||||
extend: {
|
||||
height: {
|
||||
15: '60px',
|
||||
},
|
||||
|
||||
strokeWidth: {
|
||||
'3': '3',
|
||||
},
|
||||
strokeWidth: {
|
||||
3: '3',
|
||||
},
|
||||
|
||||
backgroundColor: {
|
||||
transparent: 'transparent',
|
||||
},
|
||||
backgroundColor: {
|
||||
transparent: 'transparent',
|
||||
},
|
||||
|
||||
animation: {
|
||||
'fade-in': 'fadeIn 150ms easeOutExpo forwards',
|
||||
'fade-out': 'fadeOut 150ms easeOutExpo forwards',
|
||||
},
|
||||
animation: {
|
||||
'fade-in': 'fadeIn 150ms easeOutExpo forwards',
|
||||
'fade-out': 'fadeOut 150ms easeOutExpo forwards',
|
||||
},
|
||||
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
'0%': { opacity: '0' },
|
||||
'100%': { opacity: '1' },
|
||||
},
|
||||
fadeOut: {
|
||||
'0%': { opacity: '1' },
|
||||
'100%': { opacity: '0' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
'0%': { opacity: '0' },
|
||||
'100%': { opacity: '1' },
|
||||
},
|
||||
fadeOut: {
|
||||
'0%': { opacity: '1' },
|
||||
'100%': { opacity: '0' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "solid-js",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "solid-js",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"allowImportingTsExtensions": true,
|
||||
"strict": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noEmit": true,
|
||||
"isolatedModules": true,
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"references": [{ "path": "./tsconfig.node.json" }],
|
||||
"include": ["src"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { defineConfig } from 'vite';
|
||||
import solid from 'vite-plugin-solid';
|
||||
|
||||
export default defineConfig(async () => ({
|
||||
plugins: [solid()],
|
||||
plugins: [solid()],
|
||||
|
||||
clearScreen: false,
|
||||
server: {
|
||||
port: 1420,
|
||||
strictPort: true,
|
||||
watch: {
|
||||
ignored: ['**/src-tauri/**'],
|
||||
},
|
||||
},
|
||||
clearScreen: false,
|
||||
server: {
|
||||
port: 1420,
|
||||
strictPort: true,
|
||||
watch: {
|
||||
ignored: ['**/src-tauri/**'],
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue