reactstrap#CardText TypeScript Examples
The following examples show how to use
reactstrap#CardText.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Home.tsx From reference-merchant with Apache License 2.0 | 5 votes |
|
function Home(props) {
const { t } = useTranslation("layout");
const [selectedProduct, setSelectedProduct] = useState<Product>();
const [products, setProducts] = useState<Product[] | undefined>();
const [demoMode, setDemoMode] = useState<boolean>(props.demoMode === undefined ? false : true);
const getProducts = async () => {
try {
setProducts(await new BackendClient().getProductsList());
} catch (e) {
console.error(e);
}
};
useEffect(() => {
//noinspection JSIgnoredPromiseFromCall
getProducts();
}, []);
return (
<>
<TestnetWarning />
<Container>
<h1 className="text-center font-weight-bold mt-5">{t("name")}</h1>
<section className="mt-5">
{products && (
<Row>
{products.map((product, i) => (
<Col key={product.gtin} md={6} lg={4}>
<Card key={product.gtin} className="mb-4">
<CardImg top src={product.image_url} />
<CardBody>
<CardTitle className="font-weight-bold h5">{product.name}</CardTitle>
<CardText>{product.description}</CardText>
</CardBody>
<CardFooter>
<Row>
<Col>
<div>
<strong>Price:</strong> {product.price / 1000000} {product.currency}
</div>
</Col>
<Col lg={4} className="text-right">
<Button
color="secondary"
block
className="btn-sm"
onClick={() => setSelectedProduct(products[i])}
>
Buy Now
</Button>
</Col>
</Row>
</CardFooter>
</Card>
</Col>
))}
</Row>
)}
{!products && <ProductsLoader />}
</section>
</Container>
<Payment
demoMode={demoMode}
product={selectedProduct}
isOpen={!!selectedProduct}
onClose={() => setSelectedProduct(undefined)}
/>
</>
);
}
Example #2
| Source File: DataVisualization.tsx From TutorBase with MIT License | 4 votes |
|
DataVisualization = () => {
const [dropdownLabel2, setDropdownLabel2] = useState("All Time");
const [dropdownOpen, setDropdownOpen] = useState(false);
const [dropdownOpen2, setDropdownOpen2] = useState(false);
const [dropdownOpen3, setDropdownOpen3] = useState(false);
const [dateRange, setDateRange] = useState(new Date(2020,0,0));
const [course, setCourse] = useState("All Courses");
const [courses, setCourses] = useState(new Array<string>());
const [appointments, setAppointments] = useState(0);
const [hours, setHours] = useState(0);
const [earnings, setEarnings] = useState(0);
const [chart, setChart] = useState(0);
const [meetingsMap, setMeetingsMap] = useState(new Map<number,number>());
const [earningsMap, setEarningsMap] = useState(new Map<number,number>());
const toggle = () => setDropdownOpen(prevState => !prevState);
const toggle2 = () => setDropdownOpen2(prevState => !prevState);
const toggle3 = () => setDropdownOpen3(prevState => !prevState);
let tutor = useSelector(selectClientData);
let tutorID = tutor.clientId;
useEffect(() => {
GetTutoringHours(course, tutorID).then( apiResult => {
setMeetingsMap(apiResult[0]);
setEarningsMap(apiResult[1]);
setAppointments(apiResult[3]);
setHours(apiResult[2]);
setEarnings(apiResult[4]);
setCourses(apiResult[5]);
});
},[]);
let coursesDropdowns:Array<ReactElement> = [];
coursesDropdowns.push(<DropdownItem onClick={() => {
setCourse("All Courses");
GetTutoringHours("All Courses", tutorID).then( apiResult => {
setMeetingsMap(apiResult[0]);
setEarningsMap(apiResult[1]);
setAppointments(apiResult[3]);
setHours(apiResult[2]);
setEarnings(apiResult[4]);
setCourses(apiResult[5]);
});
}}>
All Courses
</DropdownItem>);
for (let i = 0; i < courses.length; i++) {
coursesDropdowns.push(<DropdownItem onClick={() => {
setCourse(courses[i]);
GetTutoringHours(courses[i], tutorID).then( apiResult => {
setMeetingsMap(apiResult[0]);
setEarningsMap(apiResult[1]);
setAppointments(apiResult[3]);
setHours(apiResult[2]);
setEarnings(apiResult[4]);
setCourses(apiResult[5]);
});
}}>
{courses[i]}
</DropdownItem>);
}
return (
<Container fluid className="background" style={{marginBottom:'10em'}}>
<hr></hr>
<Row xs="2" className="parent">
</Row>
<div style={{display:'flex', flexDirection:'row', flexWrap:'wrap'}}>
<div style={{display:'flex', flexDirection:'column', flex:'1 1 0px', flexWrap:'wrap'}}>
<Card body>
<CardTitle tag="h5">Appointments</CardTitle>
<CardText>
<h1>
<CountUp
end={appointments}
useEasing={true}
duration={3.5}
/>
</h1>
</CardText>
</Card>
</div>
<div style={{display:'flex', flexDirection:'column', flex:'1 1 0px', flexWrap:'wrap'}}>
<Card body>
<CardTitle tag="h5">Hours Tutored</CardTitle>
<CardText>
<h1>
<CountUp
end={hours}
useEasing={true}
duration={4}
/>
</h1>
</CardText>
</Card>
</div>
<div style={{display:'flex', flexDirection:'column', flex:'1 1 0px', flexWrap:'wrap'}}>
<Card body>
<CardTitle tag="h5">Earnings</CardTitle>
<CardText>
<h1>
<CountUp
decimals={2}
prefix="$"
end={earnings}
useEasing={true}
duration={4}/>
</h1>
</CardText>
</Card>
</div>
</div>
<div style={{display:'flex', flexDirection:'row'}}>
<Card body>
<CardTitle tag="h5">
<div style={{display:'flex', flexDirection:'row', flexWrap:'wrap'}}>
<div style={{display:'flex', flexDirection:'column', marginRight:'1em', marginTop:'0.25em'}}>
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle caret>
{(chart === 0) ? "Calendar" : (chart === 1 ? "Total Hours" : "Total Earnings")}
<FontAwesomeIcon icon={faArrowDown} style={{marginLeft:'1em'}}/>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Tutor Data</DropdownItem>
<DropdownItem onClick={() => setChart(0)}>Calendar</DropdownItem>
<DropdownItem onClick={() => setChart(1)}>Total Hours</DropdownItem>
<DropdownItem divider />
<DropdownItem onClick={() => setChart(2)}>Total Earnings</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
{ chart != 0 ?
<div style={{display:'flex', flexDirection:'column', marginRight:'1em', marginTop:'0.25em'}}>
<Dropdown isOpen={dropdownOpen2} toggle={toggle2} style={{alignSelf:'right'}}>
<DropdownToggle caret>
{dropdownLabel2}
<FontAwesomeIcon icon={faArrowDown} style={{marginLeft:'1em'}}/>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Date Range</DropdownItem>
<DropdownItem onClick={() => {
let date = new Date(getNow());
date.setFullYear(2020);
date.setMonth(0);
date.setDate(0);
setDateRange(date);
setDropdownLabel2("All Time");
}}>
All Time
</DropdownItem>
<DropdownItem onClick={() => {
let date = new Date(getNow());
date.setFullYear(date.getFullYear() - 1);
setDateRange(date);
setDropdownLabel2("1Y");
}}>1Y
</DropdownItem>
<DropdownItem onClick={() => {
let date = new Date(getNow());
date.setMonth(date.getMonth() - 6);
setDateRange(date);
setDropdownLabel2("6M");
}}>6M
</DropdownItem>
<DropdownItem onClick={() => {
let date = new Date(getNow());
date.setMonth(date.getMonth() - 1);
setDateRange(date);
setDropdownLabel2("1M");
}}>1M
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
: <div></div>}
<div style={{display:'flex', flexDirection:'column', marginTop:'0.25em'}}>
<Dropdown isOpen={dropdownOpen3} toggle={toggle3} style={{alignSelf:'right'}}>
<DropdownToggle caret>
{course}
<FontAwesomeIcon icon={faArrowDown} style={{marginLeft:'1em'}}/>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Filter by Course</DropdownItem>
{coursesDropdowns}
</DropdownMenu>
</Dropdown>
</div>
</div>
</CardTitle>
<CardText>
{chart == 0 ?
<TutorHeatmap dateMap={meetingsMap} />
: (chart == 1 ? <LineGraph dateMap={meetingsMap}
fromTime={dateRange}
isHours={true}/>
:<LineGraph dateMap={earningsMap}
fromTime={dateRange}
isHours={false}/>
)}
</CardText>
</Card>
</div>
</Container>
);
}
