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

Merge branch 'main' into fix-2

Browse Source
This commit is contained in:
mauro 🤙
2024-08-25 21:06:27 +02:00
committed by GitHub
parent 76de09f1c4 94243d4206
commit 06371e52fe
14 changed files with 274 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/branding-assets.tsx
View File

@@ -1,3 +1,4 @@
import { LOGO_COLORS } from "@/lib/logos";
export function BrandingAssets() {
@@ -19,6 +20,7 @@ export function BrandingAssets() {
<div className="flex items-center my-2">
<a
href={`/logos/zen-${color}.svg`}
download={`zen-${color}.svg`}
className="text-blue-500 text-md ml-2"
>
{color}
@@ -40,7 +42,7 @@ export function BrandingAssets() {
<div className="flex items-center my-2">
<a
href={`/logos/zen-alpha-${color}.svg`}
download={`zen-alpha-${color}.png`}
download={`zen-alpha-${color}.svg`}
className="text-blue-500 text-md ml-2"
>
{color}

2
src/components/download.tsx
View File

@@ -382,7 +382,7 @@ export default function DownloadPage() {
<h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
🍏
</h1>
<h1 className="text-2xl font-semibold my-2">aarch64</h1>
<h1 className="text-2xl font-semibold my-2">AArch64</h1>
<p className="text-muted-foreground mx-auto text-center">64-bit ARM architecture, for Apple's M Series Chips</p>
</div>
<div

8
src/components/features.tsx
View File

@@ -63,7 +63,7 @@ export default function Features() {
return () => clearInterval(interval);
});
return (
<div className="relative my-32 mx-auto md:border-2 rounded-md md:w-full xl:w-4/5 2xl:w-3/5">
<div className="max-w-[1300px] relative my-32 mx-auto md:border-2 rounded-md md:w-full xl:w-4/5 2xl:w-3/5">
<div className="grid grid-cols-1 md:grid-cols-3 md:grid-rows-10 w-full">
<div className="items-center justify-center flex flex-col p-16">
<div className="rounded-full px-8 py-3 shadow border-2 flex items-center justify-center">
@@ -102,7 +102,7 @@ export default function Features() {
Secure by default
</h2>
<p className="text-center text-sm mt-2 text-muted-foreground">
We are always using the latest security features from firefox to
We are always using the latest security features from Firefox to
keep you safe. <a className="text-blue-500" href="https://docs.zen-browser.app/faq#how-do-i-know-zen-is-safe">Learn more</a>
</p>
</div>
@@ -118,8 +118,6 @@ export default function Features() {
</Sticky>
</div>
<div className="relative md:grid border-t-2 md:border-l-2 md:col-span-2 md:grid-cols-2 row-span-2">
<div className="w-1/2 absolute md:relative z-[-1] opacity-50 md:opacity-1 md:w-full h-full border-r-2 md:border-r"></div>
<div className="w-1/2 absolute md:relative z-[-1] hidden md:block md:w-full h-full border-l"></div>
<div className="p-16 md:px-32 h-full md:absolute top-0 left-0 flex flex-col">
<div className="">
<div>
@@ -149,8 +147,6 @@ export default function Features() {
</div>
</div>
<div className="relative md:grid md:border-l-2 border-t-2 md:col-span-2 grid-cols-2 row-span-2">
<div className="w-1/2 absolute md:relative z-[-1] opacity-50 md:opacity-1 md:w-full h-full border-r-2 md:border-r"></div>
<div className="w-1/2 absolute md:relative z-[-1] hidden md:block md:w-full h-full border-l"></div>
<div className="p-16 md:px-32 h-full md:absolute top-0 left-0 flex flex-col">
<div className="flex flex-col md:flex-row">
<div className='relative'>

6
src/components/theme-card.tsx
View File

@@ -3,7 +3,7 @@ import { getThemeAuthorLink, ZenTheme } from "@/lib/themes";
import styled from "styled-components";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";import { Button } from "./ui/button";
const ThemeCardWrapepr = styled.div`
const ThemeCardWrapper = styled.div`
`;
export default function ThemeCard({
@@ -12,7 +12,7 @@ export default function ThemeCard({
theme: ZenTheme;
}) {
return (
<ThemeCardWrapepr onClick={(event) => {
<ThemeCardWrapper onClick={(event) => {
if (event.target instanceof HTMLAnchorElement) return;
window.open(`/themes/${theme.id}`, "_self");
}} className="flex flex-col justify-start p-5 rounded-lg shadow-sm bg-muted dark:bg-muted/50 border border-grey-900 dark:border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-muted/100 hover:border-blue-500 cursor-pointer select-none ">
@@ -35,6 +35,6 @@ export default function ThemeCard({
</a>
</div>
<p className="text-md mt-2 overflow-ellipsis text-muted-foreground text-start">{theme.description}</p>
</ThemeCardWrapepr>
</ThemeCardWrapper>
);
}

35
src/components/theme-page.tsx
View File

@@ -1,20 +1,31 @@
"use client";
import Image from "next/image";
import { getThemeAuthorLink, getThemeMarkdown, ZenTheme } from "@/lib/themes";
import { getThemeAuthorLink, getThemeFromId, getThemeMarkdown, ZenTheme } from "@/lib/themes";
import { Button } from "./ui/button";
import { useEffect, useState } from "react";
import Markdown from "react-markdown";
import '../app/privacy-policy/markdown.css';
import { ChevronLeft, LoaderCircleIcon, LoaderIcon, LoaderPinwheelIcon, MoveLeftIcon } from "lucide-react";
import { ChevronLeft, LoaderCircleIcon } from "lucide-react";
import { useParams } from "next/navigation";
export default function ThemePage({ theme }: { theme: ZenTheme }) {
const [readme, setReadme] = useState<string | null>(null);
useEffect(() => {
getThemeMarkdown(theme).then(setReadme);
}, [theme]);
export default async function ThemePage() {
const params = useParams<{ theme: string }>();
const { theme: themeID } = params;
const theme = await getThemeFromId(themeID);
if (!theme) {
return <div>Theme not found</div>;
}
const readme = await getThemeMarkdown(theme);
return (
<div className="mt-24 lg:mt-56 flex-col lg:flex-row flex mx-auto items-start relative">
<div className="flex flex-col relative lg:fixed w-md h-full p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm">
<div className="flex flex-col relative lg:sticky lg:top-0 w-md h-full p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm">
<div className="flex mt-2 mb-9 items-center cursor-pointer opacity-70" onClick={() => window.history.back()}>
<ChevronLeft className="w-4 h-4 mr-1" />
<h3 className="text-md">Go back</h3>
</div>
<Image src={theme.image} alt={theme.name} width={500} height={500} className="w-full object-cover rounded-lg border-2 shadow" />
<h1 className="text-2xl mt-5 font-bold">{theme.name}</h1>
<p className="text-sm text-muted-foreground mt-2">{theme.description}</p>
@@ -42,14 +53,10 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
<p id="install-theme-error" className="text-muted-foreground text-sm mt-2">You need to have Zen Browser installed to install this theme. <a href="/download" className="text-blue-500">Download now!</a></p>
</div>
<hr className="block my-4 lg:hidden" />
<div className="flex flex-col lg:border-l lg:min-h-96 pl-10 lg:ml-[25rem] max-w-xl lg:min-w-96 w-full">
<div className="flex my-2 items-center cursor-pointer opacity-70" onClick={() => window.history.back()}>
<ChevronLeft className="w-4 h-4 mr-1" />
<h3 className="text-md">Go back</h3>
</div>
<div className="flex flex-col lg:border-l lg:min-h-96 px-5 lg:pl-10 max-w-xl lg:min-w-96 w-full">
<div id="policy" className="w-full">
{readme === null ? (
<LoaderCircleIcon className="animate-spin w-12 h-12 mx-auto" />
<LoaderCircleIcon className="animate-spin w-12 h-12 mx-auto" />
) : (
<Markdown>{`${readme}`}</Markdown>
)}