SafeTurf UI Kit

A reusable UI component library built with React, TypeScript, and styled-components.

Installation

npm install safeturf-ui-kit styled-components

Usage

Basic Setup

First, wrap your application with the ThemeProvider:

import { ThemeProvider } from 'safeturf-ui-kit';

function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}

Custom Theming

You can customize the theme by passing a theme object to the ThemeProvider:

import { ThemeProvider } from 'safeturf-ui-kit';

const customTheme = {
  primary: '#3366ff',
  secondary: '#00cc99',
  borderRadius: '0.5rem',
};

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <YourApp />
    </ThemeProvider>
  );
}

Components

Card

A versatile card component for displaying content with a title, status badge, and optional task information.

import { Card, ReviewTask } from 'safeturf-ui-kit';

// Example tasks
const tasks: ReviewTask[] = [
  { label: 'Identity Check', sub_label: 'Verified', status: 'success' },
  { label: 'Credit Score', sub_label: '720', status: 'success' },
  { label: 'Background Check', sub_label: 'Minor issues found', status: 'warning' },
];

// Basic usage
function MyComponent() {
  return (
    <Card 
      title="Customer Information" 
      status="success"
      tasks={tasks}
      lastUpdated="2023-11-15T12:00:00Z"
    >
      <p>Content goes here...</p>
    </Card>
  );
}

Available Components

• Card: A container for displaying related content with a title and status
• TaskBadge: A status indicator with hover tooltip showing detailed task information

Development

Setup

git clone <repository-url>
cd safeturf-ui-kit
npm install

Building

npm run build

Development Mode

npm run dev

License

ISC