svrjs/svrjs-nextjs-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

contact page changes

Browse source
This commit is contained in:
Cypro Freelance 2024-07-28 16:22:13 +05:30
parent 7535227245
commit cacf80e1fc
7 changed files with 128 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/(root)/changelogs/[slug]/page.tsx
View file

@ -1,4 +1,5 @@
"use client";
import { Skeleton } from "@/components/ui/skeleton";
import React, { useEffect, useState } from "react";
import ReactMarkdown from "react-markdown";
@ -35,8 +36,16 @@ const Page = ({ params }: { params: { slug: string } }) => {
if (loading) {
return (
<section className="flex-center flex-col wrapper container">
<p className="text-lg">Loading...</p>
<section className="wrapper container py-24 md:py-28 gap-4 flex flex-col">
<div className="mb-3">
<Skeleton className="w-[400px] h-[50px] rounded-md" />
</div>
<div className="flex flex-col gap-4">
<Skeleton className="w-[300px] h-[30px] rounded-md" />
<Skeleton className="w-[200px] h-[20px] rounded-md" />
<Skeleton className="w-[200px] h-[20px] rounded-md" />
<Skeleton className="w-[200px] h-[20px] rounded-md" />
</div>
</section>
);
}

88
app/(root)/contact/page.tsx
View file

@ -9,7 +9,6 @@ import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
@ -19,6 +18,8 @@ import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { useToast } from "@/components/ui/use-toast";
import { useState } from "react";
import { Separator } from "@/components/ui/separator";
import { emails } from "@/constants";
const ContactUs = () => {
const { toast } = useToast();
@ -66,25 +67,23 @@ const ContactUs = () => {
});
setLoading(false);
}
console.log(values);
}
return (
<>
<div className="flex items-center justify-center py-16 md:py-24 w-full transition-all duration-300">
<h1 className="text-4xl md:text-6xl tracking-tight font-bold uppercase">
<div className="flex items-center justify-center py-12 md:py-16 w-full transition-all duration-300">
<h1 className="text-4xl md:text-6xl tracking-tight font-bold uppercase text-center text-gray-900 dark:text-white">
Contact Us
</h1>
</div>
<section id="contact" className="w-full">
<div className="flex max-md:flex-center flex-col md:flex-row justify-between mx-auto p-5 max-w-4xl">
<div className="flex-center flex-col md:flex-row justify-between mx-auto p-6 max-w-5xl">
{/* Left contact page */}
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-4 pb-8 mb-4 max-w-sm w-full"
className="space-y-4 pb-8 mb-8 max-w-lg w-full bg-accent border p-6 rounded-lg shadow-md"
>
<FormField
control={form.control}
@ -119,7 +118,11 @@ const ContactUs = () => {
<FormItem>
<FormLabel>Message</FormLabel>
<FormControl>
<Textarea placeholder="Your Message" {...field} />
<Textarea
className="h-44"
placeholder="Your Message"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
@ -128,11 +131,11 @@ const ContactUs = () => {
<Button
type="submit"
variant={"default"}
className="w-full"
className="w-full mt-2"
disabled={loading}
>
<div className="flex items-center justify-center">
<span className="tracking-tight font-[600px]">SEND</span>
<span className="tracking-tight font-semibold">SEND</span>
<Send className="ml-2 w-5 h-5" />
</div>
</Button>
@ -140,63 +143,32 @@ const ContactUs = () => {
</Form>
{/* Right contact page */}
<div className="max-w-xl mt-3 md:ml-5">
<ul className="ml-2 max-md:flex-center flex-col pr-5">
<li className="mb-2 text-[#aaa] flex items-center">
<WebhookIcon className="mr-2" size={24} />
<div className="max-w-lg mt-8 md:mt-0 md:ml-8 p-12 border rounded-lg">
<ul className="space-y-4 mb-6">
{emails.map((email, index) => (
<li
key={index}
className="text-gray-600 dark:text-gray-300 flex items-center"
>
<email.icon className="mr-2" size={24} />
<span>
<a
href="mailto:#"
title="Send me an email"
className="opacity-70 hover:opacity-100 transition duration-200"
href={email.url}
title={`Send an email to ${email.email}`}
className="text-muted-foreground hover:text-accent-foreground transition duration-200"
>
webmaster@svrjs.org
</a>
</span>
</li>
<li className="mb-2 text-[#aaa] flex items-center">
<Bug className="mr-2" size={24} />
<span>
<a
href="mailto:#"
title="Send me an email"
className="opacity-70 hover:opacity-100 transition duration-200"
>
bugreports@svrjs.org
</a>
</span>
</li>
<li className="mb-2 text-[#aaa] flex items-center">
<Shield className="mr-2" size={24} />
<span>
<a
href="mailto:#"
title="Send me an email"
className="opacity-70 hover:opacity-100 transition duration-200"
>
vulnerability-reports@svrjs.org
</a>
</span>
</li>
<li className="mb-2 text-[#aaa] flex items-center">
<Mail className="mr-2" size={24} />
<span>
<a
href="mailto:#"
title="Send me an email"
className="opacity-70 hover:opacity-100 transition duration-200"
>
support@svrjs.org
{email.email}
</a>
</span>
</li>
))}
</ul>
<hr className="border-t border-white opacity-60 my-4" />
<ul className="flex justify-center space-x-3 mb-6">
<Separator />
<ul className="flex justify-center space-x-3 my-6">
<Iconss />
</ul>
<hr className="border-t border-white opacity-60 my-4" />
<div className="text-center text-[#555] text-sm font-light">
<Separator />
<div className="text-center text-gray-500 mt-2 text-sm font-light">
© ALL RIGHTS RESERVED SVRJS
</div>
</div>

BIN
bun.lockb
View file

Binary file not shown.

31
components/ui/separator.tsx Normal file
View file

@ -0,0 +1,31 @@
"use client"
import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"
import { cn } from "@/lib/utils"
const Separator = React.forwardRef<
React.ElementRef<typeof SeparatorPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
(
{ className, orientation = "horizontal", decorative = true, ...props },
ref
) => (
<SeparatorPrimitive.Root
ref={ref}
decorative={decorative}
orientation={orientation}
className={cn(
"shrink-0 bg-border",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className
)}
{...props}
/>
)
)
Separator.displayName = SeparatorPrimitive.Root.displayName
export { Separator }

15
components/ui/skeleton.tsx Normal file
View file

@ -0,0 +1,15 @@
import { cn } from "@/lib/utils"
function Skeleton({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) {
return (
<div
className={cn("animate-pulse rounded-md bg-muted", className)}
{...props}
/>
)
}
export { Skeleton }

35
constants/index.tsx
View file

@ -1,4 +1,13 @@
import { BadgeAlert, BarChart4, Cog, File, ShieldCheck } from "lucide-react";
import {
BadgeAlert,
BarChart4,
Bug,
Cog,
File,
Mail,
ShieldCheck,
WebhookIcon,
} from "lucide-react";
import { Download, Home, Settings, User } from "lucide-react";
// Navbar
@ -195,3 +204,27 @@ export const AdminLinks = [
icon: Home,
},
];
// contact page emails
export const emails = [
{
icon: WebhookIcon,
email: "webmaster@svrjs.org",
url: "mailto:webmaster@svrjs.org",
},
{
icon: Bug,
email: "bugreports@svrjs.org",
url: "mailto:bugreports@svrjs.org",
},
{
icon: ShieldCheck,
email: "vulnerability-reports@svrjs.org",
url: "mailto:vulnerability-reports@svrjs.org",
},
{
icon: Mail,
email: "support@svrjs.org",
url: "mailto:support@svrjs.org",
},
];

1
package.json
View file

@ -16,6 +16,7 @@
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-navigation-menu": "^1.1.4",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-toast": "^1.2.1",
"@radix-ui/themes": "^3.0.5",