selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-20 20:29:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

try chakra-ui

Browse Source
This commit is contained in:
Sara
2023-12-14 19:27:16 +01:00
parent 6048339c26
commit 01c7f47250
7 changed files with 1660 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
www/app/[domain]/chakra-showcase/page.tsx Normal file
View File

@@ -0,0 +1,122 @@
"use client";
import {
Grid,
Box,
Kbd,
Heading,
Text,
Button,
Wrap,
WrapItem,
Spinner,
Menu,
MenuList,
MenuItem,
MenuButton,
Circle,
} from "@chakra-ui/react";
import { PhoneIcon, ChevronDownIcon } from "@chakra-ui/icons";
import { Select } from "chakra-react-select";
import supportedLanguages from "../../supportedLanguages";
import { useState } from "react";
export default () => {
const [language, setLanguage] = useState<{ label: string; value: string }>({
label: "No translation",
value: "",
});
const options = supportedLanguages.map((i) => ({
label: i.name,
value: i.value || "",
}));
const handleLanguageChange = (option) => setLanguage(option);
return (
<>
<div></div>
<Grid
templateColumns={{
sm: "1fr",
md: "repeat(2, 1fr)",
lg: "repeat(2, 1fr)",
}}
templateRows={{ sm: "repeat(2, 1fr)", md: "1fr", lg: "1fr" }}
gap={{ base: "2", md: "4", lg: "4" }}
h="100%"
>
<Box
bg="Background"
h="100%"
rounded="5px"
p={{ base: "2", lg: "4" }}
overflowX="scroll"
>
<Heading as="h1" size="xl" noOfLines={1}>
Here are a few components
</Heading>
<Wrap spacing={4} p="4">
<WrapItem>
<span>
<Kbd>shift</Kbd> + <Kbd>H</Kbd>
</span>
</WrapItem>
<WrapItem>
<Circle size="40px" bg="tomato" color="white">
<PhoneIcon />
</Circle>
</WrapItem>
<WrapItem>
<Button colorScheme="blue">A button</Button>
</WrapItem>
<WrapItem>
<Spinner />
</WrapItem>
<WrapItem>
<Menu>
<MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
Actions
</MenuButton>
<MenuList>
<MenuItem>Download</MenuItem>
<MenuItem>Create a Copy</MenuItem>
<MenuItem>Mark as Draft</MenuItem>
<MenuItem>Delete</MenuItem>
<MenuItem>Attend a Workshop</MenuItem>
</MenuList>
</Menu>
</WrapItem>
</Wrap>
<WrapItem>
<Select
options={options}
onChange={handleLanguageChange}
value={language}
/>
</WrapItem>
</Box>
<Box
bg="Background"
h="100%"
rounded="5px"
p={{ base: "2", lg: "4" }}
overflowX="scroll"
>
<Text>
All legths can be either a number that maps to default values (eg
'2' will become '--var-chakra-space-2', which by default is .5rem),
a css string value like "25px" or an object with different values
for different screen sizes. See the docs on responsive-styles.
</Text>
<Text>
This is the default theme, but you can ovewrite part or all of it,
see the Customize Component styles section of the docs, especially
Customizing component styles
</Text>
<Text>I think the figma section of their docs is promising too</Text>
</Box>
</Grid>
</>
);
};

137
www/app/[domain]/layout.tsx
View File

