vski.damian
vski.damian
PostsComments
TTCTheo's Typesafe Cult
Created by vski.damian on 6/17/2024 in #questions
change tailwind color based on api response
Ok, i think the problem is that i put style not in a body or head tag
12 replies
TTCTheo's Typesafe Cult
Created by vski.damian on 6/17/2024 in #questions
change tailwind color based on api response
No description
12 replies
TTCTheo's Typesafe Cult
Created by vski.damian on 6/17/2024 in #questions
change tailwind color based on api response
why am i getting hydration error with this implementation 
import 'ui/globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { LayoutData, executeApiRequest } from 'api';

const inter = Inter({ subsets: ['latin'], variable: '--font-sans' });

export const metadata: Metadata = {
  title: 'back-office',
  description: 'lorem ipsum',
};

export default async function RootLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode;

  params: {
    locale: string;
  };
}) {
  const layoutData = await executeApiRequest<LayoutData>({
    endpoint: '/webapp/settings/layout',
  });
  const primaryColor = layoutData.layout.primary_color;

  return (
    <html lang={locale} className={`${inter.variable} h-full`}>
      <style>{`
      :root {
        --primary: ${primaryColor}
      }
    `}</style>
      <body className="relative h-full">{children}</body>
    </html>
  );
}
import 'ui/globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { LayoutData, executeApiRequest } from 'api';

const inter = Inter({ subsets: ['latin'], variable: '--font-sans' });

export const metadata: Metadata = {
  title: 'back-office',
  description: 'lorem ipsum',
};

export default async function RootLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode;

  params: {
    locale: string;
  };
}) {
  const layoutData = await executeApiRequest<LayoutData>({
    endpoint: '/webapp/settings/layout',
  });
  const primaryColor = layoutData.layout.primary_color;

  return (
    <html lang={locale} className={`${inter.variable} h-full`}>
      <style>{`
      :root {
        --primary: ${primaryColor}
      }
    `}</style>
      <body className="relative h-full">{children}</body>
    </html>
  );
}
here [image] but not here2 [image] so one layout.tsx deeper
12 replies
TTCTheo's Typesafe Cult
Created by vski.damian on 6/17/2024 in #questions
change tailwind color based on api response
document is only available in client components, or am i wrong?
12 replies
TTCTheo's Typesafe Cult
Created by vski.damian on 6/17/2024 in #questions
change tailwind color based on api response
im getting 
Warning: Cannot render a <style> outside the main document without knowing its precedence and a unique href key. React can hoist and deduplicate <style> tags if you provide a `precedence` prop along with an `href` prop that does not conflic with the `href` values used in any other hoisted <style> or <link rel="stylesheet" ...> tags.  Note that hoisting <style> tags is considered an advanced feature that most will not use directly. Consider moving the <style> tag to the <head> or consider adding a `precedence="default"` and `href="some unique resource identifier"`, or move the <style> to the <style> tag.
Warning: Cannot render a <style> outside the main document without knowing its precedence and a unique href key. React can hoist and deduplicate <style> tags if you provide a `precedence` prop along with an `href` prop that does not conflic with the `href` values used in any other hoisted <style> or <link rel="stylesheet" ...> tags.  Note that hoisting <style> tags is considered an advanced feature that most will not use directly. Consider moving the <style> tag to the <head> or consider adding a `precedence="default"` and `href="some unique resource identifier"`, or move the <style> to the <style> tag.
12 replies
TTCTheo's Typesafe Cult
Created by vski.damian on 6/17/2024 in #questions
change tailwind color based on api response
Im using css variables 
export default async function WebappLayout({ children }: { children: ReactNode }) {
  const layoutData = await executeApiRequest<LayoutData>({
    endpoint: '/webapp/settings/layout',
  });
  const primaryColor = layoutData.layout.primary_color;

  return (
    <Layout>
      <style>{`
      :root {
        --primary: ${primaryColor}
      }
    `}</style>
      <InnerLayout>{children}</InnerLayout>
    </Layout>
  );
}
export default async function WebappLayout({ children }: { children: ReactNode }) {
  const layoutData = await executeApiRequest<LayoutData>({
    endpoint: '/webapp/settings/layout',
  });
  const primaryColor = layoutData.layout.primary_color;

  return (
    <Layout>
      <style>{`
      :root {
        --primary: ${primaryColor}
      }
    `}</style>
      <InnerLayout>{children}</InnerLayout>
    </Layout>
  );
}
12 replies