From 5fea214ead77c4cabba739a330291c3122ba8961 Mon Sep 17 00:00:00 2001 From: Owen Date: Sun, 31 May 2026 20:34:20 +0200 Subject: [PATCH] reusable section component, highlighting the last word in the title --- src/components/Section.tsx | 31 +++++++++++++ src/routes/index.tsx | 91 +++++++------------------------------- 2 files changed, 46 insertions(+), 76 deletions(-) create mode 100644 src/components/Section.tsx diff --git a/src/components/Section.tsx b/src/components/Section.tsx new file mode 100644 index 0000000..63ca9b4 --- /dev/null +++ b/src/components/Section.tsx @@ -0,0 +1,31 @@ +import type { ReactNode } from "react"; + +interface IProps { + title: string; + smallTitle?: string; + description?: string; + children: ReactNode; +} + +const Section = ({ title, smallTitle, description, children }: IProps) => { + const words = title.trim().split(" "); + const lastWord = words.pop(); + const mainTitle = words.join(" "); + + return ( +
+

+ {smallTitle} +

+

+ {mainTitle} {lastWord} +

+

+ {description} +

+ {children} +
+ ); +}; + +export default Section; diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 89b1eb0..3b9359c 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,87 +1,26 @@ import { createFileRoute } from "@tanstack/react-router"; +import Section from "#/components/Section.tsx"; export const Route = createFileRoute("/")({ component: App }); function App() { return (
- {/*
*/} - {/*
*/} - {/*
*/} - {/*

TanStack Start Base Template

*/} - {/*

*/} - {/* Start simple, ship quickly.*/} - {/*

*/} - {/*

*/} - {/* This base starter intentionally keeps things light: two routes, clean*/} - {/* structure, and the essentials you need to build from scratch.*/} - {/*

*/} - {/*
*/} - {/* */} - {/* About This Starter*/} - {/* */} - {/* */} - {/* Router Guide*/} - {/* */} - {/*
*/} - {/*
*/} +
+

section content

+
- {/*
*/} - {/* {[*/} - {/* [*/} - {/* 'Type-Safe Routing',*/} - {/* 'Routes and links stay in sync across every page.',*/} - {/* ],*/} - {/* [*/} - {/* 'Server Functions',*/} - {/* 'Call server code from your UI without creating API boilerplate.',*/} - {/* ],*/} - {/* [*/} - {/* 'Streaming by Default',*/} - {/* 'Ship progressively rendered responses for faster experiences.',*/} - {/* ],*/} - {/* [*/} - {/* 'Tailwind Native',*/} - {/* 'Design quickly with utility-first styling and reusable tokens.',*/} - {/* ],*/} - {/* ].map(([title, desc], index) => (*/} - {/* */} - {/*

*/} - {/* {title}*/} - {/*

*/} - {/*

{desc}

*/} - {/* */} - {/* ))}*/} - {/*
*/} - - {/*
*/} - {/*

Quick Start

*/} - {/*
    */} - {/*
  • */} - {/* Edit src/routes/index.tsx to customize the home page.*/} - {/*
    • */} - {/*
  • */} - {/* Update src/components/Header.tsx and{' '}*/} - {/* src/components/Footer.tsx for brand links.*/} - {/*
    • */} - {/*
  • */} - {/* Add routes in src/routes and tweak visual tokens in{' '}*/} - {/* src/styles.css.*/} - {/*
    • */} - {/*
*/} - {/*
*/} +
+

section content

+
); }