Hana Interface

import { useState } from "react";

import {
  Toolbar, ScrollView,
  Frame, Spacer,
  ZStack, VStack, HStack,
  Text, Symbol,
  Color, Material,
  Shape
} from "@hana-ui/react";

import {
  padding,
  background,
  clipShape,
} from "@hana-ui/react";

export function ContentView() {
  const [searchQuery, setSearchQuery] = useState("");

  return (
    <Frame maxWidth="infinity" minHeight="100vh">
      <Toolbar.Container placement="top">
        <Toolbar.Button label="Back" icon="chevron-left" />
        <Toolbar.Title label="Featured Component" variant="principal" />
        <Toolbar.Spacer />
        <Toolbar.Button label="Share" icon="share" />
        <Toolbar.Button label="More" icon="ellipsis" />
      </Toolbar.Container>

      <ScrollView>
        <VStack spacing={20} modifiers={[padding(20)]}>
          {/* Hero Card with Vibrant Fill & Frosted Glass */}
          <ZStack alignment="bottomLeading">
            <Frame width="100%" height={220}>
              <VStack
                modifiers={[
                  background(Color.purple),
                  clipShape(Shape.rect(20)),
                ]}
              />
            </Frame>
            <VStack
              spacing={8}
              modifiers={[
                background(Material.regular()),
                padding(16),
                clipShape(Shape.rect(16)),
              ]}
            >
              <HStack alignment="center" spacing={8}>
                <Symbol icon="square-pen" scale="medium" />
                <Text variant="caption1" foregroundStyle="secondaryLabel">
                  SWIFTUI TO WEB
                </Text>
              </HStack>
              <Text variant="title2" emphasized>
                Hana Interface Primitives
              </Text>
            </VStack>
          </ZStack>

          {/* Section Details */}
          <HStack alignment="center">
            <VStack alignment="leading" spacing={4}>
              <Text variant="headline">Native Apple Feel</Text>
              <Text variant="subheadline" foregroundStyle="secondaryLabel">
                Declarative stacks, design tokens, and materials
              </Text>
            </VStack>
            <Spacer />
            <Symbol icon="settings" scale="medium" foregroundStyle="secondaryLabel" />
          </HStack>

          {/* Quick Actions Search Bar */}
          <HStack
            spacing={12}
            modifiers={[
              background(Color.systemGray6),
              padding(14),
              clipShape(Shape.rect(14)),
            ]}
          >
            <Symbol icon="search" scale="medium" foregroundStyle="secondaryLabel" />
            <Text variant="callout" foregroundStyle="secondaryLabel">
              Explore primitives, stacks, tokens...
            </Text>
            <Spacer />
            <Symbol icon="plus" scale="medium" foregroundStyle="blue" />
          </HStack>
        </VStack>
      </ScrollView>
    </Frame>
  );
}