gui/apps/starters/remix/app/routes/_index.tsx

import type { MetaFunction } from 'react-router'
import { styled, Text, type ThemeName, View } from '@hanzo/gui'
import { useState } from 'react'

export const meta: MetaFunction = () => {
  return [
    { title: 'Gui with Remix' },
    {
      name: 'description',
      content: 'A demo showcasing Gui working with Remix.',
    },
  ]
}

const Section = styled(View, {
  render: 'section',
  p: '$6',
  gap: '$6',
  $sm: {
    p: '$4',
  },
  $md: {
    p: '$6',
    maxW: 600,
  },
  $lg: {
    p: '$8',
  },
})

const ButtonOuter = styled(View, {
  render: 'button',
  bg: '$background',
  rounded: '$4',
  cursor: 'pointer',
  p: '$4',
  maxW: 'fit-content' as any,
  display: 'unset',
  pressStyle: {
    opacity: 0.8,
  },
  hoverStyle: {
    opacity: 0.9,
  },
})

const ButtonText = styled(Text, {
  fontWeight: 'bold',
  textAlign: 'center',
  render: 'span',
})

export default function Index() {
  const [theme, setTheme] = useState<ThemeName>('light')
  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light')
  }
  return (
    <View
      theme={theme}
      flexDirection="column"
      gap={16}
      bg="$background"
      minHeight="100vh"
    >
      <View
        render="header"
        padding="$6"
        borderBottomWidth={1}
        borderBottomColor="$borderColor"
      >
        <Text
          render="h1"
          fontSize={24}
          $lg={{
            fontSize: 32,
          }}
        >
          Welcome to Gui with Remix
        </Text>
      </View>
      <Section>
        <Text
          render="h2"
          fontSize={24}
          $lg={{
            fontSize: 32,
          }}
        >
          Introduction
        </Text>
        <Text>This is a demo page to showcase how Gui works seamlessly with Remix.</Text>
      </Section>
      <Section>
        <Text
          render="h2"
          fontSize={24}
          $lg={{
            fontSize: 32,
          }}
        >
          Features
        </Text>
        <Text>
          Gui provides a powerful and flexible way to style your React components. With
          Gui, you can leverage themes to create a consistent look and feel across your
          application. Theming in Gui is highly customizable, allowing you to define
          colors, spacing, typography, and more. You can easily switch between light and
          dark themes, or create your own custom themes to match your brand.
        </Text>
      </Section>
      <Section>
        <Text
          render="h2"
          fontSize={24}
          $lg={{
            fontSize: 32,
          }}
        >
          Works with themes
        </Text>
        <Text>
          Gui&apos;s styling system is designed to work with Remix out of the box.
          Server-render initial styles and themes.
        </Text>
        <ButtonOuter onPress={toggleTheme} theme="accent">
          <ButtonText>Toggle Theme</ButtonText>
        </ButtonOuter>
      </Section>
      <Section>
        <Text
          render="h2"
          fontSize={24}
          $lg={{
            fontSize: 32,
          }}
        >
          Go Native
        </Text>
        <Text>
          One of the standout features of Gui is its ability to seamlessly port your
          components to React Native. This means you can write your components once and
          run them on both web and mobile platforms. Gui&apos;s styling system is designed
          to work with React Native out of the box, so you can take advantage of native
          performance and capabilities without having to rewrite your components.
        </Text>
      </Section>
      <View
        render="footer"
        padding="$6"
        justifyContent="center"
        marginTop="auto"
        paddingTop={100}
      >
        <Text
          render="p"
          fontSize={16}
          $lg={{
            fontSize: '$3',
          }}
        >
          &copy; {new Date().getFullYear()} Gui with Remix.
        </Text>
      </View>
    </View>
  )
}