Skip to content

feat(web,preview): web and preview app UI update #300

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: next/v3
Choose a base branch
from
Open

feat(web,preview): web and preview app UI update #300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
99c8465
wip: move to new web ui
lordelogos May 3, 2025
44ac1e5
wip: move to new preview server
lordelogos May 4, 2025
6209186
wip: svg changes, ui changes
lordelogos May 4, 2025
3c89b0a
wip: remove gradient from svgs, add theme toggle to index page
lordelogos May 4, 2025
84ee58d
Merge branch 'next/v3' into next/v3-web-update
shellscape May 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions apps/preview/app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,21 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Font imports -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Onest:[email protected]&display=swap"
rel="stylesheet"
/>
<!-- Favicon setup -->
<link
rel="shortcut icon"
href="data:image/svg+xml;charset=UTF-8,%3csvg width='126' height='113' viewBox='0 0 126 113' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.199951 50V109V113H4.19995H121.8H125.8V109V50H117.8V105H8.19995V50H0.199951Z' fill='%23659CC8'/%3e%3cpath d='M0 53.429V47.4258L48.3069 22.8124V32.4176L11.2516 50.2773L11.5517 49.677V51.1778L11.2516 50.5775L48.3069 68.4372V78.0424L0 53.429Z' fill='%23659CC8'/%3e%3cpath d='M79.4367 0L54.6832 92H46.582L71.3356 0H79.4367Z' fill='%23659CC8'/%3e%3cpath d='M126 53.429L77.6931 78.0424V68.4372L114.748 50.5775L114.448 51.1778V49.677L114.748 50.2773L77.6931 32.4176V22.8124L126 47.4258V53.429Z' fill='%23659CC8'/%3e%3c/svg%3e "
/>
<title>jsx-email</title>
<title>Jsx-email Preview</title>
</head>
<body style="display: block">
<body class="dark:text-white">
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
Expand Down
Binary file added apps/preview/app/public/favicon.ico
View file
Open in desktop
Binary file not shown.
48 changes: 48 additions & 0 deletions apps/preview/app/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { Provider as MobxProvider, observer } from 'mobx-react';
import { StrictMode, useState } from 'react';
import { HashRouter, Route, Routes } from 'react-router-dom';

import { useAppStore } from './composables/useAppStore';
import { Shell } from './layouts/Shell';
import { AppStore } from './stores/AppStore';
import { Index } from './views/Index';
import { Preview } from './views/Preview/index';

const Router = observer(() => {
const appStore = useAppStore();

return (
<>
{appStore.templates.isReady && (
<HashRouter>
<Routes>
<Route path="/" element={<Shell />}>
<Route index element={<Index />} />
<Route path="emails">
{Object.values(appStore.templates.records).map((template, index) => (
<Route
path={template.path.replace('.tsx', '')}
key={index}
element={<Preview />}
/>
))}
</Route>
</Route>
</Routes>
</HashRouter>
)}
</>
);
});

export const App = () => {
const [appStore] = useState(() => new AppStore());

return (
<StrictMode>
<MobxProvider store={appStore}>
<Router />
</MobxProvider>
</StrictMode>
);
};
11 changes: 0 additions & 11 deletions apps/preview/app/src/app.ts
View file
Open in desktop

This file was deleted.

29 changes: 29 additions & 0 deletions apps/preview/app/src/components/DefaultPopupFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { Icon } from '@iconify/react';
import { Link as ReactRouterDomLink } from 'react-router-dom';

import { Button } from './ui/Button';
import { Link } from './ui/Link';
import { Separator } from './ui/Separator';

export const DefaultPopupFooter = () => (
<div className="w-full flex items-center justify-between gap-x-4 gap-y-8 flex-wrap px-8 sm:px-12 py-6">
<div className="flex items-center gap-x-5">
<Button asChild>
<ReactRouterDomLink to="https://jsx.email/docs">Documentation</ReactRouterDomLink>
</Button>
<Separator orientation="vertical" className="h-12" />
<ReactRouterDomLink to="https://jsx.email/github">
<Icon icon="mdi:github" className="h-8 w-8" />
<span className="sr-only">Go to JSX Email's Github</span>
</ReactRouterDomLink>
<ReactRouterDomLink to="https://jsx.email/discord">
<Icon icon="ic:baseline-discord" className="h-8 w-8" />
<span className="sr-only">Go to JSX Email's Discord</span>
</ReactRouterDomLink>
</div>
<div className="flex items-center gap-x-6 gap-y-2 flex-wrap">
<Link to="https://samples.jsx.email">Email Samples</Link>
<Link to="https://pro.jsx.email">Pro Templates</Link>
</div>
</div>
);
74 changes: 0 additions & 74 deletions apps/preview/app/src/components/code-container.tsx
View file
Open in desktop

This file was deleted.

46 changes: 0 additions & 46 deletions apps/preview/app/src/components/code.tsx
View file
Open in desktop

This file was deleted.

146 changes: 0 additions & 146 deletions apps/preview/app/src/components/icons.tsx
View file
Open in desktop

This file was deleted.

Loading
Loading