niklas/niklas-birk.de
1
0
Fork 0
Code 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
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) {
return (
<Card isPressable>
<Card.Header css={{ position: "absolute", zIndex: 1, top: 5}}>
<Card isPressable isHoverable onClick={() => window.open(props.url)}>
<Card.Header css={{ position: "absolute", zIndex: 1, top: 5 }}>
<Col>
<Text size={12} weight="bold" transform="uppercase">
<Text color='$draculaCyan' size={12} weight="bold" transform="uppercase">
{props.introText}
</Text>
<Text h3>
<Text color='$draculaCyan' h3>
{props.serviceText}
</Text>
<Text size={12} weight="bold" transform="uppercase">
<Text color='$draculaCyan' size={12} weight="bold" transform="uppercase">
{props.vendorText}
</Text>
</Col>
</Card.Header>
<Card.Body css={{ p: 0 }}>
<Card.Body>
<Card.Image
src={props.logo}
// width="50%"
// height="50%"
objectFit="fill"
alt="Card example background"
/>
</Card.Body>
{/*<Card.Footer*/}
{/* isBlurred*/}
{/* css={{*/}
{/* position: "absolute",*/}
{/* bgBlur: "$draculaCurrentLine",*/}
{/* borderTop: "$borderWeights$light solid rgba(255, 255, 255, 0.2)",*/}
{/* bottom: 0,*/}
{/* zIndex: 1,*/}
{/* }}>*/}
{/* <Row justify="center">*/}
{/* <Button flat auto rounded color="primary">*/}
{/* <Text*/}
{/* css={{*/}
{/* color: "inherit"*/}
{/* }}*/}
{/* size={12}*/}
{/* weight="bold"*/}
{/* transform="uppercase">*/}
{/* Zu den Repositories*/}
{/* </Text>*/}
{/* </Button>*/}
{/* </Row>*/}
{/*</Card.Footer>*/}
<Card.Footer
isBlurred
css={{
position: "absolute",
bgBlur: "$draculaCurrentLineAlpha",
borderTop: "$borderWeights$light solid rgba(248, 248, 248, 0.5)",
bottom: 0,
zIndex: 1
}}>
<Row justify="center">
<Button auto rounded color="primary" onClick={() => window.open(props.url)}>
<Text
css={{
color: "inherit"
}}
size={12}
weight="bold"
transform="uppercase">
{props.buttonText}
</Text>
</Button>
</Row>
</Card.Footer>
</Card>
// <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() {
return (
<Grid.Container gap={2} justify="center">
<Grid xs={3}>
<Grid>
<ServiceCard
introText="Meine self-hosted"
serviceText="git Repositories"
vendorText="mit Gitea"
logo={gitLogo} />
logo={gitLogo}
buttonText="Zu den Repositories"
url='https://git.niklas-birk.de' />
</Grid>
<Grid xs={3}>
<Grid>
<ServiceCard
introText="Mein self-hosted"
serviceText="Blog"
vendorText="über Mathematik"
logo={blogLogo} />
logo={blogLogo}
buttonText="Zum Blog"
url='https://blog.niklas-birk.de' />
</Grid>
</Grid.Container>