Merge version_1 into main #2

Merged
bender merged 4 commits from version_1 into main 2026-03-10 23:10:51 +00:00
4 changed files with 131 additions and 321 deletions

View File

@@ -20,8 +20,7 @@ export default function MarketsPage() {
const footerColumns = [
{
title: "Explore",
items: [
title: "Explore", items: [
{ label: "Browse Markets", href: "/markets" },
{ label: "Search Homes", href: "search" },
{ label: "How It Works", href: "how-it-works" },
@@ -29,8 +28,7 @@ export default function MarketsPage() {
],
},
{
title: "Company",
items: [
title: "Company", items: [
{ label: "About Us", href: "about" },
{ label: "Blog", href: "blog" },
{ label: "Careers", href: "careers" },
@@ -38,8 +36,7 @@ export default function MarketsPage() {
],
},
{
title: "Legal",
items: [
title: "Legal", items: [
{ label: "Terms of Service", href: "#" },
{ label: "Privacy Policy", href: "#" },
{ label: "Cookie Policy", href: "#" },
@@ -65,16 +62,14 @@ export default function MarketsPage() {
<NavbarStyleCentered
navItems={navItems}
button={{
text: "Find Your Home",
href: "/markets",
}}
text: "Find Your Home", href: "/markets"}}
brandName="Segue Living"
/>
</div>
<div id="markets-hero" data-section="markets-hero">
<HeroBillboard
background={{ variant: "circleGradient" }}
background={{ variant: "sparkles-gradient" }}
title="Explore Our Markets"
description="Discover premium co-living opportunities in 25+ handpicked cities across the United States. Find the perfect neighborhood that matches your lifestyle and career."
tag="Available Now"
@@ -97,38 +92,11 @@ export default function MarketsPage() {
tagIcon={Home}
blogs={[
{
id: "1",
category: "New York Metro",
title: "Manhattan Luxury 1BR - Tribeca District",
excerpt: "High-end furnished apartment in prime Manhattan location. Doorman building, premium amenities, vibrant neighborhood.",
imageSrc: "http://img.b2bpic.net/free-photo/pullout-drawer-modern-kitchen-led-lighting_169016-69290.jpg?_wi=2",
imageAlt: "NYC luxury apartment",
authorName: "New York",
authorAvatar: "http://img.b2bpic.net/free-photo/manhattan-sunset_649448-1240.jpg",
date: "Immediate",
},
id: "1", category: "New York Metro", title: "Manhattan Luxury 1BR - Tribeca District", excerpt: "High-end furnished apartment in prime Manhattan location. Doorman building, premium amenities, vibrant neighborhood.", imageSrc: "http://img.b2bpic.net/free-photo/pullout-drawer-modern-kitchen-led-lighting_169016-69290.jpg", imageAlt: "NYC luxury apartment", authorName: "New York", authorAvatar: "http://img.b2bpic.net/free-photo/manhattan-sunset_649448-1240.jpg", date: "Immediate"},
{
id: "2",
category: "San Francisco",
title: "SoMa 1BR with City Views",
excerpt: "Modern furnished apartment in South of Market. Close to tech hubs, restaurants, and waterfront. Rooftop access.",
imageSrc: "http://img.b2bpic.net/free-photo/vase-with-flowers-from-garden-white-kitchen-interior_169016-36135.jpg?_wi=2",
imageAlt: "SF apartment",
authorName: "San Francisco",
authorAvatar: "http://img.b2bpic.net/free-photo/new-york-city-manhattan-bridge_649448-4904.jpg",
date: "Available Soon",
},
id: "2", category: "San Francisco", title: "SoMa 1BR with City Views", excerpt: "Modern furnished apartment in South of Market. Close to tech hubs, restaurants, and waterfront. Rooftop access.", imageSrc: "http://img.b2bpic.net/free-photo/vase-with-flowers-from-garden-white-kitchen-interior_169016-36135.jpg", imageAlt: "SF apartment", authorName: "San Francisco", authorAvatar: "http://img.b2bpic.net/free-photo/new-york-city-manhattan-bridge_649448-4904.jpg", date: "Available Soon"},
{
id: "3",
category: "Chicago",
title: "Loop Studio with Balcony",
excerpt: "Stylish furnished studio in downtown Chicago. Floor-to-ceiling windows, modern furniture, building fitness center.",
imageSrc: "http://img.b2bpic.net/free-photo/bathtub-faucet-closeup-with-luxury-living-concept_53876-146213.jpg?_wi=2",
imageAlt: "Chicago apartment",
authorName: "Chicago",
authorAvatar: "http://img.b2bpic.net/free-photo/toronto-sunset-silhouette-dusk-lake-with-urban-architecture_649448-299.jpg",
date: "Available Now",
},
id: "3", category: "Chicago", title: "Loop Studio with Balcony", excerpt: "Stylish furnished studio in downtown Chicago. Floor-to-ceiling windows, modern furniture, building fitness center.", imageSrc: "http://img.b2bpic.net/free-photo/bathtub-faucet-closeup-with-luxury-living-concept_53876-146213.jpg", imageAlt: "Chicago apartment", authorName: "Chicago", authorAvatar: "http://img.b2bpic.net/free-photo/toronto-sunset-silhouette-dusk-lake-with-urban-architecture_649448-299.jpg", date: "Available Now"},
]}
animationType="slide-up"
textboxLayout="default"
@@ -141,7 +109,7 @@ export default function MarketsPage() {
<ContactText
text="Ready to find your perfect home in one of our premium markets? Browse our full listings, compare neighborhoods, and start your co-living journey today."
animationType="reveal-blur"
background={{ variant: "circleGradient" }}
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
buttons={[
{ text: "Search All Homes", href: "search" },
@@ -152,7 +120,7 @@ export default function MarketsPage() {
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/young-girl-dealing-with-derealization-dissociation-from-reality_482257-121622.jpg?_wi=2"
imageSrc="http://img.b2bpic.net/free-photo/young-girl-dealing-with-derealization-dissociation-from-reality_482257-121622.jpg"
imageAlt="Young professionals apartment living together"
logoText="Segue Living"
copyrightText="© 2025 Segue Living | Premium Co-Living Platform"

View File

@@ -36,30 +36,24 @@ export default function HomePage() {
{ name: "Contact", id: "contact" },
]}
button={{
text: "Find Your Home",
href: "search",
}}
text: "Find Your Home", href: "search"}}
/>
</div>
<div id="hero" data-section="hero" className="w-full">
<HeroBillboard
background={{ variant: "circleGradient" }}
background={{ variant: "sparkles-gradient" }}
title="Live Better Together"
description="Flexible furnished co-living designed for modern city life. Premium apartments with built-in community in your favorite cities."
tag="Premium Co-Living"
tagIcon={Sparkles}
imageSrc="http://img.b2bpic.net/free-photo/part-kitchen-interior-white_169016-17725.jpg?_wi=1"
imageSrc="http://img.b2bpic.net/free-photo/part-kitchen-interior-white_169016-17725.jpg"
imageAlt="Modern city apartment living"
buttons={[
{
text: "Explore Homes",
href: "search",
},
text: "Explore Homes", href: "search"},
{
text: "Find Your Match",
href: "markets",
},
text: "Find Your Match", href: "markets"},
]}
mediaAnimation="slide-up"
buttonAnimation="slide-up"
@@ -78,20 +72,11 @@ export default function HomePage() {
imageAlt="Explore cities"
accordionItems={[
{
id: "1",
title: "Find Your City",
content: "Browse our handpicked markets across major US cities. Each location is selected for vibrant neighborhoods and prime accessibility. Explore neighborhoods, amenities, and the local lifestyle.",
},
id: "1", title: "Find Your City", content: "Browse our handpicked markets across major US cities. Each location is selected for vibrant neighborhoods and prime accessibility. Explore neighborhoods, amenities, and the local lifestyle."},
{
id: "2",
title: "Choose Your Space",
content: "Discover furnished apartments designed for modern living. View full galleries, check availability, and connect with potential roommates. All homes are move-in ready with premium furnishings included.",
},
id: "2", title: "Choose Your Space", content: "Discover furnished apartments designed for modern living. View full galleries, check availability, and connect with potential roommates. All homes are move-in ready with premium furnishings included."},
{
id: "3",
title: "Move In Easily",
content: "Skip the hassle. Our streamlined process gets you settled in days. Flexible lease terms, simple onboarding, and instant access to your community. No hidden fees or complicated paperwork.",
},
id: "3", title: "Move In Easily", content: "Skip the hassle. Our streamlined process gets you settled in days. Flexible lease terms, simple onboarding, and instant access to your community. No hidden fees or complicated paperwork."},
]}
mediaAnimation="slide-up"
buttonAnimation="slide-up"
@@ -99,9 +84,7 @@ export default function HomePage() {
mediaPosition="left"
buttons={[
{
text: "Start Exploring",
href: "markets",
},
text: "Start Exploring", href: "markets"},
]}
/>
</div>
@@ -110,40 +93,15 @@ export default function HomePage() {
<ProductCardThree
products={[
{
id: "1",
name: "Fully Furnished Homes",
price: "Premium",
imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-moving-into-their-new-apartment_637285-12404.jpg?_wi=1",
imageAlt: "Luxury furnished apartment",
},
id: "1", name: "Fully Furnished Homes", price: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-moving-into-their-new-apartment_637285-12404.jpg", imageAlt: "Luxury furnished apartment"},
{
id: "2",
name: "Flexible Living Terms",
price: "Freedom",
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-laying-couch-with-laptop-doing-victory-stretch-resting-home-weekday_1258-84063.jpg?_wi=1",
imageAlt: "Flexible lease terms",
},
id: "2", name: "Flexible Living Terms", price: "Freedom", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-laying-couch-with-laptop-doing-victory-stretch-resting-home-weekday_1258-84063.jpg", imageAlt: "Flexible lease terms"},
{
id: "3",
name: "Built-In Community",
price: "Connection",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-people-hostel_23-2150446750.jpg?_wi=1",
imageAlt: "Community living",
},
id: "3", name: "Built-In Community", price: "Connection", imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-people-hostel_23-2150446750.jpg", imageAlt: "Community living"},
{
id: "4",
name: "Prime City Locations",
price: "Convenience",
imageSrc: "http://img.b2bpic.net/free-photo/guy-looking-something-map-with-city-background_1153-422.jpg?_wi=1",
imageAlt: "City center location",
},
id: "4", name: "Prime City Locations", price: "Convenience", imageSrc: "http://img.b2bpic.net/free-photo/guy-looking-something-map-with-city-background_1153-422.jpg", imageAlt: "City center location"},
{
id: "5",
name: "Simple Move-In",
price: "Effortless",
imageSrc: "http://img.b2bpic.net/free-photo/excited-man-cardboard-boxes_23-2147694149.jpg",
imageAlt: "Easy move-in process",
},
id: "5", name: "Simple Move-In", price: "Effortless", imageSrc: "http://img.b2bpic.net/free-photo/excited-man-cardboard-boxes_23-2147694149.jpg", imageAlt: "Easy move-in process"},
]}
title="Why Segue Living"
description="The complete co-living solution designed for how you want to live."
@@ -155,9 +113,7 @@ export default function HomePage() {
useInvertedBackground={false}
buttons={[
{
text: "Learn More",
href: "about",
},
text: "Learn More", href: "about"},
]}
/>
</div>
@@ -172,39 +128,12 @@ export default function HomePage() {
textboxLayout="default"
useInvertedBackground={false}
names={[
"Atlanta",
"Boston",
"Charlotte",
"Chicago",
"Cincinnati",
"Cleveland",
"Columbus",
"Dallas",
"Denver",
"Houston",
"Indianapolis",
"Kansas City",
"Minneapolis",
"Nashville",
"New York Metro",
"Philadelphia",
"Phoenix",
"Raleigh",
"Richmond",
"Seattle",
"Southern California",
"San Diego",
"St. Louis",
"Washington DC",
"Tampa Bay",
]}
"Atlanta", "Boston", "Charlotte", "Chicago", "Cincinnati", "Cleveland", "Columbus", "Dallas", "Denver", "Houston", "Indianapolis", "Kansas City", "Minneapolis", "Nashville", "New York Metro", "Philadelphia", "Phoenix", "Raleigh", "Richmond", "Seattle", "Southern California", "San Diego", "St. Louis", "Washington DC", "Tampa Bay"]}
speed={40}
showCard={true}
buttons={[
{
text: "Explore All Markets",
href: "markets",
},
text: "Explore All Markets", href: "markets"},
]}
/>
</div>
@@ -213,49 +142,13 @@ export default function HomePage() {
<BlogCardThree
blogs={[
{
id: "1",
category: "Downtown Chicago",
title: "Modern Lofted Studio with City Views",
excerpt: "Fully furnished studio in River North. Floor-to-ceiling windows, chef's kitchen, building fitness center.",
imageSrc: "http://img.b2bpic.net/free-photo/pullout-drawer-modern-kitchen-led-lighting_169016-69290.jpg?_wi=1",
imageAlt: "Modern studio apartment",
authorName: "Chicago Market",
authorAvatar: "http://img.b2bpic.net/free-photo/toronto-sunset-silhouette-dusk-lake-with-urban-architecture_649448-299.jpg",
date: "Available Now",
},
id: "1", category: "Downtown Chicago", title: "Modern Lofted Studio with City Views", excerpt: "Fully furnished studio in River North. Floor-to-ceiling windows, chef's kitchen, building fitness center.", imageSrc: "http://img.b2bpic.net/free-photo/pullout-drawer-modern-kitchen-led-lighting_169016-69290.jpg", imageAlt: "Modern studio apartment", authorName: "Chicago Market", authorAvatar: "http://img.b2bpic.net/free-photo/toronto-sunset-silhouette-dusk-lake-with-urban-architecture_649448-299.jpg", date: "Available Now"},
{
id: "2",
category: "Capitol Hill, Seattle",
title: "Contemporary 1BR with Shared Rooftop",
excerpt: "Premium 1-bedroom near restaurants and transit. Hardwood floors, premium furnishings, community events.",
imageSrc: "http://img.b2bpic.net/free-photo/vase-with-flowers-from-garden-white-kitchen-interior_169016-36135.jpg?_wi=1",
imageAlt: "Contemporary apartment",
authorName: "Seattle Market",
authorAvatar: "http://img.b2bpic.net/free-photo/new-york-city-manhattan-downtown_649448-4758.jpg",
date: "Available Now",
},
id: "2", category: "Capitol Hill, Seattle", title: "Contemporary 1BR with Shared Rooftop", excerpt: "Premium 1-bedroom near restaurants and transit. Hardwood floors, premium furnishings, community events.", imageSrc: "http://img.b2bpic.net/free-photo/vase-with-flowers-from-garden-white-kitchen-interior_169016-36135.jpg", imageAlt: "Contemporary apartment", authorName: "Seattle Market", authorAvatar: "http://img.b2bpic.net/free-photo/new-york-city-manhattan-downtown_649448-4758.jpg", date: "Available Now"},
{
id: "3",
category: "Downtown Denver",
title: "Luxury Loft with Mountain Views",
excerpt: "Soaring ceilings, custom furnishings, concierge service. Building rooftop and co-working spaces included.",
imageSrc: "http://img.b2bpic.net/free-photo/bathtub-faucet-closeup-with-luxury-living-concept_53876-146213.jpg?_wi=1",
imageAlt: "Luxury loft apartment",
authorName: "Denver Market",
authorAvatar: "http://img.b2bpic.net/free-photo/gray-rocky-mountain-forest_198169-6.jpg",
date: "Available Now",
},
id: "3", category: "Downtown Denver", title: "Luxury Loft with Mountain Views", excerpt: "Soaring ceilings, custom furnishings, concierge service. Building rooftop and co-working spaces included.", imageSrc: "http://img.b2bpic.net/free-photo/bathtub-faucet-closeup-with-luxury-living-concept_53876-146213.jpg", imageAlt: "Luxury loft apartment", authorName: "Denver Market", authorAvatar: "http://img.b2bpic.net/free-photo/gray-rocky-mountain-forest_198169-6.jpg", date: "Available Now"},
{
id: "4",
category: "Marina District, San Francisco",
title: "Design-Forward 1BR with Terrace",
excerpt: "Premium finishes, private terrace, building gym and lounge. Move-in by end of month.",
imageSrc: "http://img.b2bpic.net/free-photo/empty-restaurant-terrace_1127-2167.jpg?_wi=1",
imageAlt: "Modern apartment with terrace",
authorName: "SF Market",
authorAvatar: "http://img.b2bpic.net/free-photo/new-york-city-manhattan-bridge_649448-4904.jpg",
date: "Available Now",
},
id: "4", category: "Marina District, San Francisco", title: "Design-Forward 1BR with Terrace", excerpt: "Premium finishes, private terrace, building gym and lounge. Move-in by end of month.", imageSrc: "http://img.b2bpic.net/free-photo/empty-restaurant-terrace_1127-2167.jpg", imageAlt: "Modern apartment with terrace", authorName: "SF Market", authorAvatar: "http://img.b2bpic.net/free-photo/new-york-city-manhattan-bridge_649448-4904.jpg", date: "Available Now"},
]}
title="Featured Homes"
description="Curated collection of premium apartments ready for you to move in. Each home is fully furnished and designed for modern living."
@@ -266,9 +159,7 @@ export default function HomePage() {
useInvertedBackground={false}
buttons={[
{
text: "View All Homes",
href: "search",
},
text: "View All Homes", href: "search"},
]}
/>
</div>
@@ -277,89 +168,58 @@ export default function HomePage() {
<ContactText
text="Find a place that fits how you live. Premium furnished co-living designed for young professionals seeking community, flexibility, and convenience."
animationType="reveal-blur"
background={{ variant: "circleGradient" }}
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
buttons={[
{
text: "Explore Homes",
href: "search",
},
text: "Explore Homes", href: "search"},
{
text: "Find Your Match",
href: "markets",
},
text: "Find Your Match", href: "markets"},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/young-girl-dealing-with-derealization-dissociation-from-reality_482257-121622.jpg?_wi=1"
imageSrc="http://img.b2bpic.net/free-photo/young-girl-dealing-with-derealization-dissociation-from-reality_482257-121622.jpg"
imageAlt="Young professionals apartment living together"
logoText="Segue Living"
copyrightText="© 2025 Segue Living | Premium Co-Living Platform"
columns={[
{
title: "Explore",
items: [
title: "Explore", items: [
{
label: "Browse Markets",
href: "markets",
},
label: "Browse Markets", href: "markets"},
{
label: "Search Homes",
href: "search",
},
label: "Search Homes", href: "search"},
{
label: "How It Works",
href: "how-it-works",
},
label: "How It Works", href: "how-it-works"},
{
label: "Our Story",
href: "about",
},
label: "Our Story", href: "about"},
],
},
{
title: "Company",
items: [
title: "Company", items: [
{
label: "About Us",
href: "about",
},
label: "About Us", href: "about"},
{
label: "Blog",
href: "blog",
},
label: "Blog", href: "blog"},
{
label: "Careers",
href: "careers",
},
label: "Careers", href: "careers"},
{
label: "Contact",
href: "contact",
},
label: "Contact", href: "contact"},
],
},
{
title: "Legal",
items: [
title: "Legal", items: [
{
label: "Terms of Service",
href: "#",
},
label: "Terms of Service", href: "#"},
{
label: "Privacy Policy",
href: "#",
},
label: "Privacy Policy", href: "#"},
{
label: "Cookie Policy",
href: "#",
},
label: "Cookie Policy", href: "#"},
{
label: "Accessibility",
href: "#",
},
label: "Accessibility", href: "#"},
],
},
]}

