joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #6 from Pratyay360/themetoggle

Browse Source 
customized shadcn's theme toggle
This commit is contained in:
mauro 🤙
2024-08-12 12:14:03 +02:00
committed by GitHub
parent ad9162b306 6de4235818
commit 892444edf6
5 changed files with 162 additions and 14482 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -5,7 +5,8 @@
/.pnp /.pnp
.pnp.js .pnp.js
.yarn/install-state.gz .yarn/install-state.gz
package-lock.json
pnpm-lock.yaml
# testing # testing
/coverage /coverage

14376
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

119
src/components/features.tsx
View File

@@ -1,4 +1,3 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Feature, { FeatureCard } from "./feature"; import Feature, { FeatureCard } from "./feature";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
@@ -13,22 +12,28 @@ import {
TableHead, TableHead,
TableHeader, TableHeader,
TableRow, TableRow,
} from './ui/table'; } from "./ui/table";
import { CheckIcon, XIcon } from "lucide-react"; import { CheckIcon, XIcon } from "lucide-react";
import { QuestionMarkIcon } from "@radix-ui/react-icons"; import { QuestionMarkIcon } from "@radix-ui/react-icons";
import ShineBorder from "./ui/shine-border"; import ShineBorder from "./ui/shine-border";
import SparklesText from "./ui/sparkles-text"; import SparklesText from "./ui/sparkles-text";
function Checkmark() { function Checkmark() {
return <CheckIcon className="mx-auto text-black mx-auto rounded-full bg-green-500 dark:bg-green-400 p-1 w-7 h-7" /> return (
<CheckIcon className="mx-auto text-black rounded-full bg-green-500 dark:bg-green-400 p-1 w-7 h-7" />
);
} }
function Cross() { function Cross() {
return <XIcon className="mx-auto text-black mx-auto rounded-full bg-red-500 dark:bg-red-400 p-1 w-7 h-7" /> return (
<XIcon className="mx-auto text-black rounded-full bg-red-500 dark:bg-red-400 p-1 w-7 h-7" />
);
} }
function Question() { function Question() {
return <QuestionMarkIcon className="mx-auto text-black mx-auto rounded-full bg-yellow-500 dark:bg-yellow-400 p-1 w-7 h-7" /> return (
<QuestionMarkIcon className="mx-auto text-black rounded-full bg-yellow-500 dark:bg-yellow-400 p-1 w-7 h-7" />
);
} }
export default function Features() { export default function Features() {
@@ -41,29 +46,46 @@ export default function Features() {
<div className="w-full flex mx-auto lg:mx-0 flex-col lg:mb-24 lg:ml-4 lg:mt-24"> <div className="w-full flex mx-auto lg:mx-0 flex-col lg:mb-24 lg:ml-4 lg:mt-24">
<div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 flex flex-col max-w-lg justify-center rounded-xl md:border-2 p-20 md:shadow-xl"> <div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 flex flex-col max-w-lg justify-center rounded-xl md:border-2 p-20 md:shadow-xl">
<h1 className="text-5xl font-bold">Split views</h1> <h1 className="text-5xl font-bold">Split views</h1>
<p className="text-muted-foreground mt-3">Split your browser into multiple views to browse multiple websites at once.</p> <p className="text-muted-foreground mt-3">
Split your browser into multiple views to browse multiple websites
at once.
</p>
<img src="/split-view.png" className="mt-8 w-full h-full" /> <img src="/split-view.png" className="mt-8 w-full h-full" />
</div> </div>
<div className="hover:border-blue-500 transition-all duration-100 bg-background mx-auto lg:mx-0 relative flex flex-col mt-8 max-w-lg justify-center rounded-xl md:border-2 p-20 md:shadow-xl"> <div className="hover:border-blue-500 transition-all duration-100 bg-background mx-auto lg:mx-0 relative flex flex-col mt-8 max-w-lg justify-center rounded-xl md:border-2 p-20 md:shadow-xl">
<h1 className="text-5xl font-bold">Workspaces</h1> <h1 className="text-5xl font-bold">Workspaces</h1>
<p className="text-muted-foreground mt-3">Create workspaces to keep your tabs organized and your browsing experience clutter-free.</p> <p className="text-muted-foreground mt-3">
Create workspaces to keep your tabs organized and your browsing
experience clutter-free.
</p>
<img src="/workspaces.png" className="mt-8 w-full h-full" /> <img src="/workspaces.png" className="mt-8 w-full h-full" />
</div> </div>
</div> </div>
<div className="w-full lg:mr-4 flex flex-col"> <div className="w-full lg:mr-4 flex flex-col">
<div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 mt-8 lg:mt-0 flex-col flex max-w-lg justify-center rounded-xl md:border-2 p-20 md:shadow-xl"> <div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 mt-8 lg:mt-0 flex-col flex max-w-lg justify-center rounded-xl md:border-2 p-20 md:shadow-xl">
<h1 className="text-5xl font-bold">Profile switching</h1> <h1 className="text-5xl font-bold">Profile switching</h1>
<p className="text-muted-foreground mt-3">Switch between profiles to keep your work and personal browsing separate.</p> <p className="text-muted-foreground mt-3">
Switch between profiles to keep your work and personal browsing
separate.
</p>
<img src="/profiles.png" className="mt-8 w-full h-full" /> <img src="/profiles.png" className="mt-8 w-full h-full" />
</div> </div>
<div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 mt-8 flex-col flex max-w-lg justify-center rounded-xl md:border-2 p-20 md:shadow-xl"> <div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 mt-8 flex-col flex max-w-lg justify-center rounded-xl md:border-2 p-20 md:shadow-xl">
<h1 className="text-5xl font-bold">Side web panels</h1> <h1 className="text-5xl font-bold">Side web panels</h1>
<p className="text-muted-foreground mt-3">Access your favorite websites and services without leaving the page you're on.</p> <p className="text-muted-foreground mt-3">
Access your favorite websites and services without leaving the
page you're on.
</p>
<img src="/sidebar.png" className="mt-8 w-full h-full" /> <img src="/sidebar.png" className="mt-8 w-full h-full" />
</div> </div>
</div> </div>
</div> </div>
<ShineBorder borderWidth={2} borderRadius={12} color={['#A07CFE', '#FE8FB5', '#FFBE7B']} className="mt-52 flex relative flex-col items-start justify-start w-full bg-background p-12 rounded-lg md:shadow-xl"> <ShineBorder
borderWidth={2}
borderRadius={12}
color={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
className="mt-52 flex relative flex-col items-start justify-start w-full bg-background p-12 rounded-lg md:shadow-xl"
>
<div className="w-full p-16"> <div className="w-full p-16">
<Table> <Table>
<TableHeader> <TableHeader>
@@ -80,28 +102,60 @@ export default function Features() {
</TableHeader> </TableHeader>
<TableBody> <TableBody>
<TableRow> <TableRow>
<TableCell className="py-3 font-medium">Contain fine-grained security measures like sandboxing</TableCell> <TableCell className="py-3 font-medium">
<TableCell className="py-3"><Checkmark /></TableCell> Contain fine-grained security measures like sandboxing
<TableCell className="py-3 pl-4 pr-0"><Cross /></TableCell> </TableCell>
<TableCell className="py-3"><Checkmark /></TableCell> <TableCell className="py-3">
<Checkmark />
</TableCell>
<TableCell className="py-3 pl-4 pr-0">
<Cross />
</TableCell>
<TableCell className="py-3">
<Checkmark />
</TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell className="py-3 font-medium">Optimized for peak performance</TableCell> <TableCell className="py-3 font-medium">
<TableCell className="py-3"><Checkmark /></TableCell> Optimized for peak performance
<TableCell className="py-3 pl-4 pr-0"><Cross /></TableCell> </TableCell>
<TableCell className="py-3"><Cross /></TableCell> <TableCell className="py-3">
<Checkmark />
</TableCell>
<TableCell className="py-3 pl-4 pr-0">
<Cross />
</TableCell>
<TableCell className="py-3">
<Cross />
</TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell className="py-3 font-medium">Based on the latest version of Firefox</TableCell> <TableCell className="py-3 font-medium">
<TableCell className="py-3"><Checkmark /></TableCell> Based on the latest version of Firefox
<TableCell className="py-3 pl-4 pr-0"><Cross /></TableCell> </TableCell>
<TableCell className="py-3"><Checkmark /></TableCell> <TableCell className="py-3">
<Checkmark />
</TableCell>
<TableCell className="py-3 pl-4 pr-0">
<Cross />
</TableCell>
<TableCell className="py-3">
<Checkmark />
</TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell className="py-3 font-medium">Customizable with cutting-edge features</TableCell> <TableCell className="py-3 font-medium">
<TableCell className="py-3"><Checkmark /></TableCell> Customizable with cutting-edge features
<TableCell className="py-3 pl-4 pr-0"><Checkmark /></TableCell> </TableCell>
<TableCell className="py-3"><Cross /></TableCell> <TableCell className="py-3">
<Checkmark />
</TableCell>
<TableCell className="py-3 pl-4 pr-0">
<Checkmark />
</TableCell>
<TableCell className="py-3">
<Cross />
</TableCell>
</TableRow> </TableRow>
</TableBody> </TableBody>
</Table> </Table>
@@ -109,7 +163,11 @@ export default function Features() {
</ShineBorder> </ShineBorder>
<div className="my-40 w-full flex items-center justify-center flex-col"> <div className="my-40 w-full flex items-center justify-center flex-col">
<h1 className="text-5xl text-center font-bold w-1/2">Want more?</h1> <h1 className="text-5xl text-center font-bold w-1/2">Want more?</h1>
<p className="text-muted-foreground text-center mt-3 w-1/2">Zen Browser is packed with features that will change the way you browse the web. Download it today and experience a new way to browse the web.</p> <p className="text-muted-foreground text-center mt-3 w-1/2">
Zen Browser is packed with features that will change the way you
browse the web. Download it today and experience a new way to browse
the web.
</p>
<div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10"> <div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10">
<FeatureCard title="Beautifully designed" <FeatureCard title="Beautifully designed"
description="Zen is designed to be easy to use and beautiful to look at." /> description="Zen is designed to be easy to use and beautiful to look at." />
@@ -125,7 +183,12 @@ export default function Features() {
<FeatureCard title="Vertical tabs" <FeatureCard title="Vertical tabs"
description="Keep your tabs organized with vertical tabs." /> description="Keep your tabs organized with vertical tabs." />
</div> </div>
<Button onClick={() => window.location.href = "/download"} className="mt-8">Download Zen Browser</Button> <Button
onClick={() => (window.location.href = "/download")}
className="mt-8"
>
Download Zen Browser
</Button>
</div> </div>
</div> </div>
); );

54
src/components/mode-toggle.tsx
View File

@@ -1,34 +1,26 @@
'use client' "use client";
import * as React from 'react' import * as React from "react";
import { MoonIcon, SunIcon } from '@radix-ui/react-icons' import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
import { useTheme } from 'next-themes' import { useTheme } from "next-themes";
import { Button } from './ui/button' import { Button } from "./ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './ui/dropdown-menu' import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "./ui/dropdown-menu";
export function ModeToggle() { export function ModeToggle() {
const { setTheme } = useTheme() const { theme, setTheme } = useTheme();
const toggleTheme = () => {
return ( setTheme(theme === "light" ? "dark" : "light");
<DropdownMenu> };
<DropdownMenuTrigger asChild> return (
<Button variant="ghost" className="size-8 px-0"> <Button variant="ghost" size="icon" onClick={toggleTheme}>
<SunIcon className="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" /> <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<MoonIcon className="absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /> <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span> <span className="sr-only">Toggle theme</span>
</Button> </Button>
</DropdownMenuTrigger> );
<DropdownMenuContent align="end"> }
<DropdownMenuItem onClick={() => setTheme('light')}>
Light
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('dark')}>
Dark
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('system')}>
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}

92
src/components/ui/button.tsx
View File

@@ -1,57 +1,57 @@
import * as React from 'react' import * as React from "react";
import { Slot } from '@radix-ui/react-slot' import { Slot } from "@radix-ui/react-slot";
import { type VariantProps, cva } from 'class-variance-authority' import { type VariantProps, cva } from "class-variance-authority";
import { ny } from '@/lib/utils' import { ny } from "@/lib/utils";
const buttonVariants = cva( const buttonVariants = cva(
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
{ {
variants: { variants: {
variant: { variant: {
default: default:
'bg-primary text-primary-foreground shadow hover:bg-primary/90', "bg-primary text-primary-foreground shadow hover:bg-primary/90",
destructive: destructive:
'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90', "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
outline: outline:
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground', "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground ",
secondary: secondary:
'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80', "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
ghost: 'hover:bg-accent hover:text-accent-foreground', ghost: "hover:bg-accent hover:text-accent-foreground",
link: 'text-primary underline-offset-4 hover:underline', link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: 'h-9 px-4 py-2',
sm: 'h-8 rounded-md px-3 text-xs',
lg: 'h-10 rounded-md px-8',
icon: 'h-9 w-9',
},
}, },
defaultVariants: { size: {
variant: 'default', default: "h-9 px-4 py-2",
size: 'default', sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-8",
icon: "h-9 w-9",
}, },
}, },
) defaultVariants: {
variant: "default",
size: "default",
},
},
);
export interface ButtonProps export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>, extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> { VariantProps<typeof buttonVariants> {
asChild?: boolean asChild?: boolean;
} }
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => { ({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : 'button' const Comp = asChild ? Slot : "button";
return ( return (
<Comp <Comp
className={ny(buttonVariants({ variant, size, className }))} className={ny(buttonVariants({ variant, size, className }))}
ref={ref} ref={ref}
{...props} {...props}
/> />
) );
}, },
) );
Button.displayName = 'Button' Button.displayName = "Button";
export { Button, buttonVariants } export { Button, buttonVariants };