feat: TextField

src/ui/App.tsx

@@ -43,15 +43,18 @@ function AnimatedRoutes(props: ParentProps) {
         },
     ];
 
+    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,
-                    {
-                        duration: 100,
-                    },
+                    properties,
                 );
 
                 animation.onfinish = done;
@@ -59,9 +62,7 @@ function AnimatedRoutes(props: ParentProps) {
             onExit={(element, done) => {
                 const animation = element.animate(
                     keyframesExit,
-                    {
-                        duration: 100,
-                    },
+                    properties,
                 );
 
                 animation.onfinish = done;

src/ui/components/Navbar.tsx

@@ -22,7 +22,7 @@ function NavbarButton(props: NavbarButtonProps) {
 function Navbar() {
     return (
         <div class='flex flex-row justify-evenly items-center h-15'>
-            <div class='flex flex-row gap-x-16 py-1'>
+            <div class='flex flex-row gap-x-10 py-1'>
                 <NavbarButton path="/" label="Home" />
                 <NavbarButton path="/browser" label="Browser" />
                 <NavbarButton path="/updates" label="Updates" />

src/ui/components/base/Button.module.scss

@@ -8,6 +8,7 @@
 
     &__secondary {
         @apply border border-gray-.5;
+        @apply text-fg-primary hover:text-fg-primary-hover active:text-fg-primary-pressed disabled:text-fg-primary-disabled;
         @apply bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed disabled:bg-component-bg-disabled;
     }
 

src/ui/components/base/TextField.module.scss

@@ -0,0 +1,21 @@
+.textfield {
+    @apply bg-component-bg [&:not(:focus-within)]:hover:bg-component-bg-hover focus-within:bg-component-bg-pressed disabled:bg-component-bg-disabled;
+    @apply border border-gray-.5 text-fg-primary fill-fg-primary;
+    @apply rounded-lg px-2.5 py-1;
+    @apply flex flex-row gap-x-1.5;
+
+    
+    & input {
+        &::selection {
+            @apply bg-brand/30;
+        }
+        
+        @apply bg-transparent outline-none appearance-none p-0 m-0 box-border w-full;
+    }
+
+    & span {
+        & * {
+            @apply w-4;
+        }
+    }
+}

src/ui/components/base/TextField.tsx

@@ -0,0 +1,21 @@
+import { JSX, splitProps } from 'solid-js';
+import styles from './TextField.module.scss';
+
+type TextFieldProps = {
+    iconLeft?: JSX.Element;
+    iconRight?: JSX.Element;
+} & JSX.InputHTMLAttributes<HTMLInputElement>;
+
+function TextField(props: TextFieldProps) {
+    const [fieldProps, rest] = splitProps(props, ['iconLeft', 'iconRight']);
+
+    return (
+        <div class={styles.textfield}>
+            {fieldProps.iconLeft && <span class={styles.icon}>{fieldProps.iconLeft}</span>}
+            <input type="text" {...rest} />
+            {fieldProps.iconRight && <span class={styles.icon}>{fieldProps.iconRight}</span>}
+        </div>
+    );
+}
+
+export default TextField;

src/ui/pages/Home.tsx

@@ -1,8 +1,12 @@
-import { CheckIcon, DotsVerticalIcon, PlayIcon } from '@untitled-theme/icons-solid';
+import {
+    CheckIcon, DotsVerticalIcon, Download01Icon, PlayIcon, PlusIcon, SearchMdIcon,
+} from '@untitled-theme/icons-solid';
 import image from '../../assets/images/header.png';
 import Button from '../components/base/Button';
 import Tag from '../components/base/Tag';
+import TextField from '../components/base/TextField';
 
+// 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">
@@ -16,31 +20,28 @@ function OneConfigLogo() {
                 </g>
             </g>
         </svg>
-
     );
 }
 
-function HomePage() {
+function Banner() {
     return (
-        <div>
-            <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 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 class='p-1.5 hover:bg-gray-.10 rounded-md'>
+                            <DotsVerticalIcon />
+                        </button>
                     </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 class='flex flex-row gap-x-2'>
+                        <Tag iconLeft={<OneConfigLogo />} />
+                        <Tag iconLeft={<CheckIcon />}>Verified</Tag>
                     </div>
                 </div>
             </div>
@@ -48,4 +49,21 @@ function HomePage() {
     );
 }
 
+function HomePage() {
+    return (
+        <div class='flex flex-col gap-y-6'>
+            <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>
+    );
+}
+
 export default HomePage;

tailwind.config.js

@@ -83,6 +83,10 @@ export default {
                 3: 3,
             },
 
+            backgroundColor: {
+                transparent: 'transparent',
+            },
+
             animation: {
                 'fade-in': 'fadeIn 150ms easeOutExpo forwards',
                 'fade-out': 'fadeOut 150ms easeOutExpo forwards',