feat: improve visuals on larger monitors

- added links to repos - added links to libraries
ribbon-studios · Mar 15, 2024 · 9d9a93f · 9d9a93f
1 parent d89846e
commit 9d9a93f
Show file tree

Hide file tree

Showing 11 changed files with 181 additions and 56 deletions.
diff --git a/src/components/AppHeader.tsx b/src/components/AppHeader.tsx
@@ -4,6 +4,7 @@ import { Link, useParams } from 'react-router-dom';
 import { ArrowUp, Edit } from 'lucide-react';
 import { cn } from '../utils/cn';
 import { Button } from './Button';
+import { Input } from './Input';
 
 type Props = {
   onChange?: (value: string) => void;
@@ -30,10 +31,10 @@ export const AppHeader: FC<Props> = ({ onChange }) => {
     <>
       <div
         className={cn(
-          'fixed inset-x-0 top-0 from-gray-900 from-30% to-transparent bg-gradient-to-b h-64 z-50 opacity-0 transition-opacity pointer-events-none',
+          'fixed inset-x-0 top-0 from-gray-900 from-30% to-transparent bg-gradient-to-b h-64 z-30 opacity-0 transition-opacity pointer-events-none',
           sticky && 'opacity-100'
         )}
-      ></div>
+      />
       <div
         className={cn(
           'flex flex-col sm:flex-row sm:items-center gap-4 px-3 sm:px-8 py-3 bg-gray-950 sticky top-0 z-50 transition-all',
@@ -44,14 +45,9 @@ export const AppHeader: FC<Props> = ({ onChange }) => {
           Protontweaks
         </Link>
         <div className="flex flex-1 gap-4">
-          <input
-            type="text"
-            className="flex-1 bg-white/10 rounded-md min-h-12 px-3 text-xl"
-            value={search}
-            placeholder="Search"
-            onChange={(e) => onChange?.(e.target.value)}
-          />
+          <Input value={search} placeholder="Search" onChange={onChange} />
           <Button
+            className="flex-shrink-0 bg-accent"
             to={
               id
                 ? `https://github.com/rain-cafe/protontweaks-db/edit/main/apps/${id}.json`
@@ -64,7 +60,7 @@ export const AppHeader: FC<Props> = ({ onChange }) => {
       </div>
       <Button
         className={cn(
-          'fixed top-20 opacity-0 pointer-events-none left-1/2 -translate-x-1/2 z-50 transition-all rounded-full px-4 bg-white/80 text-black hover:bg-white',
+          'fixed top-28 sm:top-20 opacity-0 pointer-events-none left-1/2 -translate-x-1/2 z-40 transition-all rounded-full px-4 bg-white/80 text-black hover:bg-white',
           sticky && 'top-36 sm:top-28 opacity-100 pointer-events-auto'
         )}
         to="#root"

diff --git a/src/components/Button.module.css b/src/components/Button.module.css
@@ -0,0 +1,13 @@
+.button {
+  &:not(.disabled) {
+    &:after {
+      content: '';
+
+      @apply absolute pointer-events-none inset-0 bg-white/10 opacity-0 transition-opacity;
+    }
+
+    &:hover:after {
+      @apply opacity-100;
+    }
+  }
+}
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -1,10 +1,12 @@
 import { type ComponentProps, type FC, type ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import { cn } from '../utils/cn';
+import * as styles from './Button.module.css';
 
 type SharedProps = {
   children?: ReactNode;
   className?: string;
+  disabled?: boolean;
 };
 
 type LinkProps = SharedProps & {
@@ -23,49 +25,39 @@ const isLink = (props: Props): props is LinkProps => {
 };
 
 export const Button: FC<Props> = (props) => {
+  const className = cn(
+    styles.button,
+    'flex relative gap-2 items-center justify-center min-w-14 min-h-14 bg-secondary border border-transparent px-3 transition-all overflow-hidden rounded-md',
+    props.disabled && 'text-white/20 pointer-events-none',
+    props.className
+  );
   if (isLink(props)) {
     if (props.to.startsWith('#')) {
       return (
         <button
           {...props}
-          onClick={() => {
-            const id = props.to.replace('#', '');
-
-            const element = document.getElementById(id);
-
-            if (element) {
-              element.scrollIntoView({ behavior: 'smooth', block: 'start' });
-            } else {
-              console.warn(`Unknown ID: "${id}"`);
-            }
-          }}
-          className={cn(
-            'flex gap-2 items-center justify-center min-w-14 min-h-14 bg-white/10 hover:bg-transparent hover:border-white/10 border border-transparent px-3 rounded-md transition-all',
-            props.className
-          )}
+          onClick={
+            props.disabled
+              ? undefined
+              : () => {
+                  const id = props.to.replace('#', '');
+
+                  const element = document.getElementById(id);
+
+                  if (element) {
+                    element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                  } else {
+                    console.warn(`Unknown ID: "${id}"`);
+                  }
+                }
+          }
+          className={className}
         />
       );
     }
 
-    return (
-      <Link
-        {...props}
-        target={props.to.startsWith('http') ? '_blank' : undefined}
-        className={cn(
-          'flex gap-2 items-center justify-center min-w-14 min-h-14 bg-white/10 hover:bg-transparent hover:border-white/10 border border-transparent px-3 rounded-md transition-all',
-          props.className
-        )}
-      />
-    );
+    return <Link {...props} target={props.to.startsWith('http') ? '_blank' : undefined} className={className} />;
   }
 
-  return (
-    <button
-      {...props}
-      className={cn(
-        'flex gap-2 items-center justify-center min-w-14 min-h-14 bg-white/10 hover:bg-transparent hover:border-white/10 border border-transparent px-3 rounded-md transition-all',
-        props.className
-      )}
-    />
-  );
+  return <button {...props} className={className} />;
 };
diff --git a/src/components/ButtonGroup.module.css b/src/components/ButtonGroup.module.css
@@ -0,0 +1,11 @@
+.buttons {
+  @apply flex gap-[1px] flex-wrap;
+
+  > * {
+    @apply rounded-none flex-grow;
+  }
+
+  &.vertical {
+    @apply flex-col;
+  }
+}
diff --git a/src/components/ButtonGroup.tsx b/src/components/ButtonGroup.tsx
@@ -0,0 +1,18 @@
+import type { FC, ReactNode } from 'react';
+import * as styles from './ButtonGroup.module.css';
+import { cn } from '@/utils/cn';
+
+type Props = {
+  label: ReactNode;
+  children: ReactNode;
+  vertical?: boolean;
+};
+
+export const ButtonGroup: FC<Props> = ({ label, children, vertical }) => {
+  return (
+    <div className="flex flex-col rounded-md overflow-hidden bg-secondary w-full sm:max-w-80">
+      <div className="flex items-center justify-between gap-2 p-4 border-b border-b-white/10 font-bold">{label}</div>
+      <div className={cn(styles.buttons, vertical && styles.vertical)}>{children}</div>
+    </div>
+  );
+};
diff --git a/src/components/Code.tsx b/src/components/Code.tsx
@@ -14,7 +14,7 @@ export const Code: FC<Props> = ({ className, children, shell = false }) => {
   return (
     <div
       className={cn(
-        'relative select-none whitespace-pre-wrap flex flex-row items-start gap-2 rounded-md bg-white/10 px-4 py-2 hover:bg-white/20 transition-colors cursor-pointer pr-10',
+        'text-left relative select-none whitespace-pre-wrap flex flex-row items-start gap-2 rounded-md bg-white/10 px-4 py-2 hover:bg-white/20 transition-colors cursor-pointer pr-10',
         shell && "before:content-['$']",
         className
       )}

diff --git a/src/components/Input.module.css b/src/components/Input.module.css
@@ -0,0 +1,15 @@
+.input {
+  @apply relative;
+
+  &:not(.disabled) {
+    &:after {
+      content: '';
+
+      @apply absolute pointer-events-none inset-0 bg-white/10 opacity-0 transition-opacity;
+    }
+
+    &:hover:after {
+      @apply opacity-100;
+    }
+  }
+}
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -0,0 +1,22 @@
+import { type FC, type ComponentProps } from 'react';
+import { cn } from '../utils/cn';
+import * as styles from './Input.module.css';
+
+type Props = {
+  onChange?: (value: string) => void;
+} & Pick<ComponentProps<'input'>, 'value' | 'placeholder' | 'disabled'>;
+
+export const Input: FC<Props> = ({ onChange, ...props }) => {
+  return (
+    <div
+      className={cn(styles.input, 'flex-1 bg-accent rounded-md min-h-12 text-xl', props.disabled && styles.disabled)}
+    >
+      <input
+        {...props}
+        type="text"
+        className={cn('h-full w-full bg-transparent px-3 rounded-md')}
+        onChange={(e) => onChange?.(e.target.value)}
+      />
+    </div>
+  );
+};
diff --git a/src/pages/SplashPage.tsx b/src/pages/SplashPage.tsx
@@ -2,21 +2,66 @@ import { type FC } from 'react';
 import * as styles from './SplashPage.module.css';
 import { Code } from '@/components/Code';
 import { Button } from '@/components/Button';
+import { Code2, CodeIcon, ExternalLink, LibraryBig } from 'lucide-react';
+import { ButtonGroup } from '@/components/ButtonGroup';
 
 export const Component: FC = () => {
   return (
     <>
-      <div className="flex flex-col items-center mt-24 gap-4 text-center">
-        <h1 className="text-6xl font-bold">Simplified Linux Gaming</h1>
-        <h2 className={`text-5xl font-bold ${styles.rainbow}`}>Protontweaks</h2>
-        <Code className="mx-4 text-left">curl -fsSL https://protontweaks.com/install.sh | bash</Code>
+      <div className="flex flex-col items-center mt-24 gap-4 text-center mx-4">
+        <h1 className="text-4xl sm:text-6xl xl:text-8xl font-bold">Simplified Linux Gaming</h1>
+        <h2 className={`text-4xl sm:text-5xl xl:text-7xl font-bold ${styles.rainbow}`}>Protontweaks</h2>
+        <Code>curl -fsSL {location.origin}/install.sh | bash</Code>
         <div className="italic sm:max-w-lg">
           The command above will detect the available package managers on your system and provide you various options
           for installation.
         </div>
-        <div className="flex gap-4">
-          <Button to="/apps">Checkout the Tweak Database!~ ❤️🎮</Button>
-        </div>
+        <Button className="w-full sm:w-fit" to="/apps">
+          Checkout the Tweak Database!~ ❤️🎮
+        </Button>
+        <ButtonGroup
+          label={
+            <>
+              Repositories
+              <CodeIcon />
+            </>
+          }
+        >
+          <Button to="https://github.com/rain-cafe/protontweaks">
+            CLI
+            <ExternalLink size={20} />
+          </Button>
+          <Button to="https://github.com/rain-cafe/protontweaks-ui">
+            App
+            <ExternalLink size={20} />
+          </Button>
+          <Button to="https://github.com/rain-cafe/protontweaks-db">
+            Database
+            <ExternalLink size={20} />
+          </Button>
+        </ButtonGroup>
+
+        <ButtonGroup
+          label={
+            <>
+              Libraries
+              <LibraryBig />
+            </>
+          }
+        >
+          <Button to="https://github.com/rain-cafe/protontweaks-api-rs" className="justify-between">
+            Rust
+            <ExternalLink size={20} />
+          </Button>
+          <Button to="https://github.com/rain-cafe/protontweaks-api-js" className="justify-between" disabled>
+            NodeJS
+            <ExternalLink size={20} />
+          </Button>
+          <Button to="https://github.com/rain-cafe/protontweaks-db" className="justify-between" disabled>
+            Python
+            <ExternalLink size={20} />
+          </Button>
+        </ButtonGroup>
       </div>
     </>
   );

diff --git a/src/pages/apps/Layout.tsx b/src/pages/apps/Layout.tsx
@@ -1,17 +1,23 @@
 import { useState, type FC } from 'react';
-import { Outlet, useNavigate } from 'react-router-dom';
+import { Outlet, createSearchParams, useNavigate, useSearchParams } from 'react-router-dom';
 import { AppHeader } from '../../components/AppHeader';
 import { SearchContext } from '../../context/search';
 
 export const Component: FC = () => {
   const navigate = useNavigate();
-  const [search, setSearch] = useState('');
+  const [searchParams] = useSearchParams();
+  const [search, setSearch] = useState(searchParams.get('search') ?? '');
 
   return (
     <SearchContext.Provider value={search}>
       <AppHeader
         onChange={(value) => {
-          navigate('/');
+          navigate({
+            pathname: '/apps',
+            search: `?${createSearchParams({
+              search: value,
+            })}`,
+          });
           setSearch(value);
         }}
       />

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -2,6 +2,13 @@ import type { Config } from 'tailwindcss';
 
 export default {
   content: ['./src/**/*.{html,js,mjs,ts,tsx}'],
-  theme: {},
+  theme: {
+    extend: {
+      colors: {
+        secondary: '#29303d',
+        accent: '#1d202a',
+      },
+    },
+  },
   plugins: [],
 } satisfies Config;