@@ -14,6 +14,7 @@ import { getConfig } from "../lib/edgeConfig";
import { ErrorBoundary } from "@sentry/nextjs";
import { cookies } from "next/dist/client/components/headers";
import { SESSION_COOKIE_NAME } from "../lib/fief";
import { Providers } from "../providers";
const poppins = Poppins({ subsets: ["latin"], weight: ["200", "400", "600"] });
@@ -83,77 +84,79 @@ export default async function RootLayout({ children, params }: LayoutProps) {
<ErrorBoundary fallback={<p>"something went really wrong"</p>}>
<ErrorProvider>
<ErrorMessage />
<div
id="container"
className="items-center h-[100svh] w-[100svw] p-2 md:p-4 grid grid-rows-layout gap-2 md:gap-4"
>
<header className="flex justify-between items-center w-full">
{/* Logo on the left */}
<Link
href="/"
className="flex outline-blue-300 md:outline-none focus-visible:underline underline-offset-2 decoration-[.5px] decoration-gray-500"
>
<Image
src="/reach.png"
width={16}
height={16}
className="h-10 w-auto"
alt="Reflector"
/>
<div className="hidden flex-col ml-2 md:block">
<h1 className="text-[38px] font-bold tracking-wide leading-tight">
Reflector
</h1>
<p className="text-gray-500 text-xs tracking-tighter">
Capture the signal, not the noise
</p>
</div>
</Link>
<div>
{/* Text link on the right */}
<Providers>
<div
id="container"
className="items-center h-[100svh] w-[100svw] p-2 md:p-4 grid grid-rows-layout gap-2 md:gap-4"
>
<header className="flex justify-between items-center w-full">
{/* Logo on the left */}
<Link
href="/transcripts/new"
className="hover:underline focus-within:underline underline-offset-2 decoration-[.5px] font-light px-2"
href="/"
className="flex outline-blue-300 md:outline-none focus-visible:underline underline-offset-2 decoration-[.5px] decoration-gray-500"
>
Create
<Image
src="/reach.png"
width={16}
height={16}
className="h-10 w-auto"
alt="Reflector"
/>
<div className="hidden flex-col ml-2 md:block">
<h1 className="text-[38px] font-bold tracking-wide leading-tight">
Reflector
</h1>
<p className="text-gray-500 text-xs tracking-tighter">
Capture the signal, not the noise
</p>
</div>
</Link>
{browse ? (
<>
&nbsp;·&nbsp;
<Link
href="/browse"
className="hover:underline focus-within:underline underline-offset-2 decoration-[.5px] font-light px-2"
prefetch={false}
>
Browse
</Link>
</>
) : (
<></>
)}
&nbsp;·&nbsp;
<About buttonText="About" />
{privacy ? (
<>
&nbsp;·&nbsp;
<Privacy buttonText="Privacy" />
</>
) : (
<></>
)}
{requireLogin ? (
<>
&nbsp;·&nbsp;
<UserInfo />
</>
) : (
<></>
)}
</div>
</header>
<div>
{/* Text link on the right */}
<Link
href="/transcripts/new"
className="hover:underline focus-within:underline underline-offset-2 decoration-[.5px] font-light px-2"
>
Create
</Link>
{browse ? (
<>
&nbsp;·&nbsp;
<Link
href="/browse"
className="hover:underline focus-within:underline underline-offset-2 decoration-[.5px] font-light px-2"
prefetch={false}
>
Browse
</Link>
</>
) : (
<></>
)}
&nbsp;·&nbsp;
<About buttonText="About" />
{privacy ? (
<>
&nbsp;·&nbsp;
<Privacy buttonText="Privacy" />
</>
) : (
<></>
)}
{requireLogin ? (
<>
&nbsp;·&nbsp;
<UserInfo />
</>
) : (
<></>
)}
</div>
</header>
{children}
</div>
{children}
</div>
</Providers>
</ErrorProvider>
</ErrorBoundary>
</DomainContextProvider>

7
www/app/providers.tsx Normal file
View File

@@ -0,0 +1,7 @@
"use client";
import { ChakraProvider } from "@chakra-ui/react";
export function Providers({ children }: { children: React.ReactNode }) {
return <ChakraProvider>{children}</ChakraProvider>;
}

4
www/app/supportedLanguages.ts
View File

@@ -8,6 +8,10 @@ type LanguageOption = {
};
const supportedLanguages: LanguageOption[] = [
{
value: "",
name: "No translation",
},
{
value: "af",
name: "Afrikaans",

6
www/middleware.ts
View File

@@ -27,7 +27,8 @@ export async function middleware(request: NextRequest) {
if (
request.nextUrl.pathname == "/" ||
request.nextUrl.pathname.startsWith("/transcripts") ||
request.nextUrl.pathname.startsWith("/browse")
request.nextUrl.pathname.startsWith("/browse") ||
request.nextUrl.pathname.startsWith("/chakra-showcase")
) {
if (!fiefResponse.headers.get("x-middleware-rewrite")) {
fiefResponse.headers.set(
@@ -42,7 +43,8 @@ export async function middleware(request: NextRequest) {
if (
request.nextUrl.pathname == "/" ||
request.nextUrl.pathname.startsWith("/transcripts") ||
request.nextUrl.pathname.startsWith("/browse")
request.nextUrl.pathname.startsWith("/browse") ||
request.nextUrl.pathname.startsWith("/chakra-showcase")
) {
return NextResponse.rewrite(
request.nextUrl.origin + "/" + domain + request.nextUrl.pathname,

9
www/package.json
View File

@@ -11,6 +11,13 @@
"openapi": "openapi-generator-cli generate -i http://localhost:1250/openapi.json -g typescript-fetch -o app/api && yarn format"
},
"dependencies": {
"@chakra-ui/icons": "^2.1.1",
"@chakra-ui/menu": "^2.2.1",
"@chakra-ui/next-js": "^2.2.0",
"@chakra-ui/react": "^2.8.2",
"@chakra-ui/react-types": "^2.0.6",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@fief/fief": "^0.13.5",
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
@@ -19,7 +26,9 @@
"@vercel/edge-config": "^0.4.1",
"autoprefixer": "10.4.14",
"axios": "^1.6.2",
"chakra-react-select": "^4.7.6",
"fontawesome": "^5.6.3",
"framer-motion": "^10.16.16",
"jest-worker": "^29.6.2",
"next": "^13.4.9",
"postcss": "8.4.25",

1449
www/yarn.lock
View File

File diff suppressed because it is too large Load Diff