Skip to content

Commit b9460b6

Browse files
ariflogsariflogs
authored
Merge pull request #24 from Logging-Stuff/alart
Alart
2 parents 062eccd + 617e29c commit b9460b6

File tree

14 files changed

+244
-20
lines changed

14 files changed

+244
-20
lines changed

‎app/(docs)/docs/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default function ComponentLayout({
1515
<div className="hidden lg:block">
1616
<SideNav />
1717
</div>
18-
<div className="lg:ml-72 mt-16">{children}</div>
18+
<div className="lg:ml-72 mt-16 px-4 lg:px-0">{children}</div>
1919
</div>
2020
);
2121
}

‎app/(sink)/demo/components/page.tsx‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import {
44
Accordion,
5+
Alert,
56
Avatar,
67
Badge,
78
Button,
@@ -12,6 +13,7 @@ import {
1213
TabsTriggerList,
1314
} from "@/packages/ui";
1415
import { Card } from "@/packages/ui/Cards/Card";
16+
import { Check, CheckCircle, CheckCircle2 } from "lucide-react";
1517
import React from "react";
1618

1719
export default function page() {
@@ -76,12 +78,28 @@ export default function page() {
7678
<Card.Description>Card Description</Card.Description>
7779
</Card.Header>
7880
</Card>
79-
<Accordion type="single" collapsible>
80-
<Accordion.Item value="item-1">
81-
<Accordion.Header>Head...</Accordion.Header>
82-
<Accordion.Content>Content...</Accordion.Content>
83-
</Accordion.Item>
84-
</Accordion>
81+
</div>
82+
83+
<div className="space-y-6">
84+
<Alert>
85+
<Alert.Title>Heads up!</Alert.Title>
86+
<Alert.Description>
87+
You can add components to your app using the cli.
88+
</Alert.Description>
89+
</Alert>
90+
91+
<Alert variant="solid">
92+
<Alert.Title>Heads up!</Alert.Title>
93+
<Alert.Description>
94+
You can add components to your app using the cli.
95+
</Alert.Description>
96+
</Alert>
97+
<Alert variant="solid" className="flex items-center">
98+
<CheckCircle className="h-4 w-4 mr-4" />
99+
<div>
100+
<Alert.Title>Heads up!</Alert.Title>
101+
</div>
102+
</Alert>
85103
</div>
86104
</div>
87105
);

‎components/HamburgerMenu.tsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,29 @@ import { Button } from "@/packages/ui";
77

88
export default function HamburgerMenu() {
99
const [isOpen, setIsOpen] = useState(false);
10-
10+
1111
return (
1212
<div>
1313
<Button
1414
size="sm"
1515
variant="outline"
16+
className="p-2"
1617
onClick={() => setIsOpen((prev) => !prev)}
17-
className="z-50 absolute top-3 left-2 mb-3"
1818
>
19-
{isOpen ? <X /> : <AlignJustify />}
19+
{isOpen ? (
20+
<X className="h-4 w-4" />
21+
) : (
22+
<AlignJustify className="h-4 w-4" />
23+
)}
2024
</Button>
21-
25+
2226
{isOpen && (
23-
<div className="absolute top-0 z-30 w-full h-screen bg-black opacity-50" onClick={() => setIsOpen(false)} />
27+
<div
28+
className="absolute top-0 left-0 right-0 w-full h-screen bg-black opacity-50"
29+
onClick={() => setIsOpen(false)}
30+
/>
2431
)}
25-
32+
2633
{isOpen && (
2734
<div className="absolute top-0 left-0 z-40">
2835
<SideNav />

‎components/TopNav.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,7 @@ export default function TopNav() {
1111
<nav className="fixed top-0 h-16 left-0 right-0 w-full border-b-2 border-black bg-white">
1212
<div className="container max-w-6xl px-4 lg:px-0 mx-auto">
1313
<div className="flex justify-between items-center h-16">
14-
1514
{/* Logo Section */}
16-
17-
18-
<div className="flex items-center lg:hidden">
19-
<HamburgerMenu />
20-
</div>
2115
<div className="flex-shrink-0">
2216
<a
2317
href="/"
@@ -54,8 +48,10 @@ export default function TopNav() {
5448
rel="noopener noreferrer"
5549
>
5650
<GithubIcon />
57-
</Link>
51+
</Link>
52+
<HamburgerMenu />
5853
</div>
54+
5955
<div className="hidden lg:flex items-center">
6056
<Link
6157
href="https://github.com/Logging-Stuff/retroui"

‎config/components.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ export const componentConfig = {
66
name: "accordion",
77
filePath: "packages/ui/Accordions/Accordion.tsx",
88
},
9+
alert: {
10+
name: "alert",
11+
filePath: "packages/ui/Alerts/Alert.tsx",
12+
},
913
avatar: {
1014
name: "avatar",
1115
filePath: "packages/ui/Avatars/Avatar.tsx",
@@ -31,6 +35,28 @@ export const componentConfig = {
3135
() => import("@/preview/components/accordion-style-default")
3236
),
3337
},
38+
"alert-style-default": {
39+
name: "alert-style-default",
40+
filePath: "preview/components/alert-style-default.tsx",
41+
preview: lazy(() => import("@/preview/components/alert-style-default")),
42+
},
43+
"alert-style-solid": {
44+
name: "alert-style-solid",
45+
filePath: "preview/components/alert-style-solid.tsx",
46+
preview: lazy(() => import("@/preview/components/alert-style-solid")),
47+
},
48+
"alert-style-with-icon": {
49+
name: "alert-style-with-icon",
50+
filePath: "preview/components/alert-style-with-icon.tsx",
51+
preview: lazy(() => import("@/preview/components/alert-style-with-icon")),
52+
},
53+
"alert-style-all-status": {
54+
name: "alert-style-all-status",
55+
filePath: "preview/components/alert-style-all-status.tsx",
56+
preview: lazy(
57+
() => import("@/preview/components/alert-style-all-status")
58+
),
59+
},
3460
"avatar-style-circle": {
3561
name: "avatar-style-circle",
3662
filePath: "preview/components/avatar-style-circle.tsx",

‎config/navigation.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export const navConfig: INavigationConfig = {
1717
title: "Components",
1818
children: [
1919
{ title: "Accordion", href: `${componentsRoute}/accordion` },
20+
{ title: "Alert", href: `${componentsRoute}/alert` },
2021
{ title: "Avatar", href: `${componentsRoute}/avatar` },
2122
{ title: "Badge", href: `${componentsRoute}/badge` },
2223
{ title: "Button", href: `${componentsRoute}/button` },

‎content/docs/components/alert.mdx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
title: Alert
3+
description: Notify your users about important events and updates. 📣
4+
lastUpdated: 24 Oct, 2024
5+
---
6+
7+
<ComponentShowcase name="alert-style-default" />
8+
<br />
9+
<br />
10+
11+
## Installation
12+
13+
#### 1. Install dependencies:
14+
15+
```sh
16+
npm install class-variance-authority
17+
```
18+
19+
<br />
20+
21+
#### 2. Copy the code 👇 into your project:
22+
23+
<ComponentSource name="alert" />
24+
25+
<br />
26+
<br />
27+
28+
## Examples
29+
30+
### Default
31+
32+
<ComponentShowcase name="alert-style-default" />
33+
<br />
34+
<br />
35+
36+
### Solid
37+
38+
<ComponentShowcase name="alert-style-solid" />
39+
<br />
40+
<br />
41+
42+
### With Icon
43+
44+
<ComponentShowcase name="alert-style-with-icon" />
45+
<br />
46+
<br />
47+
48+
### Status
49+
50+
<ComponentShowcase name="alert-style-all-status" />

‎packages/ui/Alerts/Alert.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { HtmlHTMLAttributes } from "react";
2+
import { cva, type VariantProps } from "class-variance-authority";
3+
4+
import { cn } from "@/lib/utils";
5+
import { Text } from "../Text";
6+
7+
const alertVariants = cva("relative w-full border-2 border-black p-4", {
8+
variants: {
9+
variant: {
10+
default: "bg-primary-300 text-foreground",
11+
solid: "bg-black text-white",
12+
destructive:
13+
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14+
},
15+
status: {
16+
error: "bg-red-300 text-red-800 border-red-800",
17+
success: "bg-green-300 text-green-800 border-green-800",
18+
warning: "bg-yellow-300 text-yellow-800 border-yellow-800",
19+
info: "bg-blue-300 text-blue-800 border-blue-800",
20+
},
21+
},
22+
defaultVariants: {
23+
variant: "default",
24+
},
25+
});
26+
27+
interface IAlertProps
28+
extends HtmlHTMLAttributes<HTMLDivElement>,
29+
VariantProps<typeof alertVariants> {}
30+
31+
const Alert = ({ className, variant, status, ...props }: IAlertProps) => (
32+
<div
33+
role="alert"
34+
className={cn(alertVariants({ variant, status }), className)}
35+
{...props}
36+
/>
37+
);
38+
Alert.displayName = "Alert";
39+
40+
interface IAlertTitleProps extends HtmlHTMLAttributes<HTMLHeadingElement> {}
41+
const AlertTitle = ({ className, ...props }: IAlertTitleProps) => (
42+
<Text as="h5" className={cn(className)} {...props} />
43+
);
44+
AlertTitle.displayName = "AlertTitle";
45+
46+
interface IAlertDescriptionProps
47+
extends HtmlHTMLAttributes<HTMLParagraphElement> {}
48+
const AlertDescription = ({ className, ...props }: IAlertDescriptionProps) => (
49+
<div className={cn("text-muted", className)} {...props} />
50+
);
51+
52+
AlertDescription.displayName = "AlertDescription";
53+
54+
const AlertComponent = Object.assign(Alert, {
55+
Title: AlertTitle,
56+
Description: AlertDescription,
57+
});
58+
59+
export { AlertComponent as Alert };

‎packages/ui/Alerts/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./Alert";

‎packages/ui/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export * from "./Buttons";
22
export * from "./Form";
33
export * from "./Text";
44
export * from "./Accordions";
5+
export * from "./Alerts";
56
export * from "./Cards";
67
export * from "./Avatars";
78
export * from "./Badges";

0 commit comments

Comments
 (0)