opdavies/bootstrap-with-tailwind
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add navbar and jumbotron markup

Browse source
This commit is contained in:
Oliver Davies 2023-01-09 09:21:55 +00:00
commit 192dcfebb4
13 changed files with 3853 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/Button.astro Normal file
View file

@ -0,0 +1,9 @@
---
interface Props {
text: string;
}
const { text } = Astro.props as Props;
---
<a href="#0">{text}</a>

13
src/components/Jumbotron.astro Normal file
View file

@ -0,0 +1,13 @@
---
interface Props {
title: string;
}
const { title } = Astro.props as Props;
---
<div>
<h1>{title}</h1>
<slot />
</div>

29
src/components/Navbar.astro Normal file
View file

@ -0,0 +1,29 @@
---
interface Props {
title: string;
}
const { title } = Astro.props as Props;
---
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="mr-2"
>
<path
d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
></path>
<circle cx="12" cy="13" r="4"></circle>
</svg>
<p>{title}</p>
</div>

1
src/env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="astro/client" />

31
src/pages/index.astro Normal file
View file

@ -0,0 +1,31 @@
---
import Button from "../components/Button.astro";
import Jumbotron from "../components/Jumbotron.astro";
import Navbar from "../components/Navbar.astro";
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<Navbar title="Album" />
<Jumbotron title="Album example">
<p>
Something short and leading about the collection below—its contents, the
creator, etc. Make it short and sweet, but not too short so folks don't
simply skip over it entirely.
</p>
<div>
<Button text="Main call to action" />
<Button text="Secondary action" />
</div>
</Jumbotron>
</body>
</html>