Card

import React from "react";
import { Card } from "shoto-ui";

function CardComponent() {
	return (
		<div>
			<Card
				type="hero"
				heading="Cyberpunk 2077"
				subtext="$70"
				description="kmsaksmal samsalsm"
				tags={["PC", "Xbox"]}
				actionBtnText="Pre Order"
				performAction={() => console.log("Pre order")}
				bgImage="./cyberpunk.jpg"
			/>
		</div>
	);
}

import React from "react";
import { Card } from "shoto-ui";

function CardComponent() {
	return (
		<div>
			<Card
				type="showcase"
				colorTag="#FF0099"
				colorRating="#FF9529"
				heading="Crysis Remastered"
				subtext="$70"
				tags={["PC", "Xbox", "PS5"]}
				badge="New Release"
				isLiked={true}
				onClickLike={() => console.log("heart clicked")}
				rating={4}
				bgImage="./crysis.jpg"
			/>
		</div>
	);
}

import React from "react";
import { CardCustom, CardContent, CardImage, Button } from "shoto-ui";

function CardComponent() {
	return (
		<CardCustom>
          <CardImage
            image="https://c4.wallpaperflare.com/wallpaper/39/346/426/digital-art-men-city-futuristic-night-hd-wallpaper-preview.jpg"
            title="Cyberpunk"
          />
        <CardContent>
          <div>
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                gap: "1rem",
                margin: "0.5rem 0 0 0",
              }}
            >
              <div>Cyberpunk 2077</div>
              <div>
                Cyberpunk is a subgenre of science fiction in a dystopian
                futuristic setting that tends to focus on a "combination of
                lowlife and high tech"
              </div>
              <Button>Perform Action</Button>
            </div>
          </div>
        </CardContent>
      </CardCustom>
);