View File

@@ -31,30 +31,24 @@ export default function SearchPage() {
{ name: "Contact", id: "contact" },
]}
button={{
text: "Find Your Home",
href: "search",
}}
text: "Find Your Home", href: "search"}}
/>
</div>
<div id="search-hero" data-section="search-hero" className="w-full">
<HeroBillboard
background={{ variant: "circleGradient" }}
background={{ variant: "sparkles-gradient" }}
title="Search & Discover Your Perfect Home"
description="Browse our curated selection of premium furnished apartments across 25+ markets. Find your ideal co-living community with flexible terms designed for modern professionals."
tag="Search Available Homes"
tagIcon={Sparkles}
imageSrc="http://img.b2bpic.net/free-photo/part-kitchen-interior-white_169016-17725.jpg?_wi=2"
imageSrc="http://img.b2bpic.net/free-photo/part-kitchen-interior-white_169016-17725.jpg"
imageAlt="Search and discover homes"
buttons={[
{
text: "Back to Home",
href: "/",
},
text: "Back to Home", href: "/"},
{
text: "Explore Markets",
href: "markets",
},
text: "Explore Markets", href: "markets"},
]}
mediaAnimation="slide-up"
buttonAnimation="slide-up"
@@ -65,72 +59,45 @@ export default function SearchPage() {
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/young-girl-dealing-with-derealization-dissociation-from-reality_482257-121622.jpg?_wi=5"
imageSrc="http://img.b2bpic.net/free-photo/young-girl-dealing-with-derealization-dissociation-from-reality_482257-121622.jpg"
imageAlt="Young professionals apartment living together"
logoText="Segue Living"
copyrightText="© 2025 Segue Living | Premium Co-Living Platform"
columns={[
{
title: "Explore",
items: [
title: "Explore", items: [
{
label: "Browse Markets",
href: "markets",
},
label: "Browse Markets", href: "markets"},
{
label: "Search Homes",
href: "search",
},
label: "Search Homes", href: "search"},
{
label: "How It Works",
href: "how-it-works",
},
label: "How It Works", href: "how-it-works"},
{
label: "Our Story",
href: "about",
},
label: "Our Story", href: "about"},
],
},
{
title: "Company",
items: [
title: "Company", items: [
{
label: "About Us",
href: "about",
},
label: "About Us", href: "about"},
{
label: "Blog",
href: "blog",
},
label: "Blog", href: "blog"},
{
label: "Careers",
href: "careers",
},
label: "Careers", href: "careers"},
{
label: "Contact",
href: "contact",
},
label: "Contact", href: "contact"},
],
},
{
title: "Legal",
items: [
title: "Legal", items: [
{
label: "Terms of Service",
href: "#",
},
label: "Terms of Service", href: "#"},
{
label: "Privacy Policy",
href: "#",
},
label: "Privacy Policy", href: "#"},
{
label: "Cookie Policy",
href: "#",
},
label: "Cookie Policy", href: "#"},
{
label: "Accessibility",
href: "#",
},
label: "Accessibility", href: "#"},
],
},
]}

