Merge pull request #20 from T1xx1/v2

Better components UIs

components.json

@@ -4,14 +4,14 @@
    "rsc": false,
    "tsx": true,
    "tailwind": {
-      "config": "./src/shadcn/tailwind.congif.js",
-      "css": "./src/styles/index.scss",
+      "config": "./src/components/shadcn/tailwind.congif.js",
+      "css": "./src/styles/index.css",
       "baseColor": "slate",
       "cssVariables": false,
       "prefix": ""
    },
    "aliases": {
-      "components": "~/shadcn",
-      "utils": "~/shadcn/utils"
+      "components": "~/components/shadcn",
+      "utils": "~/components/shadcn/utils"
    }
 }

package.json

@@ -7,28 +7,27 @@
       "build": "astro check && astro build"
    },
    "devDependencies": {
-      "@astrojs/check": "^0.9.2",
+      "@astrojs/check": "^0.9.3",
       "@astrojs/react": "^3.6.2",
-      "@astrojs/svelte": "^5.7.0",
-      "@astrojs/tailwind": "^5.1.0",
-      "@astrojs/vercel": "^7.7.2",
+      "@astrojs/svelte": "^5.7.1",
+      "@astrojs/tailwind": "^5.1.1",
+      "@astrojs/vercel": "^7.8.1",
       "@radix-ui/react-slider": "^1.2.0",
       "@radix-ui/react-switch": "^1.1.0",
-      "@types/react": "^18.3.3",
+      "@types/react": "^18.3.8",
       "@types/react-dom": "^18.3.0",
-      "astro": "^4.14.2",
+      "astro": "^4.15.8",
       "class-variance-authority": "^0.7.0",
       "clsx": "^2.1.1",
-      "lucide-react": "^0.428.0",
+      "lucide-react": "^0.441.0",
       "react": "^18.3.1",
       "react-dom": "^18.3.1",
-      "sass": "^1.77.8",
       "sharp": "^0.33.5",
-      "svelte": "^4.2.18",
+      "svelte": "^4.2.19",
       "tailwind-merge": "^2.5.2",
-      "tailwindcss": "^3.4.10",
+      "tailwindcss": "^3.4.12",
       "tailwindcss-animate": "^1.0.7",
-      "tslib": "^2.6.3",
-      "typescript": "^5.5.4"
+      "tslib": "^2.7.0",
+      "typescript": "^5.6.2"
    }
 }

src/components/bg.astro

@@ -0,0 +1,11 @@
+---
+type Props = {
+   twBgColor: string;
+};
+
+const { twBgColor } = Astro.props;
+---
+
+<div class={`bg-opacity-50 rounded-xl p-5 h-full w-full flex items-center justify-center ${twBgColor}`}>
+   <slot />
+</div>

src/components/card.astro

@@ -0,0 +1,11 @@
+---
+type Props = {
+   styles?: string;
+};
+
+const { styles } = Astro.props;
+---
+
+<div class={`border-2 rounded-xl shadow ${styles}`}>
+   <slot />
+</div>

src/components/counter.astro

@@ -0,0 +1,23 @@
+---
+import Card from './card.astro';
+import H2 from './h2.astro';
+
+const { val } = Astro.props;
+---
+
+<Card styles="m-auto px-5 py-2 w-fit flex flex-col items-center">
+   <H2 styles="text-accent">UIs counter</H2>
+
+   <div class="text-accent font-semibold">{val} / 100</div>
+
+   <meter
+      max="100"
+      value={val}
+      class="h-10 w-[25rem]"></meter>
+</Card>
+
+<style>
+   meter::-webkit-meter-optimum-value {
+      @apply bg-accent;
+   }
+</style>

src/components/h2.astro

@@ -0,0 +1,11 @@
+---
+type Props = {
+   styles?: string;
+};
+
+const { styles } = Astro.props;
+---
+
+<h2 class={`text-4xl font-semibold ${styles}`}>
+   <slot />
+</h2>

src/components/h3.astro

@@ -0,0 +1,11 @@
+---
+type Props = {
+   styles?: string;
+};
+
+const { styles } = Astro.props;
+---
+
+<h3 class={`text-2xl font-semibold ${styles}`}>
+   <slot />
+</h3>

src/components/link.astro

@@ -0,0 +1,12 @@
+---
+type Props = {
+   url: string;
+   styles?: string;
+};
+
+const { url, styles = '' } = Astro.props;
+---
+
+<a href={url} class={`text-accent hover:underline ${styles}`}>
+   <slot />
+</a>

src/components/title.astro

@@ -0,0 +1,17 @@
+---
+import { Image } from 'astro:assets';
+
+import icon from '~/assets/icon.png';
+
+type Props = {
+   styles?: string;
+};
+
+const { styles = "" } = Astro.props;
+---
+
+<div class={`flex gap-2.5 items-center ${styles}`}>
+   <Image src={icon} alt="Icon" class="h-9 w-9" />
+
+   <div class="text-primary text-3xl font-semibold">100FrontendChallenge</div>
+</div>