Skip to content

Commit

Permalink
feat(web): show alert when testing mode on
Browse files Browse the repository at this point in the history
  • Loading branch information
mrevanzak committed May 26, 2024
1 parent 2dcd6c0 commit 45b864a
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 19 deletions.
53 changes: 35 additions & 18 deletions apps/web/src/app/(app)/@user/page.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import { Alert, AlertDescription, AlertTitle } from "@/components/alert";
import { get } from "@vercel/edge-config";

import {
Card,
CardContent,
Expand All @@ -7,24 +10,38 @@ import {
} from "@tanya.in/ui/card";
import { Chat } from "@tanya.in/ui/chat";

export default function HomePage() {
export default async function HomePage() {
const isTesting = await get("testing");

return (
<div className="flex-1 self-center">
<Card className="m-2 mx-auto w-full duration-500 transition-size has-[[data-started=false]]:min-[450px]:w-96">
<CardHeader>
<CardTitle className="text-center">Tanya.in saja!</CardTitle>
</CardHeader>
<CardContent>
<Chat />
</CardContent>
<CardFooter>
<Card className="m-auto shadow-none">
<CardContent className="py-4 text-center">
/: To choose the topic
</CardContent>
</Card>
</CardFooter>
</Card>
</div>
<>
{isTesting && (
<Alert className="absolute left-0 top-0 my-4 bg-warning text-warning-foreground">
<AlertTitle>Testing mode: ON</AlertTitle>
<AlertDescription>
Sorry, currently the site is in testing mode. Chat responses may not
be accurate.
</AlertDescription>
</Alert>
)}

<div className="flex-1 self-center">
<Card className="m-2 mx-auto w-full duration-500 transition-size has-[[data-started=false]]:min-[450px]:w-96">
<CardHeader>
<CardTitle className="text-center">Tanya.in saja!</CardTitle>
</CardHeader>
<CardContent>
<Chat />
</CardContent>
<CardFooter>
<Card className="m-auto shadow-none">
<CardContent className="py-4 text-center">
/: To choose the topic
</CardContent>
</Card>
</CardFooter>
</Card>
</div>
</>
);
}
2 changes: 1 addition & 1 deletion apps/web/src/app/(app)/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default async function AuthLayout(props: {
<div className="flex-1">
<Navbar />
<main
className={cn("container flex min-h-[calc(100vh-8rem)]", {
className={cn("container relative flex min-h-[calc(100vh-8rem)]", {
"p-4 2xl:pt-8": isAdmin,
})}
>
Expand Down
60 changes: 60 additions & 0 deletions apps/web/src/components/alert.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import type { VariantProps } from "class-variance-authority";
import * as React from "react";
import { cva } from "class-variance-authority";

import { cn } from "@tanya.in/ui";

const alertVariants = cva(
"relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
{
variants: {
variant: {
default: "bg-background text-foreground",
destructive:
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
},
},
defaultVariants: {
variant: "default",
},
},
);

const Alert = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
<div
ref={ref}
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props}
/>
));
Alert.displayName = "Alert";

const AlertTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h5
ref={ref}
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
{...props}
/>
));
AlertTitle.displayName = "AlertTitle";

const AlertDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("text-sm [&_p]:leading-relaxed", className)}
{...props}
/>
));
AlertDescription.displayName = "AlertDescription";

export { Alert, AlertTitle, AlertDescription };

0 comments on commit 45b864a

Please sign in to comment.