oiupoyt/OneLauncher-Cracked
1
1
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity

feat: Home page hero section

Browse source
This commit is contained in:
LynithDev 2024-03-16 16:24:16 +01:00
parent de2b4a2ef5
commit 0474d49981
9 changed files with 93 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/images/header.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 340 KiB

2
src/globals.css
View file

@ -11,6 +11,6 @@ body {
*:hover { cursor: default !important; }
/* end lynith's native experience */
h1 { @apply text-2xl font-bold; }
h1 { @apply text-2xl font-semibold; }
h2 { @apply text-xxl font-semibold; }
h3 { @apply text-xl font-medium; }

2
src/ui/App.tsx
View file

@ -8,7 +8,7 @@ function App(props: ParentProps) {
<main class='flex flex-col bg-primary min-h-screen text-white'>
<WindowFrame />
<Navbar />
<div class='flex flex-col flex-1 *:flex-1 overflow-x-hidden'>
<div class='flex flex-col flex-1 *:flex-1 overflow-x-hidden px-8'>
{ /* eslint-disable-next-line @typescript-eslint/no-use-before-define */ }
<AnimatedRoutes>
{props.children}

7
src/ui/components/base/Button.module.scss
View file

@ -1,6 +1,5 @@
.button {
cursor: default !important;
@apply py-2 px-4 rounded-lg;
@apply py-1.5 px-4 rounded-lg flex flex-row justify-center items-center gap-x-2.5;
&__primary {
@apply text-onbrand hover:text-onbrand-hover active:text-onbrand-pressed disabled:text-onbrand-disabled;
@ -15,4 +14,8 @@
&__danger {
@apply bg-danger hover:bg-danger-hover active:bg-danger-pressed disabled:bg-danger-disabled;
}
}
.icon > * {
@apply w-4;
}

13
src/ui/components/base/Button.tsx
View file

@ -1,16 +1,23 @@
import { JSX, ParentProps, mergeProps } from 'solid-js';
import {
JSX, ParentProps, 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',
};
function Button(props: ButtonProps) {
const merged = mergeProps({ styleType: 'primary' }, props);
const [buttonProps, rest] = splitProps(props, ['iconLeft', 'iconRight', 'styleType', 'class']);
const merged = mergeProps({ styleType: 'primary' }, buttonProps);
return (
<button class={`${styles.button} ${styles[`button__${merged.styleType}`]}`} {...props}>
<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>
);
}

8
src/ui/components/base/Tag.module.scss Normal file
View file

@ -0,0 +1,8 @@
.tag {
@apply flex flex-row justify-center items-center gap-x-2;
@apply bg-component-bg/60 border border-gray-.5 text-fg-secondary text-sm font-medium backdrop-blur-md rounded-lg px-2.5 py-0.5;
}
.icon > * {
@apply w-4;
}

19
src/ui/components/base/Tag.tsx Normal file
View file

@ -0,0 +1,19 @@
import { JSX, ParentProps } from 'solid-js';
import styles from './Tag.module.scss';
type TagProps = ParentProps & {
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>
);
}
export default Tag;

45
src/ui/pages/Home.tsx
View file

@ -1,8 +1,49 @@
import { CheckIcon, DotsVerticalIcon, PlayIcon } from '@untitled-theme/icons-solid';
import image from '../../assets/images/header.png';
import Button from '../components/base/Button';
import Tag from '../components/base/Tag';
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>
);
}
function HomePage() {
return (
<div>
<h1>Home</h1>
<p>Welcome to the home page</p>
<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 />} class='font-medium'>Launch 1.19.2</Button>
<button class='p-1.5 hover:bg-gray-.10 rounded-md'>
<DotsVerticalIcon />
</button>
</div>
<div class='flex flex-row gap-x-2'>
<Tag iconLeft={<OneConfigLogo />} />
<Tag iconLeft={<CheckIcon />}>Verified</Tag>
</div>
</div>
</div>
</div>
</div>
);
}

7
tailwind.config.js
View file

@ -8,7 +8,8 @@ export default {
fontSize: {
// Based off 16px
sm: '0.688rem',
xs: '0.688rem',
sm: '0.75rem',
md: '0.875rem',
lg: '1rem',
xl: '1.25rem',
@ -78,6 +79,10 @@ export default {
15: '60px',
},
strokeWidth: {
3: 3,
},
animation: {
'fade-in': 'fadeIn 150ms easeOutExpo forwards',
'fade-out': 'fadeOut 150ms easeOutExpo forwards',