View File

@@ -1,51 +1,66 @@
"use client";
import React, { SVGProps } from 'react';
import { memo } from "react";
import useSvgTextLogo from "./useSvgTextLogo";
import { cls } from "@/lib/utils";
interface SvgTextLogoProps {
logoText: string;
adjustHeightFactor?: number;
verticalAlign?: "top" | "center";
className?: string;
interface SvgTextLogoProps extends SVGProps<SVGSVGElement> {
text: string;
fontSize?: number;
fontFamily?: string;
fontWeight?: number | string;
fill?: string;
letterSpacing?: number;
}
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
logoText,
adjustHeightFactor,
verticalAlign = "top",
className = "",
}) {
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
const SvgTextLogo = React.forwardRef<SVGSVGElement, SvgTextLogoProps>(
(
{
text = 'Webild',
fontSize = 48,
fontFamily = 'system-ui, -apple-system, sans-serif',
fontWeight = 700,
fill = '#000000',
letterSpacing = 0,
...props
},
ref,
) => {
const textElement = React.useRef<SVGTextElement>(null);
const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
return (
<svg
ref={svgRef}
viewBox={viewBox}
className={cls("w-full", className)}
style={{ aspectRatio: aspectRatio }}
preserveAspectRatio="none"
role="img"
aria-label={`${logoText} logo`}
>
<text
ref={textRef}
x="0"
y={verticalAlign === "center" ? "50%" : "0"}
className="font-bold fill-current"
style={{
fontSize: "20px",
letterSpacing: "-0.02em",
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
}}
React.useLayoutEffect(() => {
if (textElement.current) {
const bbox = textElement.current.getBBox();
setDimensions({
width: bbox.width + 20,
height: bbox.height + 20,
});
}
}, [text, fontSize, fontFamily, fontWeight]);
return (
<svg
ref={ref}
viewBox={`0 0 ${Math.max(dimensions.width, 200)} ${Math.max(dimensions.height, 80)}`}
xmlns="http://www.w3.org/2000/svg"
{...props}
>
{logoText}
</text>
</svg>
);
});
<text
ref={textElement}
x="10"
y="50%"
fontSize={fontSize}
fontFamily={fontFamily}
fontWeight={fontWeight}
fill={fill}
letterSpacing={letterSpacing}
dominantBaseline="middle"
textAnchor="start"
>
{text}
</text>
</svg>
);
},
);
SvgTextLogo.displayName = "SvgTextLogo";
SvgTextLogo.displayName = 'SvgTextLogo';
export default SvgTextLogo;
export default SvgTextLogo;