HStack

import { HStack } from '@vapor-ui/core';

export default function DefaultHStack() {
    return (
        <HStack gap="4">
            <div className="bg-blue-100 p-4 rounded">Item 1</div>
            <div className="bg-blue-100 p-4 rounded">Item 2</div>
            <div className="bg-blue-100 p-4 rounded">Item 3</div>
        </HStack>
    );
}

import { HStack } from '@vapor-ui/core';

export default function HStackReverse() {
    return (
        <div className="flex flex-wrap gap-2">
            <div>
                <h4 className="text-sm font-medium mb-2">Normal Stack</h4>
                <HStack gap="3">
                    <div className="bg-green-100 p-3 rounded text-center">First</div>
                    <div className="bg-green-200 p-3 rounded text-center">Second</div>
                    <div className="bg-green-300 p-3 rounded text-center">Third</div>
                </HStack>
            </div>

            <div>
                <h4 className="text-sm font-medium mb-2">Reverse Stack</h4>
                <HStack reverse gap="3">
                    <div className="bg-purple-100 p-3 rounded text-center">First</div>
                    <div className="bg-purple-200 p-3 rounded text-center">Second</div>
                    <div className="bg-purple-300 p-3 rounded text-center">Third</div>
                </HStack>
            </div>
        </div>
    );
}

import { HStack } from '@vapor-ui/core';

export default function HStackSpacing() {
    return (
        <div className="flex flex-wrap gap-2">
            <div>
                <h4 className="text-sm font-medium mb-2">Gap 100</h4>
                <HStack gap="$100">
                    <div className="bg-red-100 p-2 rounded text-sm">A</div>
                    <div className="bg-red-100 p-2 rounded text-sm">B</div>
                    <div className="bg-red-100 p-2 rounded text-sm">C</div>
                </HStack>
            </div>

            <div>
                <h4 className="text-sm font-medium mb-2">Gap 400</h4>
                <HStack gap="$400">
                    <div className="bg-orange-100 p-2 rounded text-sm">A</div>
                    <div className="bg-orange-100 p-2 rounded text-sm">B</div>
                    <div className="bg-orange-100 p-2 rounded text-sm">C</div>
                </HStack>
            </div>

            <div>
                <h4 className="text-sm font-medium mb-2">Gap 800</h4>
                <HStack gap="$800">
                    <div className="bg-teal-100 p-2 rounded text-sm">A</div>
                    <div className="bg-teal-100 p-2 rounded text-sm">B</div>
                    <div className="bg-teal-100 p-2 rounded text-sm">C</div>
                </HStack>
            </div>
        </div>
    );
}