ion | Figma to Clean Code

Industry Leading Code Generation

ion generates pixel-perfect code that fits your codebase and style.

Built for your design system

ion will automatically understand your bespoke design system and generate tailor-fitted code for your use case. It'll even understand what libraries you use.

Your AI Teammate

ion learns from your existing code to write multiple components indistinguishable from what your engineers write. Say goodbye to spaghetti code.

Logic & Stub Functions

ion generates complicated components with ease. Front end will be fully hooked up and ready to ship with animations, state, and even fetching. Just hook up your api and ship!

'use client';
// Generated with Ion on 2/6/2024, 10:17:46 AM
// Figma Link: https://www.figma.com/file/Qohyu8a8oaVqtDvIRuY120?node-id=657:4038

import { Pencil } from '@phosphor-icons/react';
import Button from 'components/ion/Button';
import CookieRadioBar from 'components/ion/CookieRadioBar';
import { MouseEvent } from 'react';

function CookieSettings() {
  function savePreferencesClickHandler(e: MouseEvent<HTMLButtonElement>) {
    alert('savePreferencesClickHandler fired');
  }
  
  return (
    <div className="bg-base w-[360px] flex-col flex items-start gap-y-6 px-6 py-8 rounded-radius-lg border border-sub-stroke h-fit">
      <div className="flex-col flex items-start">
        <div className="text-2xl text-base-foreground">Cookie Settings</div>
        <div className="text-base font-semibold text-sub-foreground">
          Manage your cookie settings here.
        </div>
      </div>
      <CookieRadioBar
        title="Strictly Necessary"
        subtitle="These cookies are essential in order to use the website and use its features."
      />
      <CookieRadioBar
        subtitle="These cookies allow the website to provide personalized functionality."
        title="Functional Cookies"
      />
      <CookieRadioBar
        subtitle="These cookies help improve the performance of the website."
        title="Performance Cookies"
      />
      <Button
        iconTrailing={<Pencil size={16} weight={'regular'} />}
        emphasis="medium"
        color="primary"
        size="md"
        onClick={savePreferencesClickHandler}
        className="w-full"
      >
        Save Preferences
      </Button>
    </div>
  );
}
export default CookieSettings;