66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import React from 'react'
|
|
import { Card, CardBody, CardHeader, Col, Row } from 'reactstrap'
|
|
import { ICategoryModel } from '../../../models'
|
|
|
|
const Search = () => {
|
|
return <Card className="mb-4">
|
|
<CardHeader>Search</CardHeader>
|
|
<CardBody>
|
|
<div className="input-group">
|
|
<input className="form-control" type="text" placeholder="Enter search term..." aria-label="Enter search term..." aria-describedby="button-search" />
|
|
<button className="btn btn-primary" id="button-search" type="button">Go!</button>
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
}
|
|
|
|
export interface ICategories {
|
|
categories?: ICategoryModel []
|
|
}
|
|
|
|
const Categories = (props: ICategories) => {
|
|
const { categories } = props
|
|
|
|
if(!categories) {
|
|
return <></>
|
|
}
|
|
|
|
const middleIndex = Math.ceil(categories.length / 2)
|
|
|
|
const firstHalf = categories.splice(0, middleIndex)
|
|
const secondHalf = categories.splice(-middleIndex)
|
|
|
|
return <Card className="mb-4">
|
|
<CardHeader>Categories</CardHeader>
|
|
<CardBody>
|
|
<Row>
|
|
|
|
<Col sm="6">
|
|
<ul className="list-unstyled mb-0">
|
|
{firstHalf.map((item, index) => <li key={index}><a href="#!">{item.text}</a></li>)}
|
|
</ul>
|
|
</Col>
|
|
<Col sm="6">
|
|
<ul className="list-unstyled mb-0">
|
|
{secondHalf.map((item, index) => <li key={index}><a href="#!">{item.text}</a></li>)}
|
|
</ul>
|
|
</Col>
|
|
</Row>
|
|
</CardBody>
|
|
</Card>
|
|
}
|
|
|
|
const Empty = () => {
|
|
return <Card className="mb-4">
|
|
<CardHeader>Side Widget</CardHeader>
|
|
<CardBody>
|
|
You can put anything you want inside of these side widgets. They are easy to use, and feature the Bootstrap 5 card component!
|
|
</CardBody>
|
|
</Card>
|
|
}
|
|
|
|
export {
|
|
Search,
|
|
Categories,
|
|
Empty
|
|
} |