niklas/niklas-birk.de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add actions to cards (and button) and two more props

Browse Source
This commit is contained in:
Niklas Birk 2022-09-17 15:52:52 +02:00
parent 38467a8bc2
commit b651fb7a91
2 changed files with 38 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/ServiceCard.js
View File

@ -1,53 +1,51 @@
import {Card, Col, Text} from "@nextui-org/react"; import {Button, Card, Col, Row, Text} from "@nextui-org/react";
function ServiceCard(props) { function ServiceCard(props) {
return ( return (
<Card isPressable> <Card isPressable isHoverable onClick={() => window.open(props.url)}>
<Card.Header css={{ position: "absolute", zIndex: 1, top: 5}}> <Card.Header css={{ position: "absolute", zIndex: 1, top: 5 }}>
<Col> <Col>
<Text size={12} weight="bold" transform="uppercase"> <Text color='$draculaCyan' size={12} weight="bold" transform="uppercase">
{props.introText} {props.introText}
</Text> </Text>
<Text h3> <Text color='$draculaCyan' h3>
{props.serviceText} {props.serviceText}
</Text> </Text>
<Text size={12} weight="bold" transform="uppercase"> <Text color='$draculaCyan' size={12} weight="bold" transform="uppercase">
{props.vendorText} {props.vendorText}
</Text> </Text>
</Col> </Col>
</Card.Header> </Card.Header>
<Card.Body css={{ p: 0 }}> <Card.Body>
<Card.Image <Card.Image
src={props.logo} src={props.logo}
// width="50%"
// height="50%"
objectFit="fill" objectFit="fill"
alt="Card example background" alt="Card example background"
/> />
</Card.Body> </Card.Body>
{/*<Card.Footer*/} <Card.Footer
{/* isBlurred*/} isBlurred
{/* css={{*/} css={{
{/* position: "absolute",*/} position: "absolute",
{/* bgBlur: "$draculaCurrentLine",*/} bgBlur: "$draculaCurrentLineAlpha",
{/* borderTop: "$borderWeights$light solid rgba(255, 255, 255, 0.2)",*/} borderTop: "$borderWeights$light solid rgba(248, 248, 248, 0.5)",
{/* bottom: 0,*/} bottom: 0,
{/* zIndex: 1,*/} zIndex: 1
{/* }}>*/} }}>
{/* <Row justify="center">*/} <Row justify="center">
{/* <Button flat auto rounded color="primary">*/} <Button auto rounded color="primary" onClick={() => window.open(props.url)}>
{/* <Text*/} <Text
{/* css={{*/} css={{
{/* color: "inherit"*/} color: "inherit"
{/* }}*/} }}
{/* size={12}*/} size={12}
{/* weight="bold"*/} weight="bold"
{/* transform="uppercase">*/} transform="uppercase">
{/* Zu den Repositories*/} {props.buttonText}
{/* </Text>*/} </Text>
{/* </Button>*/} </Button>
{/* </Row>*/} </Row>
{/*</Card.Footer>*/} </Card.Footer>
</Card> </Card>
// <div id="niklas-birk-root"> // <div id="niklas-birk-root">

12
src/components/Services.js
View File

@ -6,19 +6,23 @@ import blogLogo from "../assets/blog_logo.png";
function Services() { function Services() {
return ( return (
<Grid.Container gap={2} justify="center"> <Grid.Container gap={2} justify="center">
<Grid xs={3}> <Grid>
<ServiceCard <ServiceCard
introText="Meine self-hosted" introText="Meine self-hosted"
serviceText="git Repositories" serviceText="git Repositories"
vendorText="mit Gitea" vendorText="mit Gitea"
logo={gitLogo} /> logo={gitLogo}
buttonText="Zu den Repositories"
url='https://git.niklas-birk.de' />
</Grid> </Grid>
<Grid xs={3}> <Grid>
<ServiceCard <ServiceCard
introText="Mein self-hosted" introText="Mein self-hosted"
serviceText="Blog" serviceText="Blog"
vendorText="über Mathematik" vendorText="über Mathematik"
logo={blogLogo} /> logo={blogLogo}
buttonText="Zum Blog"
url='https://blog.niklas-birk.de' />
</Grid> </Grid>
</Grid.Container> </Grid.Container>