Footer

import { AppDownloadButton, Button, Link, Typography } from "@krakentech/coral";
 
import {
	Footer,
	FooterAppDownloadContainer,
	FooterCountryList,
	FooterList,
	FooterListContainer,
	FooterSocialLink,
	FooterSocialList,
	FooterText,
} from "@krakentech/coral-organisms";
 
import { IconFacebook, IconInstagram, IconX } from "@krakentech/icons";
 
const menu1 = [
	{ text: "Help & FAQs", href: "/faqs" },
	{ text: "Complaints", href: "/complaints" },
	{ text: "Press", href: "/press" },
	{ text: "Our tariffs", href: "/tariffs" },
	{ text: "Tech blog", href: "/tech-blog" },
];
 
const menu2 = [
	{ text: "Contact us", href: "/contact-us" },
	{ text: "Careers", href: "/careers" },
	{ text: "Our policies", href: "/policies" },
	{ text: "Accessibility", href: "/accessibility" },
];
 
const socialLinks: Array<{ icon: React.ReactNode; label: string }> = [
	{
		icon: <IconFacebook size={44} />,
		label: "Find Octopus Energy on Facebook",
	},
	{
		icon: <IconX size={44} />,
		label: "Find Octopus Energy on Twitter",
	},
	{
		icon: <IconInstagram size={44} />,
		label: "Find Octopus Energy on Instagram",
	},
];
 
<Footer>
	<FooterListContainer variant="left">
		<FooterList>
			{menu1.map((menuItem, i) => (
				<Button
					color="base100"
					variant="text"
					href="#!"
					key={`${menuItem.text}-${i}`}
				>
					<Typography
						component="span"
						textStyle="h6"
						textAlign="left"
					>
						{menuItem.text}
					</Typography>
				</Button>
			))}
		</FooterList>
	</FooterListContainer>
	<FooterListContainer variant="center">
		<FooterList>
			{menu2.map((menuItem, i) => (
				<Button
					color="base100"
					variant="text"
					href="#!"
					key={`${menuItem.text}-${i}`}
				>
					<Typography
						component="span"
						textStyle="h6"
						textAlign="left"
					>
						{menuItem.text}
					</Typography>
				</Button>
			))}
		</FooterList>
	</FooterListContainer>
	<FooterListContainer variant="right">
		<FooterSocialList>
			{socialLinks.map((link, i) => (
				<FooterSocialLink
					href="#!"
					icon={link.icon}
					label={link.label}
					key={`${link.label}-${i}`}
				/>
			))}
		</FooterSocialList>
		<FooterCountryList currentCountry="GB" omit />
	</FooterListContainer>
	<FooterAppDownloadContainer>
		<AppDownloadButton />
		<AppDownloadButton platform="android" />
	</FooterAppDownloadContainer>
	<FooterText>
		<Typography textStyle="caption">
			Octopus Energy Ltd is a company registered in England and Wales.
		</Typography>
		<Typography textStyle="caption">
			Registered number: 09263424. Registered address: UK House, 5th
			Floor, 164-182 Oxford Street, London, United Kingdom, W1D 1NN.
		</Typography>
		<Typography textStyle="caption">
			<Link href="/policies/modern-slavery-statement">
				Modern slavery statement
			</Link>
		</Typography>
	</FooterText>
</Footer>;

<Footer maxWidth="full">...</Footer>

import { defineConfig } from "@pandacss/dev";
import { createCoralPreset, partsList } from "@krakentech/coral-design";
 
export default defineConfig({
	presets: [createCoralPreset({})],
	theme: {
		extend: {
			recipes: {
				StyledFooter: {
					base: partsList.footerParts({
						root: {
							backgroundColor: "pink",
 
							'& [data-part="button-root"]': {
								color: "black",
							},
 
							'& [data-part="link-root"]': {
								color: "black",
							},
 
							"& p": {
								color: "black",
							},
						},
					}),
				},
			},
		},
	},
});