generated from avior/template-web-astro
add build
This commit is contained in:
@@ -1,6 +1,5 @@
|
||||
---
|
||||
import Windows from './Button/Windows.astro'
|
||||
import Default from './Button/Default.astro'
|
||||
import Linux from './Button/Linux.astro'
|
||||
import Platform from './Platform.astro'
|
||||
import type ButtonProps from './Button/Props'
|
||||
@@ -9,7 +8,6 @@ export interface Props extends ButtonProps {}
|
||||
---
|
||||
|
||||
<Platform>
|
||||
<Linux slot="linux"><slot /></Linux>
|
||||
<Windows slot="windows"><slot /></Windows>
|
||||
<Default><slot /></Default>
|
||||
<Linux slot="linux">Linux <slot /></Linux>
|
||||
<Windows slot="windows">Windows <slot /></Windows>
|
||||
</Platform>
|
||||
|
@@ -1,35 +0,0 @@
|
||||
---
|
||||
import { objectOmit } from '@dzeio/object-util'
|
||||
import type ButtonProps from './Props'
|
||||
|
||||
export interface Props extends ButtonProps {}
|
||||
|
||||
const classes = [
|
||||
"button",
|
||||
{outline: Astro.props.outline},
|
||||
{ghost: Astro.props.ghost},
|
||||
Astro.props.class
|
||||
]
|
||||
|
||||
---
|
||||
{'href' in Astro.props && (
|
||||
<a class:list={classes} {...objectOmit(Astro.props, 'type') as any}>
|
||||
<slot />
|
||||
</a>
|
||||
) || (
|
||||
<button class:list={classes} {...objectOmit(Astro.props, 'type') as any}>
|
||||
<slot />
|
||||
</button>
|
||||
)}
|
||||
|
||||
<style>
|
||||
.button {
|
||||
@apply outline-none inline-flex px-4 py-2 rounded-lg bg-amber-500 hover:bg-amber-600 active:bg-amber-700 text-white font-medium transition-colors
|
||||
}
|
||||
.button.outline {
|
||||
@apply bg-transparent border-2 text-amber-500 border-gray-200 hover:bg-gray-100 active:bg-gray-200 active:border-gray-300
|
||||
}
|
||||
.button.ghost {
|
||||
@apply text-black bg-transparent hover:bg-gray-200 active:bg-gray-300
|
||||
}
|
||||
</style>
|
@@ -24,6 +24,20 @@ const classes = [
|
||||
|
||||
<style>
|
||||
.button {
|
||||
@apply inline-flex px-4 py-2 rounded-lg bg-gtk-neutral-200 hover:bg-gray-300 active:bg-gray-400 focus:outline-2 focus:outline outline-gtk-blue-300 text-black font-medium transition-all
|
||||
@apply px-4 py-2 rounded-md bg-gray-200 text-gray-900 shadow-sm border border-gray-300 hover:bg-gray-300 active:bg-gray-400 transition duration-150;
|
||||
font-weight: 500;
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
.button.outline {
|
||||
@apply px-4 py-2 rounded-md border border-gray-500 text-gray-800 bg-transparent hover:bg-gray-100 active:bg-gray-200 transition duration-150;
|
||||
font-weight: 500;
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
.button.ghost {
|
||||
@apply px-4 py-2 rounded-md text-gray-700 hover:bg-gray-100 active:bg-gray-200 transition duration-150;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
@@ -24,12 +24,20 @@ const classes = [
|
||||
|
||||
<style>
|
||||
.button {
|
||||
@apply outline-none inline-flex px-4 py-2 rounded-lg bg-amber-500 hover:bg-amber-600 active:bg-amber-700 text-white font-medium transition-colors
|
||||
@apply px-4 py-2 rounded-xl bg-white/60 text-gray-900 shadow-md backdrop-blur border border-gray-300 hover:bg-white/80 hover:shadow-lg active:bg-white/90 transition duration-150;
|
||||
font-weight: 500;
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
.button.outline {
|
||||
@apply bg-transparent border-2 text-amber-500 border-gray-200 hover:bg-gray-100 active:bg-gray-200 active:border-gray-300
|
||||
@apply px-4 py-2 rounded-xl border border-blue-500 text-blue-600 bg-transparent hover:bg-blue-50 active:bg-blue-100 transition duration-150;
|
||||
font-weight: 500;
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
.button.ghost {
|
||||
@apply text-black bg-transparent hover:bg-gray-200 active:bg-gray-300
|
||||
@apply px-4 py-2 rounded-xl text-gray-700 hover:bg-gray-100 active:bg-gray-200 transition duration-150;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
@@ -1,30 +1,13 @@
|
||||
---
|
||||
type Platform = 'linux' | 'windows' | 'default'
|
||||
import { getCurrentPlatform } from 'libs/TauriUtils'
|
||||
|
||||
const current = import.meta.env.TAURI_PLATFORM
|
||||
|
||||
let platform: Platform = 'default'
|
||||
|
||||
switch (current) {
|
||||
case 'linux':
|
||||
platform = 'linux'
|
||||
break;
|
||||
case 'windows':
|
||||
platform = 'windows'
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
let platform = getCurrentPlatform()
|
||||
---
|
||||
|
||||
{platform === 'linux' && (
|
||||
<slot name="linux"><slot /></slot>
|
||||
)}
|
||||
|
||||
{platform === 'windows' && (
|
||||
{(platform === 'windows' || platform === 'default') && (
|
||||
<slot name="windows"><slot /></slot>
|
||||
)}
|
||||
|
||||
{platform === 'default' && (
|
||||
<slot />
|
||||
)}
|
||||
|
@@ -1,18 +1,18 @@
|
||||
export function getPlatformStyle() {
|
||||
|
||||
}
|
||||
type Platform = 'linux' | 'windows' | 'default'
|
||||
type Platform = 'linux' | 'windows'
|
||||
|
||||
export function getCurrentPlatform(): Platform {
|
||||
return 'windows'
|
||||
const current = import.meta.env.TAURI_ENV_PLATFORM
|
||||
console.log(import.meta.env)
|
||||
|
||||
switch (current) {
|
||||
case 'linux':
|
||||
return 'linux'
|
||||
default:
|
||||
case 'windows':
|
||||
return 'windows'
|
||||
default:
|
||||
return 'default'
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user