import React from "react";
import {
  Button,
  FormControl,
  Link,
  Search,
  Select,
  Skeleton,
  Spinner,
  TextInput,
  Typography,
  Avatar,
  Card,
  Modal,
  Header,
} from "vinyl-component-blocks";

import React from "react";
import { Button, Card, Avatar } from "vinyl-component-blocks";

const DemoComponent = () => (
  <div>
    <Card backgroundColor="#f0f0f0" padding="20px">
      <Avatar imageSrc="https://example.com/avatar.jpg" />
      <h2>John Doe</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <Button type="primary" size="medium">
        Read More
      </Button>
    </Card>
  </div>
);

export default DemoComponent;

import React from "react";
import { Button, Card, Avatar, Header, Login } from "vinyl-component-blocks";

const DemoComponent = () => (
  <div>
    <Header
      user={{ name: "John Doe" }}
      onLogout={() => console.log("Logged out")}
    />
    <Card backgroundColor="#f0f0f0" padding="20px">
      <Avatar imageSrc="https://example.com/avatar.jpg" />
      <h2>John Doe</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <Button type="primary" size="medium">
        Read More
      </Button>
    </Card>
    <Login
      onLogin={() => console.log("Logged in")}
      onCreateAccount={() => console.log("Creating account")}
    />
  </div>
);

export default DemoComponent;

import React from "react";
import { TextInput } from "vinyl-component-blocks";

const CustomTextInput = () => (
  <TextInput
    className="custom-text-input"
    icon={YourIconComponent}
    size="large"
    disabled={false}
    error={false}
    value="Hello"
    onChange={(e) => console.log(e.target.value)}
    placeholder="Enter text here"
    width="200px"
    readonly={false}
    clearable={true}
  />
);

export default CustomTextInput;

import React from "react";
import { Header, Login } from "vinyl-component-blocks";

const HeaderWithLogin = () => (
  <div>
    <Header
      user={{ name: "John Doe" }}
      onLogout={() => console.log("Logged out")}
    />
    <Login
      onLogin={() => console.log("Logged in")}
      onCreateAccount={() => console.log("Creating account")}
    />
  </div>
);

export default HeaderWithLogin;

import React from "react";
import { Card } from "vinyl-component-blocks";
import "./custom-styles.css";

const CustomCard = () => (
  <Card
    backgroundColor="#f0f0f0"
    padding="20px"
    className="custom-card" // Custom CSS class for styling
  >
    <h2>This is a Custom Card</h2>
    <p>
      Stop reinventing the wheel! Our well-documented component library empowers
      you to concentrate on building unique features and functionalities.
    </p>
  </Card>
);

export default CustomCard;

import React from "react";
import { TextInput } from "vinyl-component-blocks";
import "./custom-styles.css";

const CustomTextInput = () => (
  <TextInput
    className="custom-text-input" // Custom CSS class for styling
    icon={YourIconComponent}
    size="large"
    disabled={false}
    error={false}
    value="Hello"
    onChange={(e) => console.log(e.target.value)}
    placeholder="Enter text here"
    width="200px"
    readonly={false}
    clearable={true}
  />
);

export default CustomTextInput;