"use client";

import React from "react";
import {
  Avatar,
  Button,
  Card,
  CardBody,
  CardFooter,
  CardHeader,
  type CardProps,
} from "@nextui-org/react";

import {AcmeIcon} from "./acme";

export default function Component(props: CardProps) {
  return (
    <Card
      className="overflow-none relative w-[420px] border-small border-foreground/10 bg-[url('https://nextuipro.nyc3.cdn.digitaloceanspaces.com/components-images/abstract-dark-bg4.jpg')] bg-right-bottom"
      {...props}
    >
      <CardHeader>
        <div className="flex items-center gap-3">
          <Avatar
            className="border-small border-white/20 bg-transparent"
            icon={<AcmeIcon className="text-white" />}
          />
          <p className="text-large font-medium text-white">Acme Event</p>
        </div>
      </CardHeader>
      <CardBody className="px-3">
        <div className="flex flex-col gap-2 px-2">
          <p className="text-large font-medium text-white/80">Learn from the best</p>
          <p className="text-small text-white/60">
            Unlock the full power of Acme! Gain expertise and insights from top organizations
            through guided tutorials, boosting productivity, enhancing security, and enabling
            seamless collaboration.
          </p>
        </div>
      </CardBody>
      <CardFooter className="justify-end gap-2">
        <Button fullWidth className="border-small border-white/20 bg-white/10 text-white">
          Get tickets now
        </Button>
      </CardFooter>
    </Card>
  );
}

import React from "react";

import ActionCard from "./action-card";

export default function Component() {
  return (
    <div className="flex max-w-sm flex-col gap-3">
      <ActionCard
        description="Create a new Direct Employee Agreement template."
        icon="solar:document-medicine-linear"
        title="Create a new agreement"
      />
      <ActionCard
        description="Edit the Direct Employee Agreement template."
        icon="solar:document-add-linear"
        title="Edit agreement"
      />
      <ActionCard
        description="Verify your identity to access all features."
        icon="solar:shield-check-linear"
        title="Verify identity"
      />
      <ActionCard
        description="Add a new payment method to your account."
        icon="solar:card-linear"
        title="Add payment method"
      />
      <ActionCard
        color="warning"
        description="Deactivate the employee agreement."
        icon="solar:user-block-rounded-linear"
        title="Set to inactive"
      />
      <ActionCard
        color="danger"
        description="Delete the employee agreement."
        icon="solar:trash-bin-minimalistic-linear"
        title="Delete agreement"
      />
    </div>
  );
}

"use client";

import type {CardProps} from "@nextui-org/react";

import React from "react";
import {
  Card,
  CardHeader,
  CardBody,
  Button,
  Input,
  CardFooter,
  Spacer,
  Divider,
} from "@nextui-org/react";

export default function Component(props: CardProps) {
  const [orgName, setOrgName] = React.useState<string>("NextUI");

  return (
    <Card className="w-full max-w-[500px]" {...props}>
      <CardHeader className="px-6 pb-0 pt-6">
        <div className="flex flex-col items-start">
          <h4 className="text-large">Organization Name</h4>
          <p className="text-small text-default-500">
            This is your organization visible name to the public.
          </p>
        </div>
      </CardHeader>
      <Spacer y={2} />
      <CardBody className="px-4">
        <Input
          isClearable
          label="Organization Name"
          maxLength={50}
          value={orgName}
          onValueChange={setOrgName}
        />
      </CardBody>
      <Spacer y={2} />
      <Divider />
      <CardFooter className="flex-wrap-reverse justify-between gap-2 px-4 md:flex-wrap">
        <p className="text-small text-default-400">
          Max. 50 characters. <span className="text-default-500">{orgName.length}/50</span>
        </p>
        <div className="flex items-center gap-2">
          <Button variant="bordered">Cancel</Button>
          <Button color="primary">Save Changes</Button>
        </div>
      </CardFooter>
    </Card>
  );
}

"use client";

import type {CardProps} from "@nextui-org/react";

import React from "react";
import {Button, Card, Image, CardBody} from "@nextui-org/react";
import {Icon} from "@iconify/react";

export default function Component(props: CardProps) {
  return (
    <Card className="w-full max-w-[520px]" {...props}>
      <Button
        isIconOnly
        className="absolute right-2 top-2 z-20"
        radius="full"
        size="sm"
        variant="light"
      >
        <Icon className="text-default-400" icon="iconamoon:close-thin" width={24} />
      </Button>
      <CardBody className="flex flex-row flex-wrap p-0 sm:flex-nowrap">
        <Image
          removeWrapper
          alt="Acme Creators"
          className="h-auto w-full flex-none object-cover object-top md:w-48"
          src="https://nextuipro.nyc3.cdn.digitaloceanspaces.com/components-images/hero-card-complete.jpeg"
        />
        <div className="px-4 py-5">
          <h3 className="text-large font-medium">Become an Acme Creator!</h3>
          <div className="flex flex-col gap-3 pt-2 text-small text-default-400">
            <p>
              Visit creators.acme.com to sign up today and start earning credits from your fans and
              followers.
            </p>
            <p>Acme supports YouTube, Twitch, Vimeo and more!</p>
          </div>
        </div>
      </CardBody>
    </Card>
  );
}