From ef0b02e2659310103c0772990f7e8f7fe77de63a Mon Sep 17 00:00:00 2001 From: Tyler Flowers Date: Mon, 4 Dec 2023 18:23:33 -0500 Subject: Make Slider + Card and add to index --- apps/website/src/components/base/Card.astro | 22 +++++++++++++ apps/website/src/components/base/Slider.astro | 38 ++++++++++++++++++++++ .../website/src/components/icons/impl/chatting.svg | 5 +++ .../src/components/icons/impl/damage-tint.svg | 17 ++++++++++ apps/website/src/pages/index.astro | 26 ++++++++++++++- apps/website/tailwind.config.ts | 4 +++ 6 files changed, 111 insertions(+), 1 deletion(-) create mode 100644 apps/website/src/components/base/Card.astro create mode 100644 apps/website/src/components/base/Slider.astro create mode 100644 apps/website/src/components/icons/impl/chatting.svg create mode 100644 apps/website/src/components/icons/impl/damage-tint.svg diff --git a/apps/website/src/components/base/Card.astro b/apps/website/src/components/base/Card.astro new file mode 100644 index 0000000..b3fbc00 --- /dev/null +++ b/apps/website/src/components/base/Card.astro @@ -0,0 +1,22 @@ +--- +import type { Icons } from '@components/icons/Icon.astro'; +import Icon from '@components/icons/Icon.astro'; +import type { HTMLAttributes } from 'astro/types'; + +interface Props extends HTMLAttributes<'div'> { + icon: Icons; + text?: string; +} + +const { + icon, + text = 'Hiiii', + ...rest +} = Astro.props; +--- + + +
+ +

{text}

+
diff --git a/apps/website/src/components/base/Slider.astro b/apps/website/src/components/base/Slider.astro new file mode 100644 index 0000000..f40b747 --- /dev/null +++ b/apps/website/src/components/base/Slider.astro @@ -0,0 +1,38 @@ +--- +import type { HTMLAttributes } from 'astro/types'; + +interface Props extends HTMLAttributes<'div'> { + dir?: string; + wrapperClass?: string; +} + +const { + dir = "left", + wrapperClass = "" +} = Astro.props; +--- + +
+ +
+ + + diff --git a/apps/website/src/components/icons/impl/chatting.svg b/apps/website/src/components/icons/impl/chatting.svg new file mode 100644 index 0000000..6ccac14 --- /dev/null +++ b/apps/website/src/components/icons/impl/chatting.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/website/src/components/icons/impl/damage-tint.svg b/apps/website/src/components/icons/impl/damage-tint.svg new file mode 100644 index 0000000..88ba6a7 --- /dev/null +++ b/apps/website/src/components/icons/impl/damage-tint.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro index 4df1c22..a758fd1 100644 --- a/apps/website/src/pages/index.astro +++ b/apps/website/src/pages/index.astro @@ -9,6 +9,8 @@ import Layout from '../layouts/Layout.astro'; import { Code } from 'astro:components'; +import Slider from '@components/base/Slider.astro'; +import Card from '@components/base/Card.astro'; --- @@ -107,7 +109,7 @@ import { Code } from 'astro:components'; -
+
With many fabulous mods
@@ -118,5 +120,27 @@ import { Code } from 'astro:components';
+ + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/website/tailwind.config.ts b/apps/website/tailwind.config.ts index fa26c99..011df25 100644 --- a/apps/website/tailwind.config.ts +++ b/apps/website/tailwind.config.ts @@ -21,6 +21,7 @@ const config: Config = { 'gray': { 50: 'rgba(240, 242, 244, 1)', 400: 'rgba(138, 150, 168, 1)', + 600: 'rgba(42, 44, 48, 1)', 700: 'rgba(65, 74, 88, 1)', 800: 'rgba(42, 47, 55, 1)', }, @@ -38,6 +39,9 @@ const config: Config = { }, // Other 'navy-peony': 'rgba(32, 55, 91, 1)', + 'primary': { + 600: 'rgba(20, 82, 204, 1)', + }, }, borderRadius: { 'none': '0', -- cgit