import React from "react";
import { HStack, VStack, View, style } from "tile-css";

export function UserCard(props: {}) {
  return (
    <Container>
      <ProfilePhoto src="https://cldup.com/JuBBlQRbI1.jpg" />
      <User>
        <h1>Azer Koçulu</h1>
        Founder of Sway and Ray Labs.
      </User>
    </Container>
  );
}

const Container = HStack() // Horizontal stack
  .size(350)
  .space({ gap: 20, inner: 16, outer: 24 })
  .border(10, { color: "#eee" })
  .round(18, { rightBottom: 0 }) // disable round for right bottom
  .align({ y: "center" })
  .element();

const ProfilePhoto = View("img")
  .size(100, 100)
  .round("100%")
  .shadow()
  .element();

const User = VStack()
  .fg("#666")
  .sans(16, { leading: 1.25 })
  .select(
    "h1",
    style().margin(0).fg("#222").text(28, { weight: 700, tracking: -2 })
  )
  .element();

import { Frame, style } from 'tile-css';

const TestBox = Vstack("90vw", "90vh") // Vertically ordered items
  .align({ x: "center", y: "end" }) // align content to bottom center
  .scale(2.5) // Apply `scale` transform
  .border(10, { color: "blue" })
  .round(5) // Round by 5px
  .text(24) // font-size: 24px
  .mobile(style().padding(0)) // Set `padding` to 0, if user is on mobile
  .element();

export const App = () => {
  return (
    <TestBox>
      <div>Hello</div>
      <div>World</div>
    </TestBox>
  );
};

import { View } from "tile-css"

const Container = View('100%', '100vh')
  .align({ x: 'center', y: 'end' }) // align contents to bottom center
  .element();

export const AppLayout = () => (
  <ResponsiveLayout>
    <Header />
    <MainContent />
    <Footer />
  </ResponsiveLayout>
);

import { View } from "tile-css"

const SquareElement = View()
  .aspect(1)
  .bg("red")
  .element();

export const SquareDemo = () => (<SquareElement />)

import { View } from "tile-css"

const FrostedGlassCard = View(300, 200)
  .backdrop({
    blur: 10,
    saturate: "180%",
    brightness: "105%"
  })
  .bg('rgba(255, 255, 255, 0.2)')
  .border(1, { color: 'rgba(255, 255, 255, 0.3)' })
  .round(15)
  .padding(20)
  .element();

export const GlassCard = ({ children }) => (
  <FrostedGlassCard>{children}</FrostedGlassCard>
);

import { View } from "tile-css"

const ResponsiveCard = View()
  .box({
    display: 'flex',
    flexDir: 'column',
    justify: 'center',
    items: 'center',

  })
  .element();

export const Card = ({ children }) => (
  <ResponsiveCard>{children}</ResponsiveCard>
);

import { View } from "tile-css"

const KittenButton = View('button')
  .fg("#ff0")
  .bg({
    url: 'https://placekitten.com/100x100.jpg',
    size: 'cover'
  })
  .element();

export const FancyButton = ({ children }) => (
  <KittenButton>{children}</KittenButton>
);

import { View, Cursor } from "tile-css"

const InteractiveElement = View()
  .size(100)
  .bg('lightblue')
  .cursor(Cursor.Pointer)
  .element();

export const CursorDemo = () => <InteractiveElement />;

import { View } from "tile-css"

const ResponsiveSquare = View()
  .size(600, 300) // width: 600px, height: 300px
  .bg('lightblue')
  .element();

export const SquareDemo = () => <ResponsiveSquare />;

import { View } from "tile-css"

const SpacedCard = View()
  .size(200)
  .padding({ x: 20, y: 15 }) // left, right: 20px -- top, bottom: 15px
  .margin(10, { right: 0 }) // 10px around, except right
  .element();

export const CardWithSpacing = ({ children }) => (
  <SpacedCard>{children}</SpacedCard>
);