+
+
+ )
+}
diff --git a/MyApp.Client/src/_posts/components/Counter.tsx b/MyApp.Client/src/_posts/components/Counter.tsx
index b984088..783a20f 100644
--- a/MyApp.Client/src/_posts/components/Counter.tsx
+++ b/MyApp.Client/src/_posts/components/Counter.tsx
@@ -2,5 +2,5 @@ import { useState } from 'react'
export default () => {
let [count, setCount] = useState(1)
- return setCount(count+=1)}>Counter {count}
+ return setCount((count += 1))}>Counter {count}
}
diff --git a/MyApp.Client/src/_posts/components/Hello.tsx b/MyApp.Client/src/_posts/components/Hello.tsx
index b92fec0..9b17718 100644
--- a/MyApp.Client/src/_posts/components/Hello.tsx
+++ b/MyApp.Client/src/_posts/components/Hello.tsx
@@ -1,2 +1,2 @@
-type Props = { name:string }
-export default ({ name }:Props) => Hello, {name}!
\ No newline at end of file
+type Props = { name: string }
+export default ({ name }: Props) => Hello, {name}!
diff --git a/MyApp.Client/src/_posts/components/HelloApi.test.tsx b/MyApp.Client/src/_posts/components/HelloApi.test.tsx
new file mode 100644
index 0000000..d5a4f39
--- /dev/null
+++ b/MyApp.Client/src/_posts/components/HelloApi.test.tsx
@@ -0,0 +1,24 @@
+import { afterEach, describe, expect, it, vi } from 'vite-plus/test'
+import { cleanup, render, screen } from '@testing-library/react'
+import { ClientContext } from '@servicestack/react'
+import { ApiResult, JsonServiceClient } from '@servicestack/client'
+import { HelloResponse } from '@/lib/dtos'
+import HelloApi from './HelloApi'
+
+afterEach(cleanup)
+
+describe('HelloApi', () => {
+ it('renders the API response', async () => {
+ const client = new JsonServiceClient()
+ const api = vi.spyOn(client, 'api').mockResolvedValue(new ApiResult({ response: new HelloResponse({ result: 'Hello, Vite+!' }) }))
+
+ render(
+
-
)
+ return (
+
+
+ )
}
diff --git a/MyApp.Client/src/_posts/components/Plugin.tsx b/MyApp.Client/src/_posts/components/Plugin.tsx
index 1195f0e..cd834bf 100644
--- a/MyApp.Client/src/_posts/components/Plugin.tsx
+++ b/MyApp.Client/src/_posts/components/Plugin.tsx
@@ -1,25 +1,18 @@
-import { Button as PrimaryButton } from "@/components/ui/button"
-import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogHeader,
- DialogTitle,
- DialogTrigger,
-} from "@/components/ui/dialog"
+import { Button as PrimaryButton } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
export default () => {
- return ()
+ return (
+
+ )
}
diff --git a/MyApp.Client/src/_posts/components/TemplateIndex.ts b/MyApp.Client/src/_posts/components/TemplateIndex.ts
index 04b9ac3..51383d3 100644
--- a/MyApp.Client/src/_posts/components/TemplateIndex.ts
+++ b/MyApp.Client/src/_posts/components/TemplateIndex.ts
@@ -1,38 +1,44 @@
export const Icons = {
- ServiceStack: '',
+ ServiceStack:
+ '',
Blazor: '',
Razor: '',
- Windows: '',
+ Windows:
+ '',
Vue: '',
Nextjs: '',
React: '',
- Angular: '',
+ Angular:
+ '',
Svelte: '',
}
-export type Template = { repo: string; name: string; icon: string; tags: string[]; demo: string; }
-export function make(repo:string, name:string, icon:string, tags:string[]=[], demo?:string):Template {
+export type Template = { repo: string; name: string; icon: string; tags: string[]; demo: string }
+export function make(repo: string, name: string, icon: string, tags: string[] = [], demo?: string): Template {
return { repo, name, icon, tags: tags ?? [], demo: demo ?? `${repo}.web-templates.io` }
}
export const Index = [
make('blazor', 'Blazor', 'Blazor', ['tailwind']),
- make('blazor-vue', 'Blazor Vue', 'Blazor',['tailwind']),
- make('mvc', 'MVC', 'Windows',['tailwind']),
- make('razor', 'Razor Pages', 'Razor',['tailwind']),
- make('mvc-bootstrap', 'MVC', 'Windows',['bootstrap']),
- make('razor-bootstrap', 'Razor Pages', 'Razor',['bootstrap']),
- make('vue-mjs', 'Razor Pages', 'Razor',['tailwind','autoquery']),
- make('nextjs', 'Next.js', 'Nextjs',['tailwind','autoquery'], 'nextjs.react-templates.net'),
- make('vue-vite', 'Vue Vite', 'Vue',['tailwind','autoquery']),
- make('vue-ssg', 'Vue SSG', 'Vue',['tailwind','autoquery']),
- make('razor-pages', 'Razor Pages', 'Razor',['bootstrap']),
- make('mvcauth', 'MVC', 'Windows',['bootstrap']),
- make('script', 'MVC', 'Windows',['bootstrap']),
- make('vue-spa', 'Vue SPA', 'Vue',['bootstrap']),
- make('react-spa', 'React SPA', 'React',['tailwind','autoquery'], 'react-spa.react-templates.net'),
- make('angular-spa', 'Angular SPA', 'Angular',['bootstrap']),
- make('svelte-spa', 'Svelte SPA', 'Angular',['bootstrap']),
-].reduce((acc:{[name:string]:any}, template) => { acc[template.repo] = template; return acc}, {})
+ make('blazor-vue', 'Blazor Vue', 'Blazor', ['tailwind']),
+ make('mvc', 'MVC', 'Windows', ['tailwind']),
+ make('razor', 'Razor Pages', 'Razor', ['tailwind']),
+ make('mvc-bootstrap', 'MVC', 'Windows', ['bootstrap']),
+ make('razor-bootstrap', 'Razor Pages', 'Razor', ['bootstrap']),
+ make('vue-mjs', 'Razor Pages', 'Razor', ['tailwind', 'autoquery']),
+ make('nextjs', 'Next.js', 'Nextjs', ['tailwind', 'autoquery'], 'nextjs.react-templates.net'),
+ make('vue-vite', 'Vue Vite', 'Vue', ['tailwind', 'autoquery']),
+ make('vue-ssg', 'Vue SSG', 'Vue', ['tailwind', 'autoquery']),
+ make('razor-pages', 'Razor Pages', 'Razor', ['bootstrap']),
+ make('mvcauth', 'MVC', 'Windows', ['bootstrap']),
+ make('script', 'MVC', 'Windows', ['bootstrap']),
+ make('vue-spa', 'Vue SPA', 'Vue', ['bootstrap']),
+ make('react-spa', 'React SPA', 'React', ['tailwind', 'autoquery'], 'react-spa.react-templates.net'),
+ make('angular-spa', 'Angular SPA', 'Angular', ['bootstrap']),
+ make('svelte-spa', 'Svelte SPA', 'Angular', ['bootstrap']),
+].reduce((acc: { [name: string]: any }, template) => {
+ acc[template.repo] = template
+ return acc
+}, {})
-export default Index
\ No newline at end of file
+export default Index
diff --git a/MyApp.Client/src/_posts/components/Templates.tsx b/MyApp.Client/src/_posts/components/Templates.tsx
index f48d5b1..afc4063 100644
--- a/MyApp.Client/src/_posts/components/Templates.tsx
+++ b/MyApp.Client/src/_posts/components/Templates.tsx
@@ -1,20 +1,19 @@
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
import { type Template, Icons } from './TemplateIndex'
-import { ChangeEvent, useMemo, useState } from "react"
+import { ChangeEvent, useMemo, useState } from 'react'
type Props = {
templates: Template[]
hide?: string
}
-export default ({templates, hide}: Props) => {
+export default ({ templates, hide }: Props) => {
let defaultValue = 'ProjectName'
let [project, setProject] = useState(defaultValue)
- const handleChange = (e: ChangeEvent
-
-
-
-
-
+ return (
+
- {templates.map(template =>
+
+ )
+}
diff --git a/MyApp.Client/src/components/AuthorLinks.tsx b/MyApp.Client/src/components/AuthorLinks.tsx
index 2b82ef0..e9e3a9b 100644
--- a/MyApp.Client/src/components/AuthorLinks.tsx
+++ b/MyApp.Client/src/components/AuthorLinks.tsx
@@ -1,45 +1,120 @@
-import { Author } from "vite-plugin-press"
+import { Author } from 'vite-plugin-press'
type Props = {
author: Author
}
export default ({ author }: Props) => {
- return author.twitterUrl || author.threadsUrl || author.mastodonUrl || author.gitHubUrl
- ? (
+
+
-
-
+
-
+
+
+
-
+ ))}
+
-
-
)
-}
\ No newline at end of file
+ {template.demo && hide !== 'demo' ? {template.demo} : null}
+
-
+ {templates.map((template) => (
+
- {template.demo && hide !== 'demo' ? {template.demo} : null}
-
)}
-
-
-
-
- {template.name}
-
- {template.tags.map(tag =>
- {projectZip}
-
+
+
- {tag}
-
)}
- -
- {!author.twitterUrl ? null :
- - - - - } - {!author.threadsUrl ? null :
- - - - - } - {!author.mastodonUrl ? null :
- - - - - } - {!author.gitHubUrl ? null :
- - - - - } - {!author.email ? null :
- - - - - } -
-
+ {!author.twitterUrl ? null : (
+
- + + + + + )} + {!author.threadsUrl ? null : ( +
- + + + + + )} + {!author.mastodonUrl ? null : ( +
- + + + + + )} + {!author.gitHubUrl ? null : ( +
- + + + + + )} + {!author.email ? null : ( +
- + + + + + )} +
- {posts.map(post => {
render() {
if (this.state.hasError) {
- return this.props.fallback || (
-
- = TableOptions & {
columns: ColumnDef[]
@@ -27,16 +15,19 @@ type DataTableProps = TableOptions & {
export { getCoreRowModel }
-export function columnDefs(names:string[], configure?: (name:{ [name:string]: ColumnDef }) => void): ColumnDef[] {
- const to = names.map(name => ({
+export function columnDefs(names: string[], configure?: (name: { [name: string]: ColumnDef }) => void): ColumnDef[] {
+ const to = names.map((name) => ({
accessorKey: name,
header: splitTitleCase(toPascalCase(name)).join(' '),
}))
if (configure != null) {
- const map = to.reduce((acc,x) => {
- acc[x.accessorKey] = x
- return acc
- }, {} as { [name:string]: ColumnDef })
+ const map = to.reduce(
+ (acc, x) => {
+ acc[x.accessorKey] = x
+ return acc
+ },
+ {} as { [name: string]: ColumnDef },
+ )
configure(map)
}
return to
@@ -46,6 +37,7 @@ export function DataTable(props: DataTableProps) {
const { enableRowSelection } = props
const stripedRows = props.stripedRows ?? true
+ // oxlint-disable-next-line react/incompatible-library -- TanStack Table isn't React Compiler compatible
const table = useReactTable({
...props,
getCoreRowModel: getCoreRowModel(),
@@ -60,12 +52,7 @@ export function DataTable(props: DataTableProps) {
{headerGroup.headers.map((header) => {
return (
- {header.isPlaceholder
- ? null
- : flexRender(
- header.column.columnDef.header,
- header.getContext()
- )}
+ {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
)
})}
@@ -75,21 +62,25 @@ export function DataTable(props: DataTableProps) {
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
-
+ data-state={row.getIsSelected() && 'selected'}
+ onClick={row.getToggleSelectedHandler()}
+ >
{row.getVisibleCells().map((cell) => (
-
- {flexRender(cell.column.columnDef.cell, cell.getContext())}
-
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
))}
))
@@ -105,4 +96,4 @@ export function DataTable(props: DataTableProps) {
)
}
-export default DataTable
\ No newline at end of file
+export default DataTable
diff --git a/MyApp.Client/src/components/ErrorBoundary.tsx b/MyApp.Client/src/components/ErrorBoundary.tsx
index ac5636f..8fa57dd 100644
--- a/MyApp.Client/src/components/ErrorBoundary.tsx
+++ b/MyApp.Client/src/components/ErrorBoundary.tsx
@@ -1,4 +1,4 @@
-import { Component, ReactNode } from "react"
+import { Component, ReactNode } from 'react'
// Error Boundary Component
type ErrorBoundaryProps = {
@@ -27,16 +27,16 @@ class ErrorBoundary extends Component
-
- 
-
-
-
-
- )
-}
\ No newline at end of file
+
+ )
+}
diff --git a/MyApp.Client/src/components/DataTable.tsx b/MyApp.Client/src/components/DataTable.tsx
index af6689c..c45525f 100644
--- a/MyApp.Client/src/components/DataTable.tsx
+++ b/MyApp.Client/src/components/DataTable.tsx
@@ -1,24 +1,12 @@
-import {
- ColumnDef,
- flexRender,
- getCoreRowModel,
- useReactTable,
-} from "@tanstack/react-table"
+import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
-import type { TableOptions } from "@tanstack/react-table"
+import type { TableOptions } from '@tanstack/react-table'
-import {
- Table,
- TableBody,
- TableCell,
- TableHead,
- TableHeader,
- TableRow,
-} from "@/components/ui/table"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
-import { toPascalCase, splitTitleCase } from "@servicestack/client"
+import { toPascalCase, splitTitleCase } from '@servicestack/client'
type DataTableProps
-
- - Article -
- -- {post.title} -
-{post.summary}
- -
+ return (
+
+ )
}
diff --git a/MyApp.Client/src/components/BlogTitle.tsx b/MyApp.Client/src/components/BlogTitle.tsx
index 31351cc..7935802 100644
--- a/MyApp.Client/src/components/BlogTitle.tsx
+++ b/MyApp.Client/src/components/BlogTitle.tsx
@@ -1,17 +1,18 @@
-import { useContext } from "react"
-import { PressContext } from "@/contexts"
+import { useContext } from 'react'
+import { PressContext } from '@/contexts'
type Props = {
heading: string
}
-export default ({ heading }:Props) => {
+export default ({ heading }: Props) => {
const press = useContext(PressContext)
const blogTitle = press.blog.config.blogTitle as string
- return (
+ {posts.map((post) => (
+
)}
-
)
+ ))}
+
-
- {post.author}
- })
+
+
-
-
- - {authorLink(post.author) - ? {post.author} - : {post.author}} -
-
-
-
- {post.minutesToRead} min read
+
-
+
+
+ Article
+ ++ {post.title} +
+{post.summary}
+ +
+
+
+ {post.author}
+
+
+
+
+
+ {authorLink(post.author) ? ( + + {post.author} + + ) : ( + {post.author} + )} +
+
+
+
+ {post.minutesToRead} min read
+
+
-
)
+ return (
+ {blogTitle}
--
-
+
+ )
}
diff --git a/MyApp.Client/src/components/BookingsInfo.tsx b/MyApp.Client/src/components/BookingsInfo.tsx
index 1e138a6..e94260c 100644
--- a/MyApp.Client/src/components/BookingsInfo.tsx
+++ b/MyApp.Client/src/components/BookingsInfo.tsx
@@ -3,8 +3,15 @@ export default () => {
{blogTitle}
+ +Manage Bookings in - Locode or - API Explorer + + {' '} + Locode{' '} + {' '} + or + + {' '} + API Explorer{' '} +
@@ -12,15 +19,34 @@ export default () => {
The Bookings APIs are built using - AutoQuery CRUD, - allowing for rapid development of typed CRUD Services using only declarative POCO DTOs, enabling - developing entire - audited - & verifiable + + {' '} + AutoQuery CRUD + + , allowing for rapid development of typed CRUD Services using only declarative POCO DTOs, enabling developing entire + + {' '} + audited{' '} + + &{' '} + + {' '} + verifiable{' '} + data-driven systems in mins - more... + + {' '} + more... +
- +
-
- {
}
export default ErrorBoundary
-
diff --git a/MyApp.Client/src/components/FeatureLinks.tsx b/MyApp.Client/src/components/FeatureLinks.tsx
index 0ee272c..b8455e9 100644
--- a/MyApp.Client/src/components/FeatureLinks.tsx
+++ b/MyApp.Client/src/components/FeatureLinks.tsx
@@ -1,34 +1,48 @@
-import { TextLink } from "@servicestack/react"
+import { TextLink } from '@servicestack/react'
export default () => {
-
- const navClass = (path: string) => [
- "text-sm leading-6 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50",
- location.pathname.startsWith(path) ? "font-bold" : "",
- ].join(" ")
+ const navClass = (path: string) =>
+ [
+ 'text-sm leading-6 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50',
+ location.pathname.startsWith(path) ? 'font-bold' : '',
+ ].join(' ')
return (
)
diff --git a/MyApp.Client/src/components/FileLayout.tsx b/MyApp.Client/src/components/FileLayout.tsx
index cb0f181..85739b9 100644
--- a/MyApp.Client/src/components/FileLayout.tsx
+++ b/MyApp.Client/src/components/FileLayout.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
type Props = {
files?: { [dir: string]: any }
@@ -6,35 +6,79 @@ type Props = {
contents?: any
}
-function FileLayout({ files, label, contents }:Props) {
- return (<>
- {files
- ?
-
+ )
)
}
@@ -45,4 +45,3 @@ class ErrorBoundary extends Component- Something went wrong: {this.state.error?.message} -
+ return ( + this.props.fallback || ( +
+
-
+
+
Something went wrong: {this.state.error?.message}
+
- {Object.entries(files!).map(([label,contents]) =>
-
- :
- { label === '_'
- ? (
- {Object.values(contents).map((file:any) =>
-
)
- : (
-
- {file}
-
)}
-
-
-
-
+ )}
+
+ )
}
export default FileLayout
diff --git a/MyApp.Client/src/components/FollowLinks.tsx b/MyApp.Client/src/components/FollowLinks.tsx
index 1c9197d..b0a00d5 100644
--- a/MyApp.Client/src/components/FollowLinks.tsx
+++ b/MyApp.Client/src/components/FollowLinks.tsx
@@ -1,38 +1,55 @@
-export default () => (
-
-
- {label}
+function FileLayout({ files, label, contents }: Props) {
+ return (
+ <>
+ {files ? (
+
}
- )
+ )}
+
+ {Object.entries(files!).map(([label, contents]) => (
+
+ ) : (
+
+ {label === '_' ? (
+
)
- }
-
+ {Object.values(contents).map((file: any) => (
+
+ ) : (
+
+
+ {file}
+
+ ))}
+
+
-
+
- {Object.entries(contents ?? {}).map(([childLabel,node]) =>
-
+
+
+ {label}
+
+ {Object.entries(contents ?? {}).map(([childLabel, node]) => (
+ -
-
- - - Follow on Twitter - - -
- - - Follow on Instagram - - -
- - - Follow on GitHub - - -
- - - Follow on LinkedIn - - -
- - - spencer@planetaria.tech - - -
-
+
- + + + Follow on Twitter + + +
- + + + Follow on Instagram + + +
- + + + Follow on GitHub + + +
- + + + Follow on LinkedIn + + +
- + + + spencer@planetaria.tech + + +
+
+
+ )
}
export default Footer
diff --git a/MyApp.Client/src/components/Header.tsx b/MyApp.Client/src/components/Header.tsx
index e26f20f..30a4c8b 100644
--- a/MyApp.Client/src/components/Header.tsx
+++ b/MyApp.Client/src/components/Header.tsx
@@ -1,88 +1,109 @@
-import { Link, NavLink } from "react-router-dom"
-import { DarkModeToggle, SecondaryButton } from "@servicestack/react"
-import { appAuth } from "@/lib/auth"
+import { Link, NavLink } from 'react-router-dom'
+import { DarkModeToggle, SecondaryButton } from '@servicestack/react'
+import { appAuth } from '@/lib/auth'
export default () => {
const { user, hasRole, signOut } = appAuth()
-
- const navClass = ({isActive}: any) => [
- "p-4 flex items-center justify-start mw-full hover:text-sky-500 dark:hover:text-sky-400",
- isActive ? "text-link-dark dark:text-link-dark" : "",
- ].join(" ")
- return (© {new Date().getFullYear()} My App
+ + Privacy Policy + +
-
-
-
- 
-
+ const navClass = ({ isActive }: any) =>
+ ['p-4 flex items-center justify-start mw-full hover:text-sky-500 dark:hover:text-sky-400', isActive ? 'text-link-dark dark:text-link-dark' : ''].join(
+ ' ',
+ )
+
+ return (
+
+ )
+
+ )
}
diff --git a/MyApp.Client/src/components/Include.tsx b/MyApp.Client/src/components/Include.tsx
index 41f120a..870b3d6 100644
--- a/MyApp.Client/src/components/Include.tsx
+++ b/MyApp.Client/src/components/Include.tsx
@@ -1,12 +1,16 @@
import React, { lazy, Suspense } from 'react'
-import { PressContext } from "@/contexts"
-import { Components } from "@/components/MarkdownComponent"
+import { PressContext } from '@/contexts'
+import { Components } from '@/components/MarkdownComponent'
-export default ({ src }:{ src:string }) => {
+export default ({ src }: { src: string }) => {
const press = React.useContext(PressContext)
const factory = (press.components as any).includes[src]
const Component = lazy(factory ? factory : () => Promise.resolve(<>))
- return factory
- ? }>
- : }>
+
+ ) : (
+ {title} }
-
- {title} }
-
-
- {children}
-
+ {children}
-
+
)
}
diff --git a/MyApp.Client/src/components/LayoutPage.tsx b/MyApp.Client/src/components/LayoutPage.tsx
index 869433b..85b2e41 100644
--- a/MyApp.Client/src/components/LayoutPage.tsx
+++ b/MyApp.Client/src/components/LayoutPage.tsx
@@ -1,7 +1,7 @@
-import type React from "react"
-import Layout from "@/components/Layout"
-import ErrorBoundary from "@/components/ErrorBoundary"
-import { cn } from "@/lib/utils"
+import type React from 'react'
+import Layout from '@/components/Layout'
+import ErrorBoundary from '@/components/ErrorBoundary'
+import { cn } from '@/lib/utils'
type Props = {
title: string
@@ -9,13 +9,15 @@ type Props = {
className?: string
children: React.ReactNode
}
-export default ({ title, heading, className, children }:Props) => {
- return (
-
-
- )
+export default ({ title, heading, className, children }: Props) => {
+ return (
+
+
+
+
+ )
}
diff --git a/MyApp.Client/src/components/LiteYouTube.tsx b/MyApp.Client/src/components/LiteYouTube.tsx
index 1aae857..cacb67e 100644
--- a/MyApp.Client/src/components/LiteYouTube.tsx
+++ b/MyApp.Client/src/components/LiteYouTube.tsx
@@ -1,150 +1,133 @@
-import * as React from "react"
+import * as React from 'react'
-export type imgResolution =
- | "default"
- | "mqdefault"
- | "hqdefault"
- | "sddefault"
- | "maxresdefault";
+export type imgResolution = 'default' | 'mqdefault' | 'hqdefault' | 'sddefault' | 'maxresdefault'
export interface LiteYouTubeProps {
- announce?: string;
- id: string;
- title?: string;
- activatedClass?: string;
- adNetwork?: boolean;
- aspectHeight?: number;
- aspectWidth?: number;
- iframeClass?: string;
- noCookie?: boolean;
- cookie?: boolean;
- params?: string;
- playerClass?: string;
- playlist?: boolean;
- playlistCoverId?: string;
- poster?: imgResolution;
- webp?: boolean;
- wrapperClass?: string;
- onIframeAdded?: () => void
- muted?: boolean,
- thumbnail?: string,
- rel?: string,
- containerElement?: keyof React.JSX.IntrinsicElements;
- style?: React.CSSProperties;
+ announce?: string
+ id: string
+ title?: string
+ activatedClass?: string
+ adNetwork?: boolean
+ aspectHeight?: number
+ aspectWidth?: number
+ iframeClass?: string
+ noCookie?: boolean
+ cookie?: boolean
+ params?: string
+ playerClass?: string
+ playlist?: boolean
+ playlistCoverId?: string
+ poster?: imgResolution
+ webp?: boolean
+ wrapperClass?: string
+ onIframeAdded?: () => void
+ muted?: boolean
+ thumbnail?: string
+ rel?: string
+ containerElement?: keyof React.JSX.IntrinsicElements
+ style?: React.CSSProperties
}
function LiteYouTubeEmbedComponent(props: LiteYouTubeProps, ref: React.Ref) {
- const [preconnected, setPreconnected] = React.useState(false);
- const [iframe, setIframe] = React.useState(false);
- const videoId = encodeURIComponent(props.id);
- const videoPlaylisCovertId = typeof props.playlistCoverId === 'string' ? encodeURIComponent(props.playlistCoverId) : null;
- const videoTitle = props.title;
- const posterImp = props.poster || "hqdefault";
- const paramsImp = `&${props.params}` || "";
- const mutedImp = props.muted ? "&mute=1" : "";
- const announceWatch = props.announce || "Watch";
- const format = props.webp ? 'webp' : 'jpg';
- const vi = props.webp ? 'vi_webp' : 'vi';
- const posterUrl = props.thumbnail || (!props.playlist
- ? `https://i.ytimg.com/${vi}/${videoId}/${posterImp}.${format}`
- : `https://i.ytimg.com/${vi}/${videoPlaylisCovertId}/${posterImp}.${format}`);
+ const [preconnected, setPreconnected] = React.useState(false)
+ const [iframe, setIframe] = React.useState(false)
+ const videoId = encodeURIComponent(props.id)
+ const videoPlaylisCovertId = typeof props.playlistCoverId === 'string' ? encodeURIComponent(props.playlistCoverId) : null
+ const videoTitle = props.title
+ const posterImp = props.poster || 'hqdefault'
+ const paramsImp = props.params ? `&${props.params}` : ''
+ const mutedImp = props.muted ? '&mute=1' : ''
+ const announceWatch = props.announce || 'Watch'
+ const format = props.webp ? 'webp' : 'jpg'
+ const vi = props.webp ? 'vi_webp' : 'vi'
+ const posterUrl =
+ props.thumbnail ||
+ (!props.playlist
+ ? `https://i.ytimg.com/${vi}/${videoId}/${posterImp}.${format}`
+ : `https://i.ytimg.com/${vi}/${videoPlaylisCovertId}/${posterImp}.${format}`)
- let ytUrl = props.noCookie
- ? "https://www.youtube-nocookie.com"
- : "https://www.youtube.com";
- ytUrl = props.cookie
- ? "https://www.youtube.com"
- : "https://www.youtube-nocookie.com";
+ let ytUrl = props.noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com'
+ ytUrl = props.cookie ? 'https://www.youtube.com' : 'https://www.youtube-nocookie.com'
- const iframeSrc = !props.playlist
- ? `${ytUrl}/embed/${videoId}?autoplay=1&state=1${mutedImp}${paramsImp}`
- : `${ytUrl}/embed/videoseries?autoplay=1${mutedImp}&list=${videoId}${paramsImp}`;
+ const iframeSrc = !props.playlist
+ ? `${ytUrl}/embed/${videoId}?autoplay=1&state=1${mutedImp}${paramsImp}`
+ : `${ytUrl}/embed/videoseries?autoplay=1${mutedImp}&list=${videoId}${paramsImp}`
- const activatedClassImp = props.activatedClass || "lyt-activated";
- const adNetworkImp = props.adNetwork || false;
- const aspectHeight = props.aspectHeight || 9;
- const aspectWidth = props.aspectWidth || 16;
- const iframeClassImp = props.iframeClass || "";
- const playerClassImp = props.playerClass || "lty-playbtn";
- const wrapperClassImp = props.wrapperClass || "yt-lite";
- const onIframeAdded = props.onIframeAdded || function () { };
- const rel = props.rel ? 'prefetch' : 'preload';
- const ContainerElement = props.containerElement || 'article';
- const style = props.style || {};
+ const activatedClassImp = props.activatedClass || 'lyt-activated'
+ const adNetworkImp = props.adNetwork || false
+ const aspectHeight = props.aspectHeight || 9
+ const aspectWidth = props.aspectWidth || 16
+ const iframeClassImp = props.iframeClass || ''
+ const playerClassImp = props.playerClass || 'lty-playbtn'
+ const wrapperClassImp = props.wrapperClass || 'yt-lite'
+ const onIframeAdded = props.onIframeAdded || function () {}
+ const rel = props.rel ? 'prefetch' : 'preload'
+ const ContainerElement = props.containerElement || 'article'
+ const style = props.style || {}
- const warmConnections = () => {
- if (preconnected) return;
- setPreconnected(true);
- };
-
- const addIframe = () => {
- if (iframe) return;
- setIframe(true);
- };
+ const warmConnections = () => {
+ if (preconnected) return
+ setPreconnected(true)
+ }
- React.useEffect(() => {
- if (iframe) {
- onIframeAdded();
+ const addIframe = () => {
+ if (iframe) return
+ setIframe(true)
}
- }, [iframe]);
- return (
- <>
-
- <>
- {preconnected && (
- <>
-
-
- {adNetworkImp && (
- <>
-
-
-
- )}
-
- )}
-
-
-
- {iframe && (
-
- )}
-
-
- );
+ React.useEffect(() => {
+ if (iframe) {
+ onIframeAdded()
+ }
+ }, [iframe])
+
+ return (
+ <>
+
+ <>
+ {preconnected && (
+ <>
+
+
+ {adNetworkImp && (
+ <>
+
+
+
+ )}
+
+ )}
+
+
+
+ {iframe && (
+
+ )}
+
+
+ )
}
-export default React.forwardRef(LiteYouTubeEmbedComponent)
\ No newline at end of file
+export default React.forwardRef(LiteYouTubeEmbedComponent)
diff --git a/MyApp.Client/src/components/MarkdownComponent.tsx b/MyApp.Client/src/components/MarkdownComponent.tsx
index df59c9e..cee36d4 100644
--- a/MyApp.Client/src/components/MarkdownComponent.tsx
+++ b/MyApp.Client/src/components/MarkdownComponent.tsx
@@ -1,12 +1,12 @@
-import type { Doc } from "vite-plugin-press"
+import type { Doc } from 'vite-plugin-press'
import React, { lazy, Suspense, useState, ReactNode, MouseEvent } from 'react'
-import { PressContext } from "@/contexts"
-import { cn } from "@/lib/utils"
-import LiteYouTube from "./LiteYouTube"
-import FileLayout from "./FileLayout"
-import { Icon } from "@iconify/react"
+import { PressContext } from '@/contexts'
+import { cn } from '@/lib/utils'
+import LiteYouTube from './LiteYouTube'
+import FileLayout from './FileLayout'
+import { Icon } from '@iconify/react'
-export const Components: { [name: string]: React.JSX.Element | Function } = {
+export const Components: { [name: string]: React.ElementType } = {
Files,
Icon,
Iconify: Icon, // alias for portability with Vue Markdown
@@ -19,17 +19,35 @@ export const Components: { [name: string]: React.JSX.Element | Function } = {
Warning: ({ className, ...remaining }: AlertProps) => >()
+function lazyInclude(src: string, factory: any) {
+ if (!lazyIncludes.has(src)) lazyIncludes.set(src, lazy(factory))
+ return lazyIncludes.get(src)!
}
function Include({ src }: { src: string }) {
const press = React.useContext(PressContext)
const factory = (press.components as any).includes[src]
- const Component = lazy(factory ? factory : () => Promise.resolve(<>))
- return factory
- ? }>
- : }>
+ {/* oxlint-disable-next-line react/static-components -- cached per src in lazyIncludes */}
+
+ )
}
type AlertProps = {
@@ -54,17 +72,17 @@ type CopyLineProps = {
children?: ReactNode
}
function CopyLine({ className, icon, box, txt, children }: CopyLineProps) {
- let [copyClass, setCopyClass] = useState("")
+ let [copyClass, setCopyClass] = useState('')
function copy(e: MouseEvent) {
const div = e.currentTarget as HTMLDivElement
setCopyClass('copying')
- let $el = document.createElement("textarea")
+ let $el = document.createElement('textarea')
let text = (div.querySelector('code') || div.querySelector('p'))?.innerHTML ?? ''
$el.innerHTML = text
document.body.appendChild($el)
$el.select()
- document.execCommand("copy")
+ document.execCommand('copy')
document.body.removeChild($el)
setTimeout(() => setCopyClass(''), 3000)
}
@@ -72,16 +90,21 @@ function CopyLine({ className, icon, box, txt, children }: CopyLineProps) {
return (
@@ -115,7 +138,7 @@ function Files({ body }: { body?: string }) {
}
}
*/
- function parseFileStructure(ascii:string, indent:number = 2) {
+ function parseFileStructure(ascii: string, indent: number = 2) {
const lines = ascii.split('\n')
const root = { _: [] }
const stack = [root]
@@ -123,7 +146,7 @@ function Files({ body }: { body?: string }) {
for (const line of lines) {
const depth = line.search(/\S/) / indent
const name = line.trim()
- const parent:{[name:string]:any} = stack[depth]
+ const parent: { [name: string]: any } = stack[depth]
const isDir = name.startsWith('/')
if (isDir) {
@@ -138,15 +161,17 @@ function Files({ body }: { body?: string }) {
}
return root
}
-
+
const txt = body?.trim() || ''
const obj = parseFileStructure(txt)
return }> )
- : doc.preview
- ?
- : )
-}
\ No newline at end of file
+ return factory ? (
+ }>
+
+ ) : doc.preview ? (
+
+ ) : (
+
+ )
+}
diff --git a/MyApp.Client/src/components/Meta.tsx b/MyApp.Client/src/components/Meta.tsx
index 86ad96e..6c01604 100644
--- a/MyApp.Client/src/components/Meta.tsx
+++ b/MyApp.Client/src/components/Meta.tsx
@@ -1,12 +1,8 @@
-
export default () => {
- return (
- <>
-
-
-
- )
+ return (
+ <>
+
+
+
+ )
}
diff --git a/MyApp.Client/src/components/SrcLink.tsx b/MyApp.Client/src/components/SrcLink.tsx
index bd615e1..d21f718 100644
--- a/MyApp.Client/src/components/SrcLink.tsx
+++ b/MyApp.Client/src/components/SrcLink.tsx
@@ -1,18 +1,23 @@
-import React from "react";
-import { lastRightPart, combinePaths } from "@servicestack/client"
+import React from 'react'
+import { lastRightPart, combinePaths } from '@servicestack/client'
type SrcLink = {
- href:string
- iconSrc?:string
+ href: string
+ iconSrc?: string
children?: React.ReactNode
}
-export default ({ href, iconSrc, children } : SrcLink) => {
- const baseUrl = "https://github.com/NetCoreTemplates/react-spa/blob/main"
+export default ({ href, iconSrc, children }: SrcLink) => {
+ const baseUrl = 'https://github.com/NetCoreTemplates/react-spa/blob/main'
const url = href.includes('://') ? href : combinePaths(baseUrl, href)
const fileName = lastRightPart(href, '/')
- return iconSrc
- ? (
- 
{fileName})
- : (
- {children} {fileName})
+ return iconSrc ? (
+
+
+ {fileName}
+
+ ) : (
+
+ {children} {fileName}
+
+ )
}
diff --git a/MyApp.Client/src/components/SrcPage.tsx b/MyApp.Client/src/components/SrcPage.tsx
index cca7579..ae16d33 100644
--- a/MyApp.Client/src/components/SrcPage.tsx
+++ b/MyApp.Client/src/components/SrcPage.tsx
@@ -1,13 +1,13 @@
-import { combinePaths } from "@servicestack/client"
-import { Icon } from "@iconify/react"
-import SrcLink from "@/components/SrcLink"
+import { combinePaths } from '@servicestack/client'
+import { Icon } from '@iconify/react'
+import SrcLink from '@/components/SrcLink'
type Props = {
path: string
}
-export default ({ path }:Props) => (
-
+export default ({ path }: Props) => (
+
-)
\ No newline at end of file
+)
diff --git a/MyApp.Client/src/components/VideoGroup.tsx b/MyApp.Client/src/components/VideoGroup.tsx
index 5253562..3497851 100644
--- a/MyApp.Client/src/components/VideoGroup.tsx
+++ b/MyApp.Client/src/components/VideoGroup.tsx
@@ -1,10 +1,9 @@
-import LiteYouTube from "@/components/LiteYouTube"
-import MarkdownComponent from "@/components/MarkdownComponent"
-import { lastRightPart } from "@servicestack/client"
-import { useContext } from "react"
-import { PressContext } from "@/contexts"
-import { cn } from "@/lib/utils"
-
+import LiteYouTube from '@/components/LiteYouTube'
+import MarkdownComponent from '@/components/MarkdownComponent'
+import { lastRightPart } from '@servicestack/client'
+import { useContext } from 'react'
+import { PressContext } from '@/contexts'
+import { cn } from '@/lib/utils'
type Props = {
group: string
@@ -15,7 +14,6 @@ type Props = {
}
export default ({ group, title, background, summary, learnMore }: Props) => {
-
const press = useContext(PressContext)
const videos = press.videos[group]
@@ -27,46 +25,55 @@ export default ({ group, title, background, summary, learnMore }: Props) => {
return new Date(date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
}
- return (
-
+ const navClass = ({ isActive }: any) =>
+ ['p-4 flex items-center justify-start mw-full hover:text-sky-500 dark:hover:text-sky-400', isActive ? 'text-link-dark dark:text-link-dark' : ''].join(
+ ' ',
+ )
+
+ return (
+
+
-
+
-
+
+
+
+
+
+
-
- Include '{src}' not found
+ return factory ? (
+ Include '{src}' not found
+ )
}
diff --git a/MyApp.Client/src/components/Layout.tsx b/MyApp.Client/src/components/Layout.tsx
index e68ab08..4b8ec5b 100644
--- a/MyApp.Client/src/components/Layout.tsx
+++ b/MyApp.Client/src/components/Layout.tsx
@@ -1,24 +1,22 @@
-import Header from "./Header"
-import Footer from "./Footer"
-import Meta from "./Meta"
+import Header from './Header'
+import Footer from './Footer'
+import Meta from './Meta'
type Props = {
title?: string
children: React.ReactNode
}
-const Layout = ({title, children}: Props) => {
+const Layout = ({ title, children }: Props) => {
return (
<>
{!title ? null :
-
- {children}
-
+ {children}
-
+
)
}
diff --git a/MyApp.Client/src/components/LayoutArticle.tsx b/MyApp.Client/src/components/LayoutArticle.tsx
index bd2469f..a376c10 100644
--- a/MyApp.Client/src/components/LayoutArticle.tsx
+++ b/MyApp.Client/src/components/LayoutArticle.tsx
@@ -1,29 +1,27 @@
-import Header from "./Header"
-import Footer from "./Footer"
-import Meta from "./Meta"
+import Header from './Header'
+import Footer from './Footer'
+import Meta from './Meta'
type Props = {
title?: string
children: React.ReactNode
}
-const Layout = ({title, children}: Props) => {
+const Layout = ({ title, children }: Props) => {
return (
<>
{!title ? null : {title}
-
-
- {heading ?? title}
- {children} -
+
+ {heading ?? title}
+ {children} +Include '{src}' not found
+ if (!factory) return Include '{src}' not found
+ const Component = lazyInclude(src, factory)
+ return (
+
-
- {children}
-
+ {children}
-
+
-
-
-
{title}
-- {summary} - {learnMore - ? Learn more - : null} -
-
- {videos.map(video => (
-
-
-
-
- (initialState)
-export function ThemeProvider({
- children,
- defaultTheme = "system",
- storageKey = "color-scheme",
- ...props
-}: ThemeProviderProps) {
- const [theme, setTheme] = useState(
- () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
- )
-
- useEffect(() => {
- const root = window.document.documentElement
-
- root.classList.remove("light", "dark")
-
- if (theme === "system") {
- const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
- .matches
- ? "dark"
- : "light"
-
- root.classList.add(systemTheme)
- return
+export function ThemeProvider({ children, defaultTheme = 'system', storageKey = 'color-scheme', ...props }: ThemeProviderProps) {
+ const [theme, setTheme] = useState(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme)
+
+ useEffect(() => {
+ const root = window.document.documentElement
+
+ root.classList.remove('light', 'dark')
+
+ if (theme === 'system') {
+ const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+
+ root.classList.add(systemTheme)
+ return
+ }
+
+ root.classList.add(theme)
+ }, [theme])
+
+ const value = {
+ theme,
+ setTheme: (theme: Theme) => {
+ localStorage.setItem(storageKey, theme)
+ setTheme(theme)
+ },
}
- root.classList.add(theme)
- }, [theme])
-
- const value = {
- theme,
- setTheme: (theme: Theme) => {
- localStorage.setItem(storageKey, theme)
- setTheme(theme)
- },
- }
-
- return (
-
- {children}
-
- )
+ return (
+
+ {children}
+
+ )
}
export const useTheme = () => {
- const context = useContext(ThemeProviderContext)
+ const context = useContext(ThemeProviderContext)
- if (context === undefined)
- throw new Error("useTheme must be used within a ThemeProvider")
+ if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider')
- return context
+ return context
}
diff --git a/MyApp.Client/src/components/ui/accordion.tsx b/MyApp.Client/src/components/ui/accordion.tsx
index 9ecadf9..5b6dad3 100644
--- a/MyApp.Client/src/components/ui/accordion.tsx
+++ b/MyApp.Client/src/components/ui/accordion.tsx
@@ -1,56 +1,50 @@
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDownIcon } from 'lucide-react'
-import { cn } from "../../lib/utils"
+import { cn } from '../../lib/utils'
const Accordion = AccordionPrimitive.Root
-const AccordionItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- , React.ComponentPropsWithoutRef>(
+ ({ className, ...props }, ref) => (
+ ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, children, ...props }, ref) => (
-
- svg]:rotate-180 text-slate-900 dark:text-slate-100",
- className
- )}
- {...props}
- >
- {children}
-
-
+
+ svg]:rotate-180 text-slate-900 dark:text-slate-100',
+ className,
+ )}
+ {...props}
+ >
+ {children}
+
+
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
const AccordionContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, children, ...props }, ref) => (
-
-
+
+
))
AccordionContent.displayName = AccordionPrimitive.Content.displayName
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
-
diff --git a/MyApp.Client/src/components/ui/alert.tsx b/MyApp.Client/src/components/ui/alert.tsx
index a55149d..a2baef2 100644
--- a/MyApp.Client/src/components/ui/alert.tsx
+++ b/MyApp.Client/src/components/ui/alert.tsx
@@ -1,60 +1,36 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from "../../lib/utils"
+import { cn } from '../../lib/utils'
const alertVariants = cva(
- "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
- {
- variants: {
- variant: {
- default: "bg-background text-foreground",
- destructive:
- "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
- },
+ 'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+ {
+ variants: {
+ variant: {
+ default: 'bg-background text-foreground',
+ destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ },
},
- defaultVariants: {
- variant: "default",
- },
- }
)
-const Alert = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes & VariantProps
->(({ className, variant, ...props }, ref) => (
-
-))
-Alert.displayName = "Alert"
+const Alert = React.forwardRef & VariantProps>(
+ ({ className, variant, ...props }, ref) => ,
+)
+Alert.displayName = 'Alert'
-const AlertTitle = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
+const AlertTitle = React.forwardRef>(({ className, ...props }, ref) => (
+
))
-AlertTitle.displayName = "AlertTitle"
+AlertTitle.displayName = 'AlertTitle'
-const AlertDescription = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
+const AlertDescription = React.forwardRef>(({ className, ...props }, ref) => (
+
))
-AlertDescription.displayName = "AlertDescription"
+AlertDescription.displayName = 'AlertDescription'
export { Alert, AlertTitle, AlertDescription }
-
diff --git a/MyApp.Client/src/components/ui/badge.tsx b/MyApp.Client/src/components/ui/badge.tsx
index d8e6db3..161ee33 100644
--- a/MyApp.Client/src/components/ui/badge.tsx
+++ b/MyApp.Client/src/components/ui/badge.tsx
@@ -1,37 +1,29 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from "../../lib/utils"
+import { cn } from '../../lib/utils'
const badgeVariants = cva(
- "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
- {
- variants: {
- variant: {
- default:
- "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
- secondary:
- "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
- destructive:
- "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
- outline: "border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100",
- },
+ 'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+ {
+ variants: {
+ variant: {
+ default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+ secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+ destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+ outline: 'border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ },
},
- defaultVariants: {
- variant: "default",
- },
- }
)
-export interface BadgeProps
- extends React.HTMLAttributes,
- VariantProps {}
+export interface BadgeProps extends React.HTMLAttributes, VariantProps {}
function Badge({ className, variant, ...props }: BadgeProps) {
- return (
-
- )
+ return
}
export { Badge, badgeVariants }
-
diff --git a/MyApp.Client/src/components/ui/button.tsx b/MyApp.Client/src/components/ui/button.tsx
index e7c88cb..fb48ed7 100644
--- a/MyApp.Client/src/components/ui/button.tsx
+++ b/MyApp.Client/src/components/ui/button.tsx
@@ -1,58 +1,44 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from "../../lib/utils"
+import { cn } from '../../lib/utils'
const buttonVariants = cva(
- "inline-flex items-center justify-center gap-2 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
- {
- variants: {
- variant: {
- default:
- "bg-primary text-primary-foreground shadow hover:bg-primary/90",
- destructive:
- "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
- outline:
- "border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 shadow-sm hover:bg-slate-50 dark:hover:bg-slate-700 hover:text-slate-900 dark:hover:text-slate-100",
- secondary:
- "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
- ghost: "text-gray-700 dark:text-gray-300 hover:bg-accent hover:text-accent-foreground",
- 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",
- },
+ 'inline-flex items-center justify-center gap-2 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+ {
+ variants: {
+ variant: {
+ default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+ destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+ outline:
+ 'border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 shadow-sm hover:bg-slate-50 dark:hover:bg-slate-700 hover:text-slate-900 dark:hover:text-slate-100',
+ secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+ ghost: 'text-gray-700 dark:text-gray-300 hover:bg-accent hover:text-accent-foreground',
+ 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: {
+ variant: 'default',
+ size: 'default',
+ },
},
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- }
)
-export interface ButtonProps
- extends React.ButtonHTMLAttributes,
- VariantProps {
- asChild?: boolean
+export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps {
+ asChild?: boolean
}
-const Button = React.forwardRef(
- ({ className, variant, size, asChild = false, ...props }, ref) => {
- const Comp = asChild ? Slot : "button"
- return (
- (({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : 'button'
+ return
->(({ className, ...props }, ref) => (
-
+const Card = React.forwardRef>(({ className, ...props }, ref) => (
+
))
-Card.displayName = "Card"
+Card.displayName = 'Card'
-const CardHeader = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
+const CardHeader = React.forwardRef>(({ className, ...props }, ref) => (
+
))
-CardHeader.displayName = "CardHeader"
+CardHeader.displayName = 'CardHeader'
-const CardTitle = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
+const CardTitle = React.forwardRef>(({ className, ...props }, ref) => (
+
))
-CardTitle.displayName = "CardTitle"
+CardTitle.displayName = 'CardTitle'
-const CardDescription = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
+const CardDescription = React.forwardRef>(({ className, ...props }, ref) => (
+
))
-CardDescription.displayName = "CardDescription"
+CardDescription.displayName = 'CardDescription'
-const CardContent = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
+const CardContent = React.forwardRef>(({ className, ...props }, ref) => (
+
))
-CardContent.displayName = "CardContent"
+CardContent.displayName = 'CardContent'
-const CardFooter = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
+const CardFooter = React.forwardRef>(({ className, ...props }, ref) => (
+
))
-CardFooter.displayName = "CardFooter"
+CardFooter.displayName = 'CardFooter'
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
-
diff --git a/MyApp.Client/src/components/ui/dialog.tsx b/MyApp.Client/src/components/ui/dialog.tsx
index c23630e..b322c7e 100644
--- a/MyApp.Client/src/components/ui/dialog.tsx
+++ b/MyApp.Client/src/components/ui/dialog.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
const Dialog = DialogPrimitive.Root
@@ -12,109 +12,64 @@ const DialogPortal = DialogPrimitive.Portal
const DialogClose = DialogPrimitive.Close
-const DialogOverlay = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- , React.ComponentPropsWithoutRef>(
+ ({ className, ...props }, ref) => (
+ ,
- React.ComponentPropsWithoutRef
->(({ className, children, ...props }, ref) => (
-
-
- {children}
-
-
-
-
-))
+const DialogContent = React.forwardRef, React.ComponentPropsWithoutRef>(
+ ({ className, children, ...props }, ref) => (
+
+
+ {children}
+
+
+
+
+ ),
+)
DialogContent.displayName = DialogPrimitive.Content.displayName
-const DialogHeader = ({
- className,
- ...props
-}: React.HTMLAttributes) => (
-
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (
+
)
-DialogHeader.displayName = "DialogHeader"
+DialogHeader.displayName = 'DialogHeader'
-const DialogFooter = ({
- className,
- ...props
-}: React.HTMLAttributes) => (
-
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (
+
)
-DialogFooter.displayName = "DialogFooter"
+DialogFooter.displayName = 'DialogFooter'
-const DialogTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- , React.ComponentPropsWithoutRef>(
+ ({ className, ...props }, ref) => (
+ ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => ) {
- return ) {
- return (
- ) {
- return (
- ) {
- return (
-
-
- )
-}
-
-function DropdownMenuGroup({
- ...props
-}: React.ComponentProps) {
- return (
- ) {
+ return ) {
+ return ) {
+ return ) {
+ return (
+
+
+ )
+}
+
+function DropdownMenuGroup({ ...props }: React.ComponentProps) {
+ return & {
- inset?: boolean
- variant?: "default" | "destructive"
+ inset?: boolean
+ variant?: 'default' | 'destructive'
}) {
- return (
- ) {
- return (
-
-
-
-
-
- {children}
-
- )
-}
-
-function DropdownMenuRadioGroup({
- ...props
-}: React.ComponentProps) {
- return (
- ) {
- return (
-
-
-
-
-
- {children}
-
- )
+ return (
+ ) {
+ return (
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function DropdownMenuRadioGroup({ ...props }: React.ComponentProps) {
+ return ) {
+ return (
+
+
+
+
+
+ {children}
+
+ )
}
function DropdownMenuLabel({
- className,
- inset,
- ...props
+ className,
+ inset,
+ ...props
}: React.ComponentProps & {
- inset?: boolean
+ inset?: boolean
}) {
- return (
- ) {
- return (
- ) {
- return ) {
+ return ) {
+ return & {
- inset?: boolean
+ inset?: boolean
}) {
- return (
-
- {children}
-
- )
-}
-
-function DropdownMenuSubContent({
- className,
- ...props
-}: React.ComponentProps) {
- return (
-
+ {children}
+
+ )
+}
+
+function DropdownMenuSubContent({ className, ...props }: React.ComponentProps) {
+ return (
+ ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- , React.ComponentPropsWithoutRef>(
+ ({ className, ...props }, ref) => (
+ ,
- VariantProps {}
+interface SheetContentProps extends React.ComponentPropsWithoutRef, VariantProps {}
-const SheetContent = React.forwardRef<
- React.ElementRef,
- SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
-
-
- {children}
-
-
-
-
-))
+const SheetContent = React.forwardRef, SheetContentProps>(
+ ({ side = 'right', className, children, ...props }, ref) => (
+
+
+ {children}
+
+
+
+
+ ),
+)
SheetContent.displayName = SheetPrimitive.Content.displayName
-const SheetHeader = ({
- className,
- ...props
-}: React.HTMLAttributes) => (
-
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => (
+
)
-SheetHeader.displayName = "SheetHeader"
+SheetHeader.displayName = 'SheetHeader'
-const SheetFooter = ({
- className,
- ...props
-}: React.HTMLAttributes) => (
-
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes) => (
+
)
-SheetFooter.displayName = "SheetFooter"
+SheetFooter.displayName = 'SheetFooter'
-const SheetTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- , React.ComponentPropsWithoutRef>(
+ ({ className, ...props }, ref) => ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) =>
->(({ className, ...props }, ref) => (
- >(({ className, ...props }, ref) => (
+
->(({ className, ...props }, ref) => (
-
+const TableHeader = React.forwardRef>(({ className, ...props }, ref) => (
+
))
-TableHeader.displayName = "TableHeader"
+TableHeader.displayName = 'TableHeader'
-const TableBody = React.forwardRef<
- HTMLTableSectionElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
+const TableBody = React.forwardRef>(({ className, ...props }, ref) => (
+
))
-TableBody.displayName = "TableBody"
+TableBody.displayName = 'TableBody'
-const TableFooter = React.forwardRef<
- HTMLTableSectionElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
- tr]:last:border-b-0",
- className
- )}
- {...props}
- />
+const TableFooter = React.forwardRef>(({ className, ...props }, ref) => (
+ tr]:last:border-b-0', className)} {...props} />
))
-TableFooter.displayName = "TableFooter"
+TableFooter.displayName = 'TableFooter'
-const TableRow = React.forwardRef<
- HTMLTableRowElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
- >(({ className, ...props }, ref) => (
+
->(({ className, ...props }, ref) => (
- >(({ className, ...props }, ref) => (
+
->(({ className, ...props }, ref) => (
- >(({ className, ...props }, ref) => (
+
->(({ className, ...props }, ref) => (
- >(({ className, ...props }, ref) => (
+ ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- , React.ComponentPropsWithoutRef>(
+ ({ className, ...props }, ref) => (
+ ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- , React.ComponentPropsWithoutRef>(
+ ({ className, ...props }, ref) => (
+ ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
- , React.ComponentPropsWithoutRef>(
+ ({ className, ...props }, ref) => (
+ redirecting ...
+ return redirecting ...
}
type ValidateAuthProps = {
- role?: string
- permission?: string
- redirectTo?: string
+ role?: string
+ permission?: string
+ redirectTo?: string
}
-export function ValidateAuth(Component:React.FC, validateProps? :ValidateAuthProps) {
+export function ValidateAuth(Component: React.FC, validateProps?: ValidateAuthProps) {
let { role, permission, redirectTo } = validateProps ?? {}
- const compWithProps: React.FC = (props) => {
+ const ValidatedComponent: React.FC = (props) => {
const navigate = useNavigate()
const location = useLocation()
const authProps = useAuth()
const { user, isAuthenticated, hasRole } = authProps
+
+ redirectTo ??= location.pathname
+
+ const shouldRedirect = () =>
+ !isAuthenticated
+ ? Routes.signin(redirectTo)
+ : role && !hasRole(role)
+ ? Routes.forbidden()
+ : permission && !hasRole(permission)
+ ? Routes.forbidden()
+ : null
+
useEffect(() => {
const goTo = shouldRedirect()
if (goTo) {
@@ -31,16 +43,6 @@ export function ValidateAuth(Component:React.FC !isAuthenticated
- ? Routes.signin(redirectTo)
- : role && !hasRole(role)
- ? Routes.forbidden()
- : permission && !hasRole(permission)
- ? Routes.forbidden()
- : null;
-
if (shouldRedirect()) {
return (Component:React.FC(fn: () => IReturn | string) {
- return useSWR(() => {
- let request = fn()
- return appendQueryString(`SwrClient:${nameOf(request)}`, request)
- }, _ => this.client.get(fn()))
+ // oxlint-disable-next-line react/rules-of-hooks
+ return useSWR(
+ () => {
+ let request = fn()
+ return appendQueryString(`SwrClient:${nameOf(request)}`, request)
+ },
+ () => this.client.get(fn()),
+ )
}
}
-export const swrClient = new SwrClient(client)
\ No newline at end of file
+export const swrClient = new SwrClient(client)
diff --git a/MyApp.Client/src/lib/utils.test.ts b/MyApp.Client/src/lib/utils.test.ts
new file mode 100644
index 0000000..bb6f8ab
--- /dev/null
+++ b/MyApp.Client/src/lib/utils.test.ts
@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vite-plus/test'
+import { cn, generateSlug } from './utils'
+import { getRedirect, isServerRoute } from './gateway'
+
+describe('cn', () => {
+ it('merges conflicting tailwind classes', () => {
+ expect(cn('p-2 text-sm', 'p-4')).toBe('text-sm p-4')
+ })
+
+ it('ignores falsy values', () => {
+ expect(cn('a', false, null, undefined, 'c')).toBe('a c')
+ })
+})
+
+describe('generateSlug', () => {
+ it('creates url-friendly slugs', () => {
+ expect(generateSlug('Hello World')).toBe('hello-world')
+ expect(generateSlug(' .NET 10 & Vite+ ')).toBe('net-10-vite')
+ expect(generateSlug('snake_case--name-')).toBe('snake-case-name')
+ })
+})
+
+describe('gateway', () => {
+ it('detects server routes', () => {
+ expect(isServerRoute('/Identity/Account/Login')).toBe(true)
+ expect(isServerRoute('/profile')).toBe(false)
+ })
+
+ it('reads redirect from search params', () => {
+ expect(getRedirect(new URLSearchParams('redirect=/profile'))).toBe('/profile')
+ expect(getRedirect(new URLSearchParams())).toBeNull()
+ })
+})
diff --git a/MyApp.Client/src/lib/utils.ts b/MyApp.Client/src/lib/utils.ts
index 359b786..e750aa3 100644
--- a/MyApp.Client/src/lib/utils.ts
+++ b/MyApp.Client/src/lib/utils.ts
@@ -1,28 +1,28 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
-export function generateSlug(str:string) {
- return str
- .normalize('NFKD') // normalize() with NFKD returns Unicode Normalization Form
- .toLowerCase()
- .trim()
- .replace(/\s+/g, '-') // Replace spaces with -
- .replace(/[^\w\-]+/g, '') // Remove all non-word chars
- .replace(/\_/g,'-') // Replace _ with -
- .replace(/\-\-+/g, '-') // Replace multiple - with single -
- .replace(/\-$/g, ''); // Remove trailing -
+export function generateSlug(str: string) {
+ return str
+ .normalize('NFKD') // normalize() with NFKD returns Unicode Normalization Form
+ .toLowerCase()
+ .trim()
+ .replace(/\s+/g, '-') // Replace spaces with -
+ .replace(/[^\w-]+/g, '') // Remove all non-word chars
+ .replace(/_/g, '-') // Replace _ with -
+ .replace(/--+/g, '-') // Replace multiple - with single -
+ .replace(/-$/g, '') // Remove trailing -
}
-export function dateLabel(date:any) {
- return new Date(date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
+export function dateLabel(date: any) {
+ return new Date(date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
}
-export function dateTimestamp(date:any) {
- try {
- return new Date(date).toISOString()
- } catch (e) {
- return '2000-01-01T00:00:00.000Z'
- }
+export function dateTimestamp(date: any) {
+ try {
+ return new Date(date).toISOString()
+ } catch {
+ return '2000-01-01T00:00:00.000Z'
+ }
}
export function cn(...inputs: ClassValue[]) {
- return twMerge(clsx(inputs))
+ return twMerge(clsx(inputs))
}
diff --git a/MyApp.Client/src/main.tsx b/MyApp.Client/src/main.tsx
index f99155e..1b9e1c2 100644
--- a/MyApp.Client/src/main.tsx
+++ b/MyApp.Client/src/main.tsx
@@ -2,26 +2,26 @@ import '@/styles/index.css'
import '@/styles/main.css'
import 'react/jsx-runtime'
import Layout from '@/components/Layout'
-import { Loading, ClientContext, setLinkComponent } from "@servicestack/react"
+import { Loading, ClientContext, setLinkComponent } from '@servicestack/react'
-import { ThemeProvider } from "@/components/theme-provider"
+import { ThemeProvider } from '@/components/theme-provider'
import { forwardRef, StrictMode, Suspense, useEffect } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter as Router, useRoutes, useLocation, Link, LinkProps } from 'react-router-dom'
import routes from '~react-pages'
-import press from "virtual:press"
+import press from 'virtual:press'
import { PressContext } from './contexts'
-import { client, init, isServerRoute } from "@/lib/gateway"
+import { client, init, isServerRoute } from '@/lib/gateway'
// Custom Link that forces full page redirect for /Identity paths
const AppLink = forwardRef(({ to, ...props }, ref) => {
- const path = typeof to === 'string' ? to : to.pathname ?? ''
- if (isServerRoute(path)) {
- return
- }
- return
+ const path = typeof to === 'string' ? to : (to.pathname ?? '')
+ if (isServerRoute(path)) {
+ return
+ }
+ return
})
// Configure the library to use our custom Link component
@@ -29,12 +29,16 @@ setLinkComponent(AppLink)
init().then(() => {
function App() {
return (
-
+
-
- {useRoutes(routes)}
-
+ {useRoutes(routes)}
@@ -42,18 +46,18 @@ init().then(() => {
}
function ScrollToTop() {
- const { pathname } = useLocation();
+ const { pathname } = useLocation()
useEffect(() => {
- window.scrollTo(0, 0);
- }, [pathname]);
- return null;
+ window.scrollTo(0, 0)
+ }, [pathname])
+ return null
}
- createRoot(document.getElementById('root')!).render(
-
-
-
- ,
- )
-})
\ No newline at end of file
+ createRoot(document.getElementById('root')!).render(
+
+
+
+ ,
+ )
+})
diff --git a/MyApp.Client/src/pages/admin.tsx b/MyApp.Client/src/pages/admin.tsx
index db120b5..fa694c6 100644
--- a/MyApp.Client/src/pages/admin.tsx
+++ b/MyApp.Client/src/pages/admin.tsx
@@ -1,21 +1,31 @@
-import { SecondaryButton } from "@servicestack/react"
-import { Icon } from "@iconify/react"
-import Page from "@/components/LayoutPage"
-import { ValidateAuth, appAuth } from "@/lib/auth"
+import { SecondaryButton } from '@servicestack/react'
+import { Icon } from '@iconify/react'
+import Page from '@/components/LayoutPage'
+import { ValidateAuth, appAuth } from '@/lib/auth'
-function Admin () {
+function Admin() {
const { user, signOut } = appAuth()
- return (
-
-
- {video.tags.map(tag =>
- (
- {tag}
- ))}
-
-
-
)
+ )
}
diff --git a/MyApp.Client/src/components/theme-provider.tsx b/MyApp.Client/src/components/theme-provider.tsx
index 31e6c42..a506645 100644
--- a/MyApp.Client/src/components/theme-provider.tsx
+++ b/MyApp.Client/src/components/theme-provider.tsx
@@ -1,73 +1,62 @@
-import { createContext, useContext, useEffect, useState } from "react"
+import { createContext, useContext, useEffect, useState } from 'react'
-type Theme = "dark" | "light" | "system"
+type Theme = 'dark' | 'light' | 'system'
type ThemeProviderProps = {
- children: React.ReactNode
- defaultTheme?: Theme
- storageKey?: string
+ children: React.ReactNode
+ defaultTheme?: Theme
+ storageKey?: string
}
type ThemeProviderState = {
- theme: Theme
- setTheme: (theme: Theme) => void
+ theme: Theme
+ setTheme: (theme: Theme) => void
}
const initialState: ThemeProviderState = {
- theme: "system",
- setTheme: () => null,
+ theme: 'system',
+ setTheme: () => null,
}
const ThemeProviderContext = createContext- - {video.title} - -
-
-
-
-
+
+
+
- ))}
+
+ ))}
+ {title}
++ {summary} + {learnMore ? ( + + Learn more + + ) : null} +
+
+ {videos.map((video) => (
+
+
-
+
+
+
-
+
+ {video.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+
+ {video.title} +
+
+
+
+ {children}
- {children}
+
-
-
+const Table = React.forwardRef
+
+
))
-Table.displayName = "Table"
+Table.displayName = 'Table'
-const TableHeader = React.forwardRef<
- HTMLTableSectionElement,
- React.HTMLAttributes
-
-
{user!.displayName}
- {user!.userName}
-
- {(user!.roles || []).map(role =>
- {role})}
+ return (
+
+ Sign Out
-
- )
+
+ )
}
-export default ValidateAuth(Admin, { role: "Admin" })
+export default ValidateAuth(Admin, { role: 'Admin' })
diff --git a/MyApp.Client/src/pages/blog.tsx b/MyApp.Client/src/pages/blog.tsx
index a4eb9ca..b31e4b3 100644
--- a/MyApp.Client/src/pages/blog.tsx
+++ b/MyApp.Client/src/pages/blog.tsx
@@ -1,20 +1,17 @@
-import { Link } from "react-router-dom"
-import Layout from "@/components/Layout"
-import SrcPage from "@/components/SrcPage"
-import FollowLinks from "@/components/FollowLinks"
-import { useContext } from "react"
-import { PressContext } from "@/contexts"
-import { generateSlug, dateLabel, dateTimestamp } from "@/lib/utils"
-
+import { Link } from 'react-router-dom'
+import Layout from '@/components/Layout'
+import SrcPage from '@/components/SrcPage'
+import FollowLinks from '@/components/FollowLinks'
+import { useContext } from 'react'
+import { PressContext } from '@/contexts'
+import { generateSlug, dateLabel, dateTimestamp } from '@/lib/utils'
export default () => {
const press = useContext(PressContext)
const title = press.blog.config.blogTitle
function authorLink(name: any) {
- return name && press.blog.authors.some((x: any) => x.name.toLowerCase() == name.toLowerCase())
- ? `/posts/author/${generateSlug(name)}`
- : null
+ return name && press.blog.authors.some((x: any) => x.name.toLowerCase() == name.toLowerCase()) ? `/posts/author/${generateSlug(name)}` : null
}
function postLink(post: any) {
@@ -26,7 +23,7 @@ export default () => {
}
function authorProfileUrl(name: string) {
- return author(name)?.profileUrl ?? "/img/profiles/user1.svg"
+ return author(name)?.profileUrl ?? '/img/profiles/user1.svg'
}
const posts = press.blog.posts
@@ -35,164 +32,192 @@ export default () => {
const gridPosts = posts.slice(1, 7)
const remainingPosts = posts.slice(7, 22)
- return (<>
-
+
+ Sign Out
+
- {user!.displayName}
+ {user!.userName}
+
+ {(user!.roles || []).map((role) => (
+
+ {role}
+
+ ))}
+
+
- {!primaryPost ? null : (
- )}
-
- {!gridPosts.length ? null : (
-
-
-
-
- 
-
-
-
-
-
-
- - {primaryPost.title} -
-
-
-
-
- })
- {postAuthor}
- )
- : (
-
- {postAuthor}
- )}
-
- {primaryPost.summary}
- {authorLink(primaryPost.author) - ? ( -More from the - blog
-
- {gridPosts.map(post =>
-
-
-
-
-
-
-
-
+
- Article -
- -{post.title}
-{post.summary}
+ return ( + <> +
+ {!primaryPost ? null : (
+
+ )}
+
+ )}
- {!remainingPosts.length ? null : (
-
+
-
+
+
-
-
)}
-
-
- {post.author}
-
-
-
-
-
+ - {authorLink(post.author) - ? {post.author} - : {post.author}} -
-
-
-
- {post.minutesToRead} min read
-
+
+
-
+
+ + + {primaryPost.title} + +
+
+
+
+ {postAuthor}
+
+ ) : (
+
+
+ {postAuthor}
+
+ )}
+
{primaryPost.summary}
+ {authorLink(primaryPost.author) ? ( + +
-
- {remainingPosts.map(post => (
-
-
-
-
{post.title}
-{post.summary}
- -
-
+
-
- {post.author}
-
-
+ {!gridPosts.length ? null : (
+
+
+ )}
+
+ More from the blog
+
+ {gridPosts.map((post) => (
+
-
+
))}
- {remainingPosts.length >= 15
- ?
+
+
+
+
+
+
-
+
- Article
+ +{post.title}
+{post.summary}
+
-
- - {authorLink(post.author) - ? {post.author} - : {post.author}} -
-
-
-
- {post.minutesToRead} min read
+
+
+
+ {post.author}
+
+
+
+
+
+ {authorLink(post.author) ? ( + + {post.author} + + ) : ( + {post.author} + )} +
+
+
+
+ {post.minutesToRead} min read
+
-
-
-
-
-
- view all posts
-
: null}
-
-
-
-
+
- )}
-
-
- MyApp
-
-
- MyApp
-
-
+
+ )}
+
+ {!remainingPosts.length ? null : (
+ I’m Spencer Sharp. I live in New York City, where I - design the future.
- more - information + ))} +
+
-
+ {remainingPosts.map((post) => (
+
-
+
+ ))}
+ {remainingPosts.length >= 15 ? (
+
+ ) : null}
+
+
+
+
+ {post.title}
+{post.summary}
+ +
+
+
+
+ {post.author}
+
+
+
+
+
+ + {authorLink(post.author) ? ( + + {post.author} + + ) : ( + {post.author} + )} +
+
+
+
+ {post.minutesToRead} min read
+
+
+
+
+
+
+
-
-
+
+
+
+ MyApp
+
+
+ MyApp
+
+
+ I’m Spencer Sharp. I live in New York City, where I design the future.
+ + more information + +
+
+
-
-
- )
-}
\ No newline at end of file
+
+
+
+
+ )
+}
diff --git a/MyApp.Client/src/pages/bookings-auto.tsx b/MyApp.Client/src/pages/bookings-auto.tsx
index 05a9723..f7201bd 100644
--- a/MyApp.Client/src/pages/bookings-auto.tsx
+++ b/MyApp.Client/src/pages/bookings-auto.tsx
@@ -1,34 +1,31 @@
-import Page from "@/components/LayoutPage"
-import { ValidateAuth } from "@/lib/auth"
+import Page from '@/components/LayoutPage'
+import { ValidateAuth } from '@/lib/auth'
-import SrcPage from "@/components/SrcPage"
-import { AutoQueryGrid } from "@servicestack/react"
-import BookingsInfo from "@/components/BookingsInfo.tsx"
-import { Link } from "react-router-dom"
+import SrcPage from '@/components/SrcPage'
+import { AutoQueryGrid } from '@servicestack/react'
+import BookingsInfo from '@/components/BookingsInfo.tsx'
+import { Link } from 'react-router-dom'
function Index() {
+ return (
+
+
+ View Custom Bookings →
+
+
+
+
-
- )
+
+ return (
+
+
-
- View Custom Bookings →
-
-
-
-
-
-
-
-
-
+
+
+ ← View Auto Bookings
+
+
-
-
- ← View Auto Bookings
-
-
+
+ ,
+ name: ({ name }: any) => <>{name},
+ cost: ({ cost }: any) => ,
+ createdBy: ({ createdBy }: any) => ,
+ }}
+ headerSlots={{
+ 'roomNumber-header': () => (
+ <>
+ Room No
+
+ ),
+ 'bookingStartDate-header': () => (
+ <>
+ Start Date
+
+ ),
+ 'bookingEndDate-header': () => (
+ <>
+ End Date
+
+ ),
+ 'createdBy-header': () => <>Employee,
+ }}
+ />
-
-
+ setCount(count + 1)}>Click me
+ setCount(count + 1)}>Click me
- )
+
+ )
}
diff --git a/MyApp.Client/src/pages/error.tsx b/MyApp.Client/src/pages/error.tsx
index 19adbaa..92f09d0 100644
--- a/MyApp.Client/src/pages/error.tsx
+++ b/MyApp.Client/src/pages/error.tsx
@@ -1,17 +1,18 @@
-import { useSearchParams } from "react-router-dom"
+import { useSearchParams } from 'react-router-dom'
export default () => {
const [query, _] = useSearchParams()
const message = query.get('message') ?? 'Unknown error'
- return (<>
-
- (
-
- ),
- name: ({ name }: any) => <>{name},
- cost: ({ cost }: any) => (
-
- ),
- createdBy: ({ createdBy }: any) => (
-
- ),
- }}
- headerSlots={{
- 'roomNumber-header': () => (
- <>Room No
- ),
- 'bookingStartDate-header': () => (
- <>Start Date
- ),
- 'bookingEndDate-header': () => (
- <>End Date
- ),
- 'createdBy-header': () => <>Employee
- }}
- />
-
-
-
-
-
-
+
Current count: {count}
+ return ( +Current count: {count}
-
-
-
+
+
-
-
-
-
+
)
}
diff --git a/MyApp.Client/src/pages/forbidden.tsx b/MyApp.Client/src/pages/forbidden.tsx
index 16c6a8a..4df6d7c 100644
--- a/MyApp.Client/src/pages/forbidden.tsx
+++ b/MyApp.Client/src/pages/forbidden.tsx
@@ -1,13 +1,14 @@
export default () => {
- return (<>
- {message}
+ return ( + <> +
+
-
+
+
{message}
+
-
-
@@ -73,48 +68,57 @@ const Index = () => {
403
-
-
-
+
)
}
diff --git a/MyApp.Client/src/pages/index.tsx b/MyApp.Client/src/pages/index.tsx
index 6574d3b..98c63e4 100644
--- a/MyApp.Client/src/pages/index.tsx
+++ b/MyApp.Client/src/pages/index.tsx
@@ -1,15 +1,15 @@
-import { Link } from "react-router-dom"
-import { Icon } from "@iconify/react"
+import { Link } from 'react-router-dom'
+import { Icon } from '@iconify/react'
import { GettingStarted, AutoUis, ReactLogo } from 'react-net-templates'
-import Layout from "@/components/Layout"
-import Include from "@/components/Include"
-import VideoGroup from "@/components/VideoGroup"
-import LiteYouTube from "@/components/LiteYouTube"
-import SrcPage from "@/components/SrcPage"
-import { generateSlug, dateLabel, dateTimestamp } from "@/lib/utils"
-import { PressContext } from "@/contexts"
-import { useContext } from "react"
-import FeatureLinks from "@/components/FeatureLinks"
+import Layout from '@/components/Layout'
+import Include from '@/components/Include'
+import VideoGroup from '@/components/VideoGroup'
+import LiteYouTube from '@/components/LiteYouTube'
+import SrcPage from '@/components/SrcPage'
+import { generateSlug, dateLabel, dateTimestamp } from '@/lib/utils'
+import { PressContext } from '@/contexts'
+import { useContext } from 'react'
+import FeatureLinks from '@/components/FeatureLinks'
const Index = () => {
const press = useContext(PressContext)
@@ -18,9 +18,7 @@ const Index = () => {
const postAuthor = primaryPost.author
function authorLink(name: any) {
- return name && press.blog.authors.some((x: any) => x.name.toLowerCase() == name.toLowerCase())
- ? `/posts/author/${generateSlug(name)}`
- : null
+ return name && press.blog.authors.some((x: any) => x.name.toLowerCase() == name.toLowerCase()) ? `/posts/author/${generateSlug(name)}` : null
}
function postLink(post: any) {
return `/posts/${post.slug}`
@@ -29,7 +27,7 @@ const Index = () => {
return name ? press.blog.authors.filter((x: any) => x.name.toLowerCase() == name.toLowerCase())[0] : null
}
function authorProfileUrl(name: string) {
- return author(name)?.profileUrl ?? "/img/profiles/user1.svg"
+ return author(name)?.profileUrl ?? '/img/profiles/user1.svg'
}
return (
@@ -45,8 +43,10 @@ const Index = () => {
You do not have access to this page.
+ return ( + <> +
+
-
+
403
+
+
You do not have access to this page.
+
-
+
React Component Gallery
@@ -56,14 +56,9 @@ const Index = () => {
-
- Getting Started -
+Getting Started
-
- {!primaryPost ? null :
-
{title}
- {post ? (<>
-
-
-
-
-
-
-
-
-
-
-
@@ -128,9 +132,7 @@ const Index = () => {
- {primaryPost.title} -
-
-
+ {!primaryPost ? null : (
+
+ }
+
+ )}
+
-
+
+
+
-
- {postAuthor}
-
- :
-
- {postAuthor}
- }
+
- {primaryPost.summary}
- {authorLink(primaryPost.author) - ? -
+
-
+
+ + + {primaryPost.title} + +
+
+
+
+
+
+ {postAuthor}
+
+ ) : (
+
+
+ {postAuthor}
+
+ )}
+
{primaryPost.summary}
+ {authorLink(primaryPost.author) ? ( + +
-
- Opinionated React template for a productive out-of-the-box development UX
-
+ Opinionated React template for a productive out-of-the-box development UX
-
-
- {post.title} -
-
-
- {authorHref
- ? 
- : }
+ {post ? (
+ <>
+
+
+
- + {post.title} +
+
+
-
+ {authorHref ? (
+
+
+
+ ) : (
+
+ )}
- {!author ? null : (
-
- {authorHref
- ? {post.author}
- : {post.author}}
-
)}
-
-
-
-
+ {!author ? null : (
+
+ {authorHref ? (
+
+ {post.author}
+
+ ) : (
+ {post.author}
+ )}
+
+ )}
+
-
-
- {post.tags.map(tag =>
- {tag})}
+
- {!author || !authorPosts.length ? null :
- (
+
-
+
- {!post.date ? null :
-
-
-
-
- {post.wordCount} min read
+
+
+
+
}
-
+ {!post.date ? null : (
+
+ {post.tags.map((tag) => (
+
+ {tag}
+
+ ))}
-
+
+ )}
+
+
+
+ {post.wordCount} min read
+
+
-
+
+
-
-
-
+
-
+
-
-
-
- {authorHref
- ?
- : }
+ {!author || !authorPosts.length ? null : (
+
+
+
+
+ {authorHref ? (
+
+
+
+ ) : (
+
+ )}
-
-
- Written by {author.name}
+
- Written by {author.name}
+ {author.bio}
- {author.bio}
+
-
+
-
-
-
{title}
- {selectedTag
- ?
)
}
diff --git a/MyApp.Client/src/pages/posts/year/[year].tsx b/MyApp.Client/src/pages/posts/year/[year].tsx
index e93d99e..1e88efd 100644
--- a/MyApp.Client/src/pages/posts/year/[year].tsx
+++ b/MyApp.Client/src/pages/posts/year/[year].tsx
@@ -1,19 +1,19 @@
-import { Link } from "react-router-dom"
-import Layout from "@/components/Layout"
-import BlogTitle from "@/components/BlogTitle"
-import BlogPosts from "@/components/BlogPosts"
-import { ErrorSummary } from "@servicestack/react"
+import { Link } from 'react-router-dom'
+import Layout from '@/components/Layout'
+import BlogTitle from '@/components/BlogTitle'
+import BlogPosts from '@/components/BlogPosts'
+import { ErrorSummary } from '@servicestack/react'
-import { useContext } from "react"
-import { useParams } from "react-router-dom"
-import { PressContext } from "@/contexts"
+import { useContext } from 'react'
+import { useParams } from 'react-router-dom'
+import { PressContext } from '@/contexts'
export default () => {
const press = useContext(PressContext)
const forYear = parseInt(useParams().year ?? '')
const title = `${forYear} posts`
const allPosts = press.blog.posts
- const allYears = [...new Set(allPosts.map(x => new Date(x.date).getFullYear()))]
+ const allYears = [...new Set(allPosts.map((x) => new Date(x.date).getFullYear()))]
allYears.sort((a: number, b: number) => b - a)
const yearPosts = allPosts.filter((x: any) => new Date(x.date).getFullYear() == forYear)
yearPosts.sort((a: any, b: any) => new Date(b.date).getTime() - new Date(a.date).getTime())
@@ -24,8 +24,8 @@ export default () => {
return (
- {yearPosts.length
- ?
)
}
diff --git a/MyApp.Client/src/pages/profile.tsx b/MyApp.Client/src/pages/profile.tsx
index ae7d011..9ca05e8 100644
--- a/MyApp.Client/src/pages/profile.tsx
+++ b/MyApp.Client/src/pages/profile.tsx
@@ -1,27 +1,36 @@
-import Page from "@/components/LayoutPage"
-import { PrimaryButton, SecondaryButton, TextLink } from "@servicestack/react"
-import { appAuth, ValidateAuth } from "@/lib/auth"
+import Page from '@/components/LayoutPage'
+import { PrimaryButton, SecondaryButton, TextLink } from '@servicestack/react'
+import { appAuth, ValidateAuth } from '@/lib/auth'
function Profile() {
const { user, signOut } = appAuth()
- return (
-
- More from {author.name}
-
-
- {authorPosts.map(authorPost => (
new Date(x.date).getFullYear() == thisYear)} />
diff --git a/MyApp.Client/src/pages/posts/tagged/[tag].tsx b/MyApp.Client/src/pages/posts/tagged/[tag].tsx
index d69a4d2..ec3ed23 100644
--- a/MyApp.Client/src/pages/posts/tagged/[tag].tsx
+++ b/MyApp.Client/src/pages/posts/tagged/[tag].tsx
@@ -1,13 +1,13 @@
-import { Link } from "react-router-dom"
-import Layout from "@/components/Layout"
-import BlogTitle from "@/components/BlogTitle"
-import BlogPosts from "@/components/BlogPosts"
-import { ErrorSummary } from "@servicestack/react"
+import { Link } from 'react-router-dom'
+import Layout from '@/components/Layout'
+import BlogTitle from '@/components/BlogTitle'
+import BlogPosts from '@/components/BlogPosts'
+import { ErrorSummary } from '@servicestack/react'
-import { useContext } from "react"
-import { useParams } from "react-router-dom"
-import { PressContext } from "@/contexts"
-import { generateSlug } from "@/lib/utils"
+import { useContext } from 'react'
+import { useParams } from 'react-router-dom'
+import { PressContext } from '@/contexts'
+import { generateSlug } from '@/lib/utils'
export default () => {
const press = useContext(PressContext)
@@ -16,10 +16,10 @@ export default () => {
const selectedTag = tag && press.blog.tagSlugs[tag]
const title = `${selectedTag} tagged posts`
const allPosts = press.blog.posts
- const taggedPosts = selectedTag ? allPosts.filter(x => x.tags.includes(selectedTag)) : []
- const allTags = [...new Set(allPosts.flatMap(x => x.tags))]
+ const taggedPosts = selectedTag ? allPosts.filter((x) => x.tags.includes(selectedTag)) : []
+ const allTags = [...new Set(allPosts.flatMap((x) => x.tags))]
const tagCounts: { [tag: string]: number } = {}
- allTags.forEach(tag => tagCounts[tag] = allPosts.filter(x => x.tags.includes(tag)).length)
+ allTags.forEach((tag) => (tagCounts[tag] = allPosts.filter((x) => x.tags.includes(tag)).length))
allTags.sort((a: string, b: string) => tagCounts[b] - tagCounts[a])
function tagLink(tag: string) {
@@ -29,8 +29,8 @@ export default () => {
return (
-
- {author
- ?
)
}
diff --git a/MyApp.Client/src/pages/posts/index.tsx b/MyApp.Client/src/pages/posts/index.tsx
index d428126..49732f0 100644
--- a/MyApp.Client/src/pages/posts/index.tsx
+++ b/MyApp.Client/src/pages/posts/index.tsx
@@ -1,16 +1,14 @@
-import { Link } from "react-router-dom"
-import BlogTitle from "@/components/BlogTitle"
-import BlogPosts from "@/components/BlogPosts"
-import SrcPage from "@/components/SrcPage"
+import { Link } from 'react-router-dom'
+import BlogTitle from '@/components/BlogTitle'
+import BlogPosts from '@/components/BlogPosts'
+import SrcPage from '@/components/SrcPage'
-import { useContext } from "react"
-import { PressContext } from "@/contexts"
-import { generateSlug } from "@/lib/utils"
-import Layout from "@/components/Layout"
-
-type Props = {}
-export default ({ }: Props) => {
+import { useContext } from 'react'
+import { PressContext } from '@/contexts'
+import { generateSlug } from '@/lib/utils'
+import Layout from '@/components/Layout'
+export default () => {
const press = useContext(PressContext)
const title = press.blog.config.blogTitle
const blogDescription = press.blog.config.blogDescription
@@ -18,7 +16,7 @@ export default ({ }: Props) => {
const allYears = [...new Set(allPosts.map((x: any) => new Date(x.date).getFullYear()) as number[])]
const allTags = [...new Set(allPosts.flatMap((x: any) => x.tags) as string[])]
const tagCounts: { [tag: string]: number } = {}
- allTags.forEach(tag => tagCounts[tag] = allPosts.filter((x: any) => x.tags.includes(tag)).length)
+ allTags.forEach((tag) => (tagCounts[tag] = allPosts.filter((x: any) => x.tags.includes(tag)).length))
allTags.sort((a: string, b: string) => tagCounts[b] - tagCounts[a])
function tagLink(tag: string) {
@@ -41,21 +39,39 @@ export default ({ }: Props) => {
-
)}
- )
- : (
-
- 
-
-
-
-
-
-
- - Article -
- -- {authorPost.title} -
-{authorPost.summary}
- -
+
+
More from {author.name}
+
+ {authorPosts.map((authorPost) => (
+
+
-
))}
-
+ ))}
+
- {authorPost.author}
-
+
+
+
-
-
- - {authorLink(authorPost.author) - ? {authorPost.author} - : {authorPost.author}} -
-
-
-
- {authorPost.minutesToRead} min read
+
+
+
+ Article
+ ++ {authorPost.title} +
+{authorPost.summary}
+ +
+
+ {authorPost.author}
+
+
+
+
+ {authorLink(authorPost.author) ? ( + + {authorPost.author} + + ) : ( + {authorPost.author} + )} +
+
+
+
+ {authorPost.minutesToRead} min read
+
+
+ )}
+
+ ) : (
+
+ )}
+
+ )
}
diff --git a/MyApp.Client/src/pages/posts/author/[name].tsx b/MyApp.Client/src/pages/posts/author/[name].tsx
index 94c2c4e..9f2d0f9 100644
--- a/MyApp.Client/src/pages/posts/author/[name].tsx
+++ b/MyApp.Client/src/pages/posts/author/[name].tsx
@@ -1,25 +1,25 @@
-import { Link } from "react-router-dom"
-import BlogTitle from "@/components/BlogTitle"
-import BlogPosts from "@/components/BlogPosts"
-import { ErrorSummary } from "@servicestack/react"
+import { Link } from 'react-router-dom'
+import BlogTitle from '@/components/BlogTitle'
+import BlogPosts from '@/components/BlogPosts'
+import { ErrorSummary } from '@servicestack/react'
-import { useContext } from "react"
-import { useParams } from "react-router-dom"
-import { PressContext } from "@/contexts"
-import { generateSlug } from "@/lib/utils"
-import Layout from "@/components/Layout"
+import { useContext } from 'react'
+import { useParams } from 'react-router-dom'
+import { PressContext } from '@/contexts'
+import { generateSlug } from '@/lib/utils'
+import Layout from '@/components/Layout'
export default () => {
const press = useContext(PressContext)
const { name } = useParams()
- const author = press.blog.authors.find(x => generateSlug(x.name) == name)
- const authorPosts = author ? press.blog.posts.filter(x => x.author.toLowerCase() == author.name.toLowerCase()) : []
+ const author = press.blog.authors.find((x) => generateSlug(x.name) == name)
+ const authorPosts = author ? press.blog.posts.filter((x) => x.author.toLowerCase() == author.name.toLowerCase()) : []
const title = author ? `${author.name}'s Posts` : `Author Not Found`
return (
+ {author ? (
+
@@ -30,11 +30,15 @@ export default () => {
- :
- view all posts
+
+ view all posts
+
- {allTags.map(tag =>
- {tag})}
+ {allTags.map((tag) => (
+
+ {tag}
+
+ ))}
{thisYear}
- {allYears.filter(x => x != thisYear).map(year =>
- {year})}
+ {allYears
+ .filter((x) => x != thisYear)
+ .map((year) => (
+
+ {year}
+
+ ))}
- view all posts
+
+ view all posts
+
+ {selectedTag ? (
+
@@ -39,19 +39,38 @@ export default () => {
- :
- {allTags.map(tag => tag == selectedTag
- ? {tag}
- : {tag})}
+ {allTags.map((tag) =>
+ tag == selectedTag ? (
+
+ {tag}
+
+ ) : (
+
+ {tag}
+
+ ),
+ )}
- view all posts
+
+ view all posts
+
+ {yearPosts.length ? (
+
@@ -34,19 +34,35 @@ export default () => {
- :
- {allYears.map(year => forYear == year
- ? { year }
- : {year})}
+ {allYears.map((year) =>
+ forYear == year ? (
+
+ {year}
+
+ ) : (
+
+ {year}
+
+ ),
+ )}
- view all posts
+
+ view all posts
+
- 
-
{user.displayName}
- {user.userName}
-
- {(user.roles || []).map(role =>
- {role})}
+ return (
+
+ Sign Out
-
- Identity Auth Account
-
-
- 🏠 Home
-
-
- )
+
+ )
}
-export default ValidateAuth(Profile)
\ No newline at end of file
+export default ValidateAuth(Profile)
diff --git a/MyApp.Client/src/pages/shadcn-ui.tsx b/MyApp.Client/src/pages/shadcn-ui.tsx
index ed9fb0d..c5debda 100644
--- a/MyApp.Client/src/pages/shadcn-ui.tsx
+++ b/MyApp.Client/src/pages/shadcn-ui.tsx
@@ -1,312 +1,330 @@
-import Layout from "@/components/Layout"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
-import { Terminal, Rocket, Package, ExternalLink, Info, Download, Code2 } from "lucide-react"
+import Layout from '@/components/Layout'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
+import { Terminal, Rocket, Package, ExternalLink, Info, Download, Code2 } from 'lucide-react'
const ShadcnUiDemo = () => {
return (
+
+
+ Sign Out
+
+
+ Identity Auth Account
+
+
+ 🏠 Home
+
- {user.displayName}
+ {user.userName}
+
+ {(user.roles || []).map((role) => (
+
+ {role}
+
+ ))}
+
+
-
-
-
+ {/* Alert Demo */}
+
+
- {/* Button Demo */}
-
-
+ {/* Button Demo */}
+
+
- {/* Card Demo */}
-
-
- shadcn/ui Components -
-- A collection of beautifully designed, accessible components built with Radix UI and Tailwind CSS. -
-
- React
- TypeScript
- Tailwind CSS
+
- {/* Alert Demo */}
-
+
- shadcn/ui Components
++ A collection of beautifully designed, accessible components built with Radix UI and Tailwind CSS. +
+
+ React
+ TypeScript
+ Tailwind CSS
+
Alerts
-
-
- Heads up!
-
- You can add components and dependencies to your app using the CLI.
-
-
-
- Error
-
- Your session has expired. Please log in again.
-
-
-
- Alerts
+
+
+ Heads up!
+
+ You can add components and dependencies to your app using the CLI.
+
+
+
+ Error
+ Your session has expired. Please log in again.
+
+
+ Buttons
-
-
-
-
-
-
-
-
-
-
-
- Buttons
+
+
+
+
+
+
+
+
+
+
+
+ Cards
-
-
-
- Card Title
- Card Description
-
-
-
-
-
-
-
-
-
- Features
- What you get
-
-
-
-
-
-
- Stats
- Your metrics
-
-
-
-
This is a simple card component with header, content, and footer sections.
--
-
-
-
✓ - Accessible -
- -
-
✓ - Customizable -
- -
-
✓ - Open Source -
-
-
+
- {/* Tabs Demo */}
-
- Components
- 50+
-
-
- Downloads
- 1M+
+ {/* Card Demo */}
+
+
-
+
+
+ Cards
+
+
+
+ Card Title
+ Card Description
+
+
+
+
+
+
+
+
+
+ Features
+ What you get
+
+
+
+
+
+
+ Stats
+ Your metrics
+
+
+
-
-
- + This is a simple card component with header, content, and footer sections. +
+-
+
-
+
✓ + Accessible +
+ -
+
✓ + Customizable +
+ -
+
✓ + Open Source +
+
+
-
+ Components
+ 50+
+
+
+ Downloads
+ 1M+
+
Tabs
-
-
-
-
-
-
-
-
-
-
-
-
-
- What is shadcn/ui?
-
- A modern component library for React applications
-
-
-
-
- shadcn/ui is a collection of re-usable components that you can copy and paste into your apps. - It's built with Radix UI and Tailwind CSS, providing accessible and customizable components. -
-
-
- Accessible
-
+
Built with Radix UI primitives
+ {/* Tabs Demo */} +Tabs
+
+
